前端开发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处理的核心代码：[code];(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)的格式：[code]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来处理。

代码片段 1