前端路由的实现方式

原文见martin的博客

最近一直在研究前后端分离，ajax可以很好的解决前后端分离的问题，但是又存在着浏览器无法前进后退，这个问题比较尴尬。但是采用前端路由的方式可以很好的解决这个问题。

前端路由与单页页面

路由就是指随着浏览器地址栏的变化，展示给用户的页面也不相同。
传统的网页根据用户访问的不同的地址，浏览器从服务器获取对应页面的内容展示给用户。这样造成服务器压力比较大，而且用户访问速度也比较慢。在这种场景下，出现了单页应用。
单页应用，就是只有一个页面，用户访问一个网址，服务器返回的页面始终只有一个，不管用户改变了浏览器地址栏的内容或者在页面内发生了跳转，服务器不会重新返回新的页面，而是通过相应的js操作来实现页面的更改。而地址栏内容的改变，显示不同的页面，实现的手段就是前端路由。

前端路由的实现方式

前端路由主要由两种方式实现：

1. location.hash+hashchange事件
2. history.pushState()+popState事件

hash+hashchange实现

这种方法的好处在于支持IE浏览器。对早期的一些浏览器的支持比较好。
实现原理：
location.hash始终指向页面url 中#之后的内容
当当前页面的url ='www.baidu.com',可以在浏览器的控制台输入location.hash为空，当页面指向url ='www.baidu.com/#/hello'的时候，location.hash = '#/hello'。通过读取location.hash可以知道当前页面所处的位置。通过hashchange事件可以监听location.hash的变化，从而进行相应的处理即可。
那么如何触发hash的改变呢？这里主要由两种方法：

1. 设置a标签，href = '#/blue'，当点击标签的时候，可以在当前url的后面增加上'#/blue'，同时触发hashchange,再回调函数中进行处理。
2. 直接在js中对location.hash = '#/blue'即可，此时url会改变，也会触发hashchange事件。
   下面给出一个通用的hash前端路由的实现方案：

function Router(){
  this.currentUrl='';
  this.routes={};
}
Router.prototype.route = function(path,callback){
  this.routes[path] = 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);
  // console.log(location.hash)
  // if(location.hash.slice(1)!=='/')
  //     location.hash = '#/';
}

上述定义了一个Router对象，在实例中可以这么使用：

var route = new Router();
route.init();
function changecolor(color){
  var body = document.getElementsByTagName('body')[0];
  body.style['background-color'] = color;
}
route.route('/',changecolor.bind(null,'skyblue'));
route.route('/blue',changecolor.bind(null,'blue'));
route.route('/green',changecolor.bind(null,'green'));
route.route('/color',function(){
  var p= document.getElementsByTagName('a');
  [].forEach.call(p,function(item){item.style['color'] = '#'+((~~(Math.random()*(1<<24))).toString(16));})
});

新建一个Router的实例，进行初始化，然后进行url与callback的绑定，就可以在hash发生改变的时候出发触发相应的callback。这种方式支持浏览器的前进与后退。很好的解决了前后端分离之后的问题。这种方式有一个缺点就是#的存在，让一些人看了觉得不是很舒服，所以html给history新增了一些api，从而以一种更优雅的方式实现前端路由。

history.pushState()+popstate

跟之前的方法一样,pushState()修改url的地址，popstate监听地址的改变，不同的是，手动的进行pushState()并不会触发popstate事件。
可以这样理解：

1. 用户点击了某个链接，触发ajax获取新的页面或者触发js中的某些操作，改变了dom结构。
2. 我们希望保存上一个页面，这时候我们就使用pushState(data,null,url)来将上一个页面的信息保存下来。
3. 当用户点击浏览器的前进或者后退的时候，触发popstate事件，可以读取到数据，然后进行该页面的操作或者ajax获取该页面的数据，也可以通过pushState()中的data来进行还原、更新。

自己写了一个demo,便于理解。其中url的链接均采用了#/打头，主要是如果是相对路径，服务器端会直接跳转到对应的网页，如果想要实现不用#,?等，需要在服务器端进行处理，不论用户访问的相对url是什么，都会返回最初的那个页面。
1.24更新：此处url直接采用相对路径，可以实现前进后退，问题出在刷新上，当用户刷新，此时，如果服务器端不做处理，会显示没有页面，服务器端只需要输出原本的那个页面就可以完美解决问题。

;(function(){
    var div1 = document.getElementById('div1');
    var a1 = document.getElementById('a1');
    var a2 = document.getElementById('a2');
    var count1 = 0;
  var count2 = 0;
  history.replaceState({count1:count1,count2:count2},null,'');//最开始的状态，采用replace直接替换
    a1.addEventListener('click',function(){
    count1++;
        history.pushState({count1:count1,count2:count2},null,'#/s'+count1);//之后的状态，需要进行保存
        a1.innerHTML = 's'+count1;
    })
    a2.addEventListener('click',function(){
    count2++;
        history.pushState({count1:count1,count2:count2},null,'#/k'+count2);//之后的状态，需要进行保存
        a2.innerHTML = 'k'+count2;
    })
    window.addEventListener('popstate',function(e){
    console.log(e.state);
    a1.innerHTML = 's'+e.state.count1;//监听popstate事件，对状态进行还原
      a2.innerHTML = 'k'+e.state.count2;
    })
})()

采用了立即执行函数来避免污染全局变量，其中点击一下a1,a2元素，均会进行pushState操作，在进行前进后退的时候，就会触发popstate事件，通过在该事件中对元素进行还原，优雅的解决了单页应用前进后退问题。
完整的代码见:code
演示页面见：demo

总结

当用户的操作修改了dom结构，而我们希望用户可以通过浏览器的前进后进行返回上一步的操作，就需要用到前端路由。
hash可以很好的进行保存，同时还能够自动对当前页面的dom结构进行保存。支持IE，就是页面的url必须#开头。代码相对复杂一点。
而history也是一种方法，思路简单，更符合前端路由的目的，代码简单，url可以随意指定，如果是纯相对路径需要在服务器端进行处理。