前端路由笔记
栏目: 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!!'));
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
C#入门经典
[美] Karli Watson、Christian Nagel / 齐立波、黄静 / 清华大学出版社 / 2008-12 / 118.00元
这是一本成就无数C#程序员的经典名著,厚而不“重”,可帮助您轻松掌握C#的各种编程知识,为您的职业生涯打下坚实的基础,《C#入门经典》自第1版出版以来,全球销量已经达数万册,在中国也有近8万册的销量,已经成为广大初级C#程序员首选的入门教程,也是目前国内市场上最畅销的C#专业店销书,曾两次被CSDN、《程序员》等机构和读者评选为“最受读者喜爱的十大技术开发类图书”!第4版面向C#2008和.NET......一起来看看 《C#入门经典》 这本书的介绍吧!