Javascript实现前端简单的路由实例
前言
前端路由在很多开源的js类库框架中都得到支持，如angularJS，Backbone，Reactjs等等。前端路由和后端路由原理一样，是让所有的交互和展现在一个页面运行以达到减少服务器请求，提高客户体验的目的，越来越多的网站特别是web应用都用到了前端路由。
HTML
页面中有一个导航菜单ul，和一个div#result用来显示结果，当点击导航菜单时，#result中会显示不同的结果内容。
<ul> <li><ahref="#/">首页</a></li> <li><ahref="#/product">产品</a></li> <li><ahref="#/server">服务</a></li> </ul> <divid="result"></div>
JAVASCRIPT
说一下前端路由实现的简要原理，以hash形式（也可以使用HistoryAPI来处理）为例，当url的hash发生变化时，触发hashchange注册的回调，回调中去进行不同的操作，进行不同的内容的展示。
functionRouter(){
this.routes={};
this.curUrl='';
this.route=function(path,callback){
this.routes[path]=callback||function(){};
};
this.refresh=function(){
this.curUrl=location.hash.slice(1)||'/';
this.routes[this.curUrl]();
};
this.init=function(){
window.addEventListener('load',this.refresh.bind(this),false);
window.addEventListener('hashchange',this.refresh.bind(this),false);
}
}
上面代码中路由系统Router对象实现，主要提供三个方法：
init监听浏览器urlhash更新事件。
route存储路由更新时的回调到回调数组routes中，回调函数将负责对页面的更新。
refresh执行当前url对应的回调函数，更新页面。
Router调用方式如下：
点击触发url的hash改变，并对应地更新内容，运行后你会发现每次点击菜单时，#result中会变换背景色和内容。
varR=newRouter();
R.init();
varres=document.getElementById('result');
R.route('/',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异步请求页面内容等功能。虽然这个实例非常简单，但实际上很多路由系统的根基都立于此，其他路由系统主要是对自身使用的框架机制进行配套及优化。好了，本文的内容到这就结束了，希望能对大家的学习或者工作带来一定的帮助，如果有疑问大家可以留言交流。