快捷導(dǎo)航

Javascript實現(xiàn)前端簡單的路由實例

更新時間：2016年09月11日 11:59:39 投稿：daisy

本文將使用javascript實現(xiàn)一個極其簡單的路由實例。WEB開發(fā)中路由概念并不陌生，我們接觸到的有前端路由和后端路由。后端路由在很多框架中是一個重要的模塊,同樣前端路由在單頁面應(yīng)用也很常見，它使得前端頁面體驗更流暢。

前言

前端路由在很多開源的js類庫框架中都得到支持，如angularJS，Backbone，Reactjs等等。前端路由和后端路由原理一樣，是讓所有的交互和展現(xiàn)在一個頁面運行以達到減少服務(wù)器請求，提高客戶體驗的目的，越來越多的網(wǎng)站特別是web應(yīng)用都用到了前端路由。

HTML

頁面中有一個導(dǎo)航菜單ul，和一個div#result用來顯示結(jié)果，當(dāng)點擊導(dǎo)航菜單時，#result中會顯示不同的結(jié)果內(nèi)容。

<ul> 
 <li><a href="#/">首頁</a></li> 
 <li><a href="#/product">產(chǎn)品</a></li> 
 <li><a href="#/server">服務(wù)</a></li> 
</ul>
<div id="result"></div>

JAVASCRIPT

說一下前端路由實現(xiàn)的簡要原理，以 hash 形式（也可以使用 History API 來處理）為例，當(dāng) url 的 hash 發(fā)生變化時，觸發(fā) hashchange 注冊的回調(diào)，回調(diào)中去進行不同的操作，進行不同的內(nèi)容的展示。

function Router(){
 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);
 }
}

上面代碼中路由系統(tǒng)Router對象實現(xiàn)，主要提供三個方法：

init監(jiān)聽瀏覽器 url hash 更新事件。

route存儲路由更新時的回調(diào)到回調(diào)數(shù)組routes中，回調(diào)函數(shù)將負責(zé)對頁面的更新。

refresh執(zhí)行當(dāng)前url對應(yīng)的回調(diào)函數(shù)，更新頁面。

Router調(diào)用方式如下：

點擊觸發(fā) url 的 hash 改變，并對應(yīng)地更新內(nèi)容，運行后你會發(fā)現(xiàn)每次點擊菜單時，#result中會變換背景色和內(nèi)容。

var R = new Router();
R.init();
var res = document.getElementById('result');

 R.route('/', function() {
 res.style.background = 'blue';
 res.innerHTML = '這是首頁';
 });
 R.route('/product', function() {
  res.style.background = 'orange';
 res.innerHTML = '這是產(chǎn)品頁';
 });
 R.route('/server', function() {
  res.style.background = 'black';
 res.innerHTML = '這是服務(wù)頁';
 });

總結(jié)

以上為一個前端路由的簡單實現(xiàn)，實際應(yīng)用中，應(yīng)該對hash進行正則匹配處理，以滿足大量url的應(yīng)用，同時增加ajax異步請求頁面內(nèi)容等功能。雖然這個實例非常簡單，但實際上很多路由系統(tǒng)的根基都立于此，其他路由系統(tǒng)主要是對自身使用的框架機制進行配套及優(yōu)化。好了，本文的內(nèi)容到這就結(jié)束了，希望能對大家的學(xué)習(xí)或者工作帶來一定的幫助，如果有疑問大家可以留言交流。

您可能感興趣的文章: