JS简单路由实现

说一下前端路由实现的简要原理，以 hash 形式（也可以使用 History API 来处理）为例， 当 url 的 hash 发生变化时，触发 hashchange 注册的回调，回调中去进行不同的操作，进行不同的内容的展示。 1 function Router(){ 2 this.routes = {}; 3 this.curUrl = ''; 4 5 this.route = function(path, callback){ 6 this.routes[path] = callback || function(){}; 7 }; 8 9 this.refresh = function(){ 10 this.curUrl = location.hash.slice(1) || '/'; 11 this.routes[this.curUrl](); 12 }; 13 14 this.init = function(){ 15 window.addEventListener('load', this.refresh.bind(this), false); 16 window.addEventListener('hashchange', this.refresh.bind(this), false); 17 } 18 }

 

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

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

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

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

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

 

1 var R = new Router(); 2 R.init(); 3 var res = document.getElementById('result'); 4 5 R.route('/', function() { 6 res.style.background = 'blue'; 7 res.innerHTML = '这是首页'; 8 }); 9 R.route('/product', function() { 10 res.style.background = 'orange'; 11 res.innerHTML = '这是产品页'; 12 }); 13 R.route('/server', function() { 14 res.style.background = 'black'; 15 res.innerHTML = '这是服务页'; 16 });

 

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

 

转载于:https://www.cnblogs.com/wangEddy/p/8310443.html

相关资源：Javascript实现前端简单的路由实例