這篇文章主要介紹了Backbone.js框架中的Router路由功能,Router在Backbone中相當(dāng)于一個(gè)MVC框架中的Controller控制器功能,需要的朋友可以參考下

Backbone 中的 Router 充當(dāng)路由的作用，控制 URL 的走向，當(dāng)在 URL 中使用 # 標(biāo)簽時(shí)生效。

定義 Router 至少需要一個(gè) Router 和一個(gè)函數(shù)來(lái)映射特定的 URL，而且我們需要記住，在 Backbone 中，# 標(biāo)簽后的任意字符都會(huì)被 Router 接收并解釋。

下面我們來(lái)定義一個(gè) Router：

<script>

 var AppRouter = Backbone.Router.extend({

  routes: {

   "*actions": "defaultRoute" // 匹配 http://example.com/#anything-here

  }

 });

 // 實(shí)例化 Router

 var app_router = new AppRouter;

 app_router.on('route:defaultRoute', function(actions) {

  alert(actions);

 })

 // 打開 Backbone 的歷史記錄

 Backbone.history.start();

</script>

現(xiàn)在，我們就定義好了一個(gè) Router 了，但此時(shí) Router 并未匹配特定的 URL，接下來(lái)我們開始詳細(xì)講解 Router 是如何工作的。

動(dòng)態(tài)路由選擇

Backbone 允許你定義帶有特定參數(shù)的 Router。例如，你可能希望通過(guò)一個(gè)特定的 id 接收一個(gè) post，比如這樣一個(gè) URL："http://example.com/#/posts/12"，一旦這個(gè) Router 被激活，你就可以取得一個(gè) id 為12的 post。接下來(lái)，我們就來(lái)定義這個(gè) Router：

<script>

 var AppRouter = Backbone.Router.extend({

  routes: {

   "posts/:id": "getPost",

   "*actions": "defaultRoute" //Backbone 會(huì)根據(jù)順序匹配路由

  }

 });

 // 實(shí)例化 Router

 var app_router = new AppRouter;

 app_router.on('route:getPost', function (id) {

  // 注意，參數(shù)通過(guò)這里進(jìn)行傳遞

  alert( "Get post number " + id ); 

 });

 app_router.on('route:defaultRoute', function (actions) {

  alert( actions ); 

 });

 // 打開 Backbone 的歷史記錄

 Backbone.history.start();

</script>

匹配規(guī)則

Backbone 使用兩種形式的變量來(lái)設(shè)置 Router 的匹配規(guī)則。第一種是 :，它可以匹配 URL 中斜杠之間的任意參數(shù)，另一種是 *，它用來(lái)匹配斜杠后面的所有部分。注意，由于第二種形式的模糊性大于第一種，所以它的匹配優(yōu)先級(jí)最低。

任一形式匹配的結(jié)果會(huì)以參數(shù)的形式傳遞到相關(guān)的函數(shù)中，第一種規(guī)則可能返回一個(gè)或多個(gè)參數(shù)，第二種規(guī)則將整個(gè)匹配結(jié)果作為一個(gè)參數(shù)返回。

接下來(lái)，我們用實(shí)例來(lái)說(shuō)明：

routes:{

 "posts/:id": "getPost",

 // <a >Example</a>

 "download/*path": "downloadFile",

 // <a >Download</a>

 ":route/:action": "loadView",

 // <a >Load Route/Action View</a>

},

app_router.on('route:getPost', function( id ){ 

 alert(id); // 匹配后，傳遞過(guò)來(lái)的參數(shù)為 12

});

app_router.on('route:downloadFile', function( path ){ 

 alert(path); // 匹配后，整個(gè)匹配結(jié)果作為一個(gè)參數(shù)返回，路徑為 user/images/hey.gif 

});

app_router.on('route:loadView', function( route, action ){ 

 alert(route + "_" + action); // 匹配后，傳遞過(guò)來(lái)兩個(gè)參數(shù)，此時(shí)會(huì)彈出 dashboard_graph 

});

你可能經(jīng)常聽說(shuō)“路由器”這個(gè)詞，但它常常是指一種網(wǎng)絡(luò)設(shè)備，這種設(shè)備是網(wǎng)絡(luò)連接、數(shù)據(jù)傳輸?shù)膶?dǎo)航和樞紐。而Backbone中的“路由器”功能與它類似，從上面的例子中你就能看出，它可以將不同的URL錨點(diǎn)導(dǎo)航到對(duì)應(yīng)的Action方法。

（許多服務(wù)端Web框架中也提供了這樣的機(jī)制，但Backbone.Router更側(cè)重前端單頁(yè)應(yīng)用的導(dǎo)航。）

Backbone的路由導(dǎo)航是由Backbone.Router和Backbone.History兩個(gè)類共同完成的：

Router類用于定義和解析路由規(guī)則，并將URL映射到Action。

History類用于監(jiān)聽URL的變化，和觸發(fā)Action方法。

我們一般不會(huì)直接實(shí)例化一個(gè)History，因?yàn)槲覀冊(cè)诘谝淮蝿?chuàng)建Router實(shí)例時(shí)，會(huì)自動(dòng)創(chuàng)建一個(gè)History的單例對(duì)象，你可以通過(guò)Backbone.history來(lái)訪問(wèn)這個(gè)對(duì)象。

要使用路由功能，首先我們需要定義一個(gè)Router類來(lái)聲明需要監(jiān)聽的URL規(guī)則和Action，在剛才的例子中，我們?cè)诙x時(shí)通過(guò)routes屬性來(lái)定義需要監(jiān)聽的URL列表，其中Key表示URL規(guī)則，Value表示當(dāng)URL處于該規(guī)則時(shí)所執(zhí)行的Action方法。

Hash規(guī)則

