Javascript实现前端简单路由

  前端路由在很多开源的js类库框架中都得到支持,如angularJS,Backbone,Reactjs等等。前端路由和后端路由原理一样,是让所有的交互和展现在一个页面运行以达到减少服务器请求,提高客户体验的目的。

HTML

  页面中有一个导航菜单ul,和一个div#result用来显示结果,当点击导航菜单时,#result中会显示不同的结果内容。

<ul>  
    <li><a href="#index">首页</a></li>  
    <li><a href="#product">产品</a></li>  
    <li><a href="#server">服务</a></li>  
</ul>  
<div id="result"></div>  

JAVASCRIPT

  前端路由实现的简要原理,以 hash 形式(也可以使用 History API 来处理)为例,当 url 的 hash 发生变化时,触发 hashchange 注册的回调,回调中去进行不同的操作,进行不同的内容的展示。

var R = {  
    routes : {},
    curUrl : '',

    route : function(path, callback){
        this.routes[path] = callback || function(){};
    },

    refresh : function(){
        this.curUrl = location.hash.slice(1) || 'index';
        console.log(this.curUrl);
        this.routes[this.curUrl]();
    },

    init : function(){
        window.addEventListener('load', this.refresh.bind(this), false);
        window.addEventListener('hashchange', this.refresh.bind(this), false);
    }

}

  上面代码中路由系统Router对象实现,主要提供三个方法:

  init 监听浏览器 url hash 更新事件。

  route 存储路由更新时的回调到回调数组routes中,回调函数将负责对页面的更新。

  refresh 执行当前url对应的回调函数,更新页面。

  Router调用方式如下:点击触发 url 的 hash 改变,并对应地更新内容,运行后现每次点击菜单时,#result中会变换背景色和内容。

R.init();  
var res = document.getElementById('result'); 

 R.route('index', function() { 
     res.style.background = 'blue'; 
     res.innerHTML = '这是首页'; 
 }); 
 R.route('product', function() { 
    res.style.background = 'orange'; 
     res.innerHTML = '这是产品页'; 
 }); 
 R.route('server', function() { 
    res.style.background = 'black'; 
     res.innerHTML = '这是服务页'; 
 });

  以上为一个前端路由的简单实现,实际应用中,应该对hash进行正则匹配处理,以满足大量url的应用,同时增加ajax异步请求页面内容等功能。虽然这个实例非常简单,但实际上很多路由系统的根基都立于此,其他路由系统主要是对自身使用的框架机制进行配套及优化。