快捷導(dǎo)航

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

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

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

前言

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

HTML

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

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

JAVASCRIPT

說(shuō)一下前端路由實(shí)現(xiàn)的簡(jiǎn)要原理，以 hash 形式（也可以使用 History API 來(lái)處理）為例，當(dāng) url 的 hash 發(fā)生變化時(shí)，觸發(fā) hashchange 注冊(cè)的回調(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對(duì)象實(shí)現(xiàn)，主要提供三個(gè)方法：

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

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

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

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

點(diǎn)擊觸發(fā) url 的 hash 改變，并對(duì)應(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 = '這是首頁(yè)';
 });
 R.route('/product', function() {
  res.style.background = 'orange';
 res.innerHTML = '這是產(chǎn)品頁(yè)';
 });
 R.route('/server', function() {
  res.style.background = 'black';
 res.innerHTML = '這是服務(wù)頁(yè)';
 });

總結(jié)

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

您可能感興趣的文章: