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，如#/page一、#/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來處理。