前端路由笔记
栏目: JavaScript · 发布时间: 5年前
内容简介:前端路由的实现本质:检测URL变化,获取url地址,解析url匹配页面;检测URL变化有两种方式: hash,HTML5 History
前端路由的实现本质:检测URL变化,获取url地址,解析url匹配页面;
检测URL变化有两种方式: hash,HTML5 History
-
HTML5 History
history.pushState 和 history.replaceState这两个api都分别接收三个参数:状态对象,标题, url (此url地址不支持跨域,跨域会报错)
这两个API都会操作浏览器的历史记录,并不引起浏览器的刷新,pushState会增加一条新的历史记录,replaceState会替换当前的历史记录;
popstate事件,需要注意的是调用history.pushState()或history.replaceState()不会触发popstate事件。只有在做出浏览器动作时,才会触发该事件,如用户点击浏览器的回退按钮,或者在Javascript代码中调用3.back()。
原理在点击某个路由时执行pushState,在操作浏览器时执行popstate; -
hash location.hash
window.location修改hash至不会引起页面刷新,而是当作新页面加到历史记录中。hash值变化会触发hashchange事件。
Function Router(){ this.currentUrl = ''; this.routes = {}; } Router.prototype.route = function(url, callback){ this.routes[url] = callback || function(){} } Router.prototype.refresh = function(){ this.currentUrl = location.hash.slice(1) || '/'; this.routes[this.currentUrl](); } Router.prototype.init = function(){ window.addEventListener('load', this.refresh.bind(this), false); window.addEventListener('hashchange', this.refresh.bind(this), false); } //使用 var $target = $('#target'); var route = new Router(); route.init(); route.route('/', $target.html('this is index page!!') ); route.route('/page1', $target.html('this is page1!!'));
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
ActionScript 3.0精彩范例词典
杨东昱 编 / 2008-5 / 59.00元
《ActionScript 3.0精彩范例词典》列出了最常用的ActionScript语法,并附有详细的程序代码范例,不但教您如何使用、修改ActionScript代码,而且还以实际范例和图解,说明每项语法还能呈现哪些动画效果和功能,对学习ActipScript有所帮助。读者在阅读《ActionScript 3.0精彩范例词典》之后,将能开发出属于自己的ActionScript程序与FLASH动画......一起来看看 《ActionScript 3.0精彩范例词典》 这本书的介绍吧!