使用pushState、popState和location.hash自己实现一个小路由

本文主要记录HTML5中history提供的pushState和replaceStateAPI。***通过这些API自己实现小路由。window.history提供的API请参考Mozilla文档。history提供的pushState和replaceStateAPI提供了操作浏览器历史栈的方法。其中，pushState：history.pushState(data,null,'#/page=1');pushState接收3个参数，第一个参数是一个obj，表示浏览器的第二个参数是document.title的值，一般设置为`null`，第三个参数string用于改变当前的urlpushState方法推送新的history记录到浏览器历史堆栈中，同时更改url。参数接收url为字符串类型，用于改变当前地址栏的url。需要注意的是这个参数不能跨域，即协议、域名、端口必须相同。如果出现跨域情况，会提示：UncaughtDOMException:Failedtoexecute'pushState'on'History':AhistorystateobjectwithURL'http://www.baidu.com/'cannotbecreatedinadocumentwithorigin'http://commanderXL.com'andURLExample:Openwww.baidu.comhistory.pushState(null,null,'?page=1')//地址栏变成www.baidu.com/?page=1history.pushState(null,null,'#page=2');//地址栏变成www.baidu.com/#page=2wherereplaceState:history.replaceState(null,null,'#page=2');replaceState接收到的参数pushState是一样的，但是最终的效果是：地址栏中的url会根据接收到的参数发生变化，但是browsing浏览器并没有在当前浏览历史栈中添加浏览器的历史记录，而是替换掉了当前浏览器的历史记录。虽然可以通过pushState和replaceState改变URL，但不会主动触发浏览器重新加载。window对象还提供了一个popstate方法：window.addEventListener('popstate',function(){});该方法用于监听浏览器切换不同的历史记录，并触发相应的事件。浏览器提供的history对象上也有go和back方法来模拟用户点击浏览器的前进和后退按钮。例如在Web应用中，当点击标签时，会发生页面跳转。这时候，history.back();方法被调用，页面回退，同时刷新页面。这个时候window.onpopstate是监听不到这个事件的。但是如果在没有浏览器刷新的情况下通过pushState或者replaceState改变了URL，那么就使用history.back()或者history.go()，这样就会触发popstate事件。history.pushState({page:1},null,'?page=1');history.pushState({page:2},null,'?page=2');history.back();//浏览器返回window.addEventListener('popstate',function(e){//popstate事件触发后，事件对象event保存当前浏览器历史的状态。//e.state保存pushState添加的状态的参考控制台.log(e.state);//output{page:1}});PS：通过pushState在url中加上?page=1，通过location.search获取搜索内容。但是，如果你通过location.search改变url，它会主动触发浏览器重新加载。这个特性可以和下面关于hash的内容进行比较。对API有了大概的了解，那么这些方法可以应用到哪些地方呢？一个常见的场景是，在单页应用中，通过这些API完成前端路由设计，可以在浏览器不刷新的情况下，使用pushState和replaceState改变url。并通过popstate监听浏览器历史，完成一系列异步动作。//路由constRouter=[];constaddRoute=(path='',handle=()=>{})=>{letobj={path,handle}Router.push(obj);}//添加路由定义addRoute('/post',function(){//dosomething});addRoute('/login',function(){//dosomething})//路由处理constrouteHandle=(path)=>{Router.forEach((item,index)=>{if(item.path===path){item.handle.apply(null,[path]);returntrue;}})returnfalse;}//拦截默认a标签行为document.addEventListener('click',function(e){letdataset=e.target.dataset;if(dataset){if(routeHandle(dataset.href)){//防止默认行为e.preventDefault();}}})大致思路是通过添加路由信息，然后拦截标签的默认行为,并使用它与Registered路由信息进行匹配。如果匹配成功，则调用对应的handle方法。但是pushState和replaceState方法对低版本的IE浏览器的兼容性不是很好。所以可以降级使用hash进行路由设计。哈希？请戳我通过location.hash可以得到url上的第一个#(fragment)和后面的内容。同时它的内容可以通过location.hash改写，不会主动触发浏览器重载。pushState和replaceState有一些功能是一样的吗？所以为了兼容低版本的浏览器，可以通过监听#changes来设计路由。那么如何监控呢？一种更粗略的方法是轮询。varoldHash=location.hash;setTimeInterval(function(){if(oldHash!==location.hash){//dosomethingoldHash=location.hash;}},100);不过H5也提供了一个API：hashchange。可以直接代替上面的轮询方式来监听#.window.addEventListener('hashchange',function(){routeHandle(locaiton.hash);});这个小路由设计可以在我的github中找到。小小总结：以上主要介绍了history提供的一些API，与hash相关的知识。平时可以在SPA中使用，Gmail使用hash进行路由设计。相对于页面跳转而言：页面只需要加载一次。后续页面切换可以通过ajax请求数据。页面体验更流畅；本地缓存可用于优化页面体验。在不同页面之间切换的过程中更加流畅；它可以按需加载......等等一些实际的好处。