原生 js 实现前端路由

8,681 阅读5分钟

最近一直在研究前后端分离,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可以随意指定,如果是纯相对路径需要在服务器端进行处理。