JavaScript实现前端路由

在单页面应用中，前端通常需要一套路由机制，这样当url发生变化时就可以做出一些处理，从而让页面显示不同的内容。Backbone及Angular里面内置的都有一套路由实现，但有时候可能并不想使用整个框架，只需要路由处理的部分，那么下面就来看一下如何用JavaScript实现前端路由。

html部分：

<div class="container"> <nav class="mainMenu"> <ul> <li><a href="#/">首页</a></li> <li><a href="#/page1">页面1</a></li> <li><a href="#/page2">页面2</a></li> <li><a href="#/page3">页面3</a></li> <li><a href="#/page4">页面4</a></li> </ul> </nav> <div class="content"></div> </div>

这里有几个带#号的锚链接，点击不同的锚链接url里会产生不同的hash，如#/page1、#/page2等，这个值可以通过location.hash获取。

同时，每次hash的变化我们还可以通过onhashchange事件来监听，然后做出相应的处理，下面就来看一下具体的实现：

Router处理的核心代码：

;(function () { function Router () {} Router.prototype.route = function ( path, callback ) { var url = location.hash.slice(1) || '/'; // 刷新时的处理 window.addEventListener('load', function () { if ( url == path ) { callback&&callback(); } }, false); // hash变化时的处理 window.addEventListener('hashchange', function () { url = location.hash.slice(1) || '/'; if ( url == path ) { callback&&callback(); } }, false); }; window.Router = new Router(); })();

Router注册，注册方式就是Router.route(path, callback)的格式：

var content = document.querySelectorAll('.content'); // 测试函数，这里可以放一些ajax处理之类的 function loadContent ( text ) { content[0].innerHTML = text; } // 注意：这里的path要和html里面锚链接对应 // 如：‘#/’对应‘/’, '#/page2'对应'/page2' Router.route('/', function () { loadContent('这是首页'); }); Router.route('/page1', function () { loadContent('这是页面1'); }); Router.route('/page2', function () { loadContent('这是页面2'); }); Router.route('/page3', function () { loadContent('这是页面3'); }); Router.route('/page4', function () { loadContent('这是页面4'); });

Ok，以上就是前端路由的简单实现，另外也可以使用History API来处理。