这篇文章主要是记录下html5中history提供的pushstate, replacestateapi。最后通过这些api自己实现小型的路由。
关于window.history提供的api请参见mozilla文档
其中history提供的pushstate和replacestate2个api提供了操作浏览器历史栈的方法。
其中pushstate:
history.pushstate(data, null, '#/page=1'); pushstate接收3个参数，第一个参数为一个obj,表示浏览器 第二个参数是document.title的值，一般设定为`null` 第三个参数string，用以改变 当前url
pushstate方法在改变url的同时向浏览器历史栈中压入新的历史记录。
接收url的参数为string类型,用以改变当前地址栏的url.需要注意的一点就是这个参数不能和跨域，即协议，域名，端口必须都是相同的，如果出现跨域的情况，即会提示：
uncaught domexception: failed to execute 'pushstate' on 'history': a history state object with url 'http://www.baidu.com/' cannot be created in a document with origin 'http://commanderxl.com' and url
example:
打开www.baidu.com history.pushstate(null, null, '?page=1') //地址栏变成 www.baidu.com/?page=1 history.pushstate(null, null, '#page=2'); //地址栏变成 www.baidu.com/#page=2
其中replacestate:
history.replacestate(null, null, '#page=2');
replacestate接收的参数pushstate相同，但是最终的效果是：地址栏url会根据接收的参数而变化，但是浏览器并未在当浏览历史栈中增加浏览器的历史记录，而是替换当前的浏览器历史记录。
通过pushstate和replacestate虽然能改变url，但是不会主动触发浏览器reload。
window对象还提供popstate方法:
window.addeventlistener('popstate', function() { });
这个方法用以监听浏览器在不同历史记录中进行切换，而触发相应的事件。
在浏览器提供的history对象上还有go, back方法，用以模拟用户点击浏览器的前进后退按钮。在某个web应用当中，比如点击了<a>标签，发生了页面的跳转。这时调用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添加的state的引用 console.log(e.state); //输出 {page: 1} });
ps: 通过pushstate在url上添加?page=1可以通过location.search去获取search的内容。不过如果通过location.search去改变url的话是会主动触发浏览器reload的。这个特性可以和下面将的关于hash的内容对比下。
api大致了解了，那么这些方法可以运用到哪些地方呢？一个比较常用的场景是就在单页应用中，通过这些api完成前端的路由设计，利用pushstate, replacestate可以改变url同时浏览器不刷新，并且通过popstate监听浏览器历史记录的方式，完成一系列的异步动作。
addroute('/login', function() { //do something }) //路由处理 const routehandle = (path) => { router.foreach((item, index) => { if(item.path === path) { item.handle.apply(null, [path]); return true; } }) return false; } //拦截默认的a标签行为 document.addeventlistener('click', function(e) { let dataset = e.target.dataset; if(dataset) { if(routehandle(dataset.href)) { //阻止默认行为 e.preventdefault(); } } })
大致的实现思路就是，通过<a>添加路由信息，然后拦截<a>标签的默认行为，并与注册的路由信息进行匹配。若匹配成功调用对应的handle方法.
不过pushstate和replacestate方法在低版本的ie浏览器下兼容性不是很好。所以可以进行降级使用hash来进行路由设计。
hash？请戳我。
可以通过location.hash获取url上第一个#(fragment)及后面的内容。同时还能通过location.hash改写其内容，且不会主动触发浏览器reload。 有些功能是不是和pushstate和replacestate一样？ 所以为了兼容到低版本的浏览器,可以通过监听#变化来进行路由设计。
那么如何去监听呢？ 比较粗暴的一种方式就是polling。
var oldhash = location.hash; settimeinterval(function() { if(oldhash !== location.hash) { //do something oldhash = location.hash; } }, 100);
不过，h5还提供了一个api: hashchange。它的就可以直接代替上面的polling方法，来监听#的变化。
window.addeventlistener('hashchange', function() { routehandle(locaiton.hash); });
这个小型的路由设计可以参见我的github.
稍微总结下：
上面主要介绍了history提供的一些api，hash的相关知识。在平时可以运用到spa当中，gmail就是通过hash来进行路由设计的。它相对于页面跳转来说：
页面只需要加载一次。后面的页面切换可以通过ajax去请求数据。页面体验更加流畅；
可以利用本地缓存，优化页面体验。在不同页面切换的过程中更加流畅；
可进行按需加载...
等等一些实用的好处吧。