前言

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

HTML

頁面中有一個(gè)導(dǎo)航菜單ul，和一個(gè)div#result用來顯示結(jié)果，當(dāng)點(diǎn)擊導(dǎo)航菜單時(shí)，#result中會(huì)顯示不同的結(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

說一下前端路由實(shí)現(xiàn)的簡要原理，以 hash 形式（也可以使用 History API 來處理）為例，當(dāng) url 的 hash 發(fā)生變化時(shí)，觸發(fā) hashchange 注冊的回調(diào)，回調(diào)中去進(jìn)行不同的操作，進(jìn)行不同的內(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對象實(shí)現(xiàn)，主要提供三個(gè)方法：

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

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

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

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

點(diǎn)擊觸發(fā) url 的 hash 改變，并對應(yīng)地更新內(nèi)容，運(yùn)行后你會(huì)發(fā)現(xiàn)每次點(diǎn)擊菜單時(shí)，#result中會(huì)變換背景色和內(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é)

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

最新評論