SPA应用路由器如何工作？

SPA(single page application)-单页面应用有两个特点，一是路由控制，二是模板渲染。通过路由器，可以在不reload页面的情况下，实现页面部分刷新。那么，最关键的地方，就是如何设计路由器，如何让路由器工作？

一般，路由器有两种模式：

1.锚点（URL片段标识符）

URL格式大致如下：

http://www.somesite.com/index.html#hashinfo
http://www.somesite.com/index.html#!/hashinfo
...

主要部分就是#，后面的内容统称为“锚点”。当改变锚点时，页面的主体部分会切换内容，但是，整个页面不会被重新刷新。

那么，如何监听锚点变化？

1) 方法一：hashchange事件

hashchange事件遵从HTML5规范，它会在页面URL中的片段标识符(第一个#号开始到末尾的所有字符,包括#号)发生改变时触发。浏览器兼容情况如下（参考网站：http://caniuse.com/）：

haschange.png

如下代码可以监听hash变化：

window.onhashchange = funcRef 或者
 或者
window.addEventListener("hashchange", funcRef, false);

如果要兼容IE8以下的IE浏览器呢？或者兼容其他不支持hashchange事件的浏览器？该如何监听锚地变化？

2)方法二：setTimeout或setInterval

这种方法确实比较蛋疼。。。如果时间间隔设置的太长可能不够即时，如果时间间隔设置的太短又会影响页面性能。

不过，作为hashchange事件的polyfill方法，被采用在很多jquery.hashchange插件里，比如jquery库：jquery.ba-hashchange

jquery.ba-hashchange.js工作原理大致为：

var timeout_id;
function setup(){
  if ( "onhashchange" in window.document.body ) { return; }
  timeout_id || poll();
}

function poll() {
  var hash = get_fragment(),
  ...  
  timeout_id = setTimeout( poll, 50 );
}

function get_fragment( url ) {
    url = url || location.href;
    return '#' + url.replace( /^[^#]*#?(.*)$/, '$1' );
  }

2. HTML5 History API

HTML5包含新对象history，其提供对浏览器历史记录的访问能力。它暴露一些常用方法和属性，可以让用户通过操作浏览器“前进”和“后退”按钮，访问到历史记录。

• pushState(): 添加新的历史条目
• replaceState(): 用新条目替代已有的历史条目
• popstate事件: 每当激活的历史记录发生变化时，该事件被触发（激活的历史记录为用pushState创建的历史条目）

浏览器支持情况如下：

history.png

那么，如何利用history这些特性来创建路由器？

1. 假设现在的页面URL为http://www.somesite.com/index.html；
2. 点击某个菜单，需要更改页面内容，调用JS：history.pushState(null, null, 'subPage1.html')；
3. 这时，浏览器地址栏显示的URL变为http://www.somesite.com/subPage1.html；
4. 同时，window.popstate事件被触发（可以开心的做你想做的事情了）；
5. 整体页面，并没有刷新，没有激活window.onload事件；

如此可见，利用HTML5 history API，可以实现“切换URL地址但页面不会被刷新”的功能。

它的优点是，路由器在多个URL间跳转，可以完全支持浏览器SEO（切换Hash不能改变真正的URL，多次路由切换后，搜索引擎爬虫会认为一直访问同一个页面，无法SEO）。

缺点是，切换路由后的http://www.somesite.com/subPage1.html 并不是一个真正的资源地址，想象一下，这个时候点击浏览器刷新按钮，浏览器必然会发起对subPage1.html资源文件的请求。此时，服务器必须能够返回正确资源，否则response将会是404。

也就是说，要完成HTML5 history API的使用配置，需要对服务器进行调整，以便其能够对为所有路由路径返回正确的内容。

3. 小结

目前流向的前端SPA框架，都支持上述两种模式的路由。比如Angularjs, Vue.js, backbone......
用户可以在框架里自行配置。一般，默认是URL片段标识符，也就是hash锚点模式。

参考资料：
https://developer.mozilla.org/zh-CN/docs/DOM/Manipulating_the_browser_history
https://developer.mozilla.org/zh-CN/docs/Web/Events/hashchange

---

更多高阶内容，可移步《小专栏-娜姐聊前端》。