URL規(guī)則表示當(dāng)前URL中的Hash（錨點(diǎn)）片段，我們除了能在規(guī)則中指定一般的字符串外，還需要注意兩種特別的動(dòng)態(tài)規(guī)則：

規(guī)則中以/（斜線）為分隔的一段字符串，在Router類內(nèi)部會(huì)被轉(zhuǎn)換為表達(dá)式([^\/]+)，表示以/（斜線）開頭的多個(gè)字符，如果在這一段規(guī)則中設(shè)置了:（冒號(hào)），則表示URL中這一段字符串將被作為參數(shù)傳遞給Action。

例如我們?cè)O(shè)置了規(guī)則topic/:id，當(dāng)錨點(diǎn)為#topic/1023時(shí)，1023將被作為參數(shù)id傳遞給Action，規(guī)則中的參數(shù)名（:id）一般會(huì)和Action方法的形參名稱相同，雖然Router并沒(méi)有這樣的限制，但使用相同的參數(shù)名更容易讓人理解。

規(guī)則中的*（星號(hào)）會(huì)在Router內(nèi)部被轉(zhuǎn)換為表達(dá)式(.*?)，表示零個(gè)或多個(gè)任意字符，與:（冒號(hào)）規(guī)則相比，*（星號(hào)）沒(méi)有/（斜線）分隔的限制，就像我們?cè)谏厦娴睦又卸x的*error規(guī)則一樣。

Router中的*（星號(hào)）規(guī)則在被轉(zhuǎn)換為正則表達(dá)式后使用非貪婪模式，因此你可以使用例如這樣的組合規(guī)則：*type/:id，它能匹配#hot/1023，同時(shí)會(huì)將hot和1023作為參數(shù)傳遞給Action方法。

上面介紹了規(guī)則的定義方式，這些規(guī)則都會(huì)對(duì)應(yīng)一個(gè)Action方法名稱，該方法必須處于Router對(duì)象中。

在定義好Router類之后，我們需要實(shí)例化一個(gè)Router對(duì)象，并調(diào)用Backbone.history對(duì)象的start()方法，該方法會(huì)啟動(dòng)對(duì)URL的監(jiān)聽。在History對(duì)象內(nèi)部，默認(rèn)會(huì)通過(guò)onhashchange事件監(jiān)聽URL中Hash（錨點(diǎn)）的變化，對(duì)于不支持onhashchange事件的瀏覽器（例如IE6），History會(huì)通過(guò)setInterval心跳的方式監(jiān)聽。

pushState規(guī)則

Backbone.History還支持pushState方式的URL，pushState是HTML5提供的一種新特性，它能操作當(dāng)前瀏覽器的URL（而不是僅僅改變錨點(diǎn)），同時(shí)不會(huì)導(dǎo)致頁(yè)面刷新，從而使單頁(yè)應(yīng)用使用起來(lái)更像一套完整的流程。

要使用pushState特性，你需要先了解HTML5為該特性提供的一些方法和事件（這些方法都被定義在window.history對(duì)象中）：

1.pushState()：該方法可以將指定的URL添加一個(gè)新的history實(shí)體到瀏覽器歷史里

2.replaceState()：該方法可以將當(dāng)前的history實(shí)體替換為指定的URL

調(diào)用pushState()和replaceState()方法，僅僅是替換當(dāng)前頁(yè)面的URL，而并不會(huì)真正轉(zhuǎn)到這個(gè)URL地址（當(dāng)使用后退或前進(jìn)按鈕時(shí)，也不會(huì)跳轉(zhuǎn)到該URL），我們可以通過(guò)onpopstate事件來(lái)監(jiān)聽這兩個(gè)方法引起的URL變化。

路由相關(guān)方法

1.route()方法

在設(shè)定好路由規(guī)則之后，如果需要?jiǎng)討B(tài)調(diào)整，可以調(diào)用Router.route()方法來(lái)動(dòng)態(tài)添加路由規(guī)則及Action方法，例如：

router.route('topic/:pageno/:pagesize', 'page', function(pageno, pagesize){ 

 // todo 

}); 

我們調(diào)用route()方法時(shí)，給定的規(guī)則不僅僅可以是字符串，也可以是一個(gè)正則表達(dá)式：

router.route(/^topic/(.*?)/(.*?)$/, 'page', function(pageno, pagesize){ 

 // todo 

}); 

2.navigate()方法

在前面的例子中，URL規(guī)則都是由我們手動(dòng)輸入觸發(fā)的，在實(shí)際應(yīng)用中，有時(shí)可能需要手動(dòng)進(jìn)行跳轉(zhuǎn)、導(dǎo)航，這時(shí)可以調(diào)用

Router.navigate()方法進(jìn)行控制，例如：

router.navigate('topic/1000', { 

 trigger: true

}); 

這段代碼將URL更改為http://localhost/index.html#topic/1000，并觸發(fā)了renderDetail方法。需要注意的是，我們?cè)诘诙€(gè)參數(shù)傳入了trigger配置，該配置用于表示更改URL的同時(shí)是否觸發(fā)相應(yīng)的Action方法。

3.stop()方法

還記得我們是通過(guò)Backbone.history.start()方法來(lái)啟動(dòng)路由監(jiān)聽的，你也可以隨時(shí)調(diào)用Backbone.history.stop()方法來(lái)停止監(jiān)聽，例如：

router.route('topic/:pageno/:pagesize', 'page', function(pageno, pagesize) { 

 Backbone.history.stop(); 

}); 

運(yùn)行這段代碼，并訪問(wèn)URL：http://localhost/index.html#topic/5/20，你會(huì)發(fā)現(xiàn)這個(gè)Action被執(zhí)行之后，監(jiān)聽已經(jīng)不再生效了。