全面解析JavaScript的Backbone.js架構中的Router路由_基礎知識

Backbone 中的 Router 充當路由的作用，控制 URL 的走向，當在 URL 中使用 # 標籤時生效。
定義 Router 至少需要一個 Router 和一個函數來映射特定的 URL，而且我們需要記住，在 Backbone 中，# 標籤後的任一字元都會被 Router 接收並解釋。
下面我們來定義一個 Router：

<script> var AppRouter = Backbone.Router.extend({  routes: {   "*actions": "defaultRoute" // 匹配 http://example.com/#anything-here  } }); // 執行個體化 Router var app_router = new AppRouter; app_router.on('route:defaultRoute', function(actions) {  alert(actions); }) // 開啟 Backbone 的記錄 Backbone.history.start();</script>

現在，我們就定義好了一個 Router 了，但此時 Router 並未匹配特定的 URL，接下來我們開始詳細講解 Router 是如何工作的。

動態路由選擇
Backbone 允許你定義帶有特定參數的 Router。例如，你可能希望通過一個特定的 id 接收一個 post，比如這樣一個 URL："http://example.com/#/posts/12"，一旦這個 Router 被啟用，你就可以取得一個 id 為12的 post。接下來，我們就來定義這個 Router：

<script> var AppRouter = Backbone.Router.extend({  routes: {   "posts/:id": "getPost",   "*actions": "defaultRoute" //Backbone 會根據順序匹配路由  } }); // 執行個體化 Router var app_router = new AppRouter; app_router.on('route:getPost', function (id) {  // 注意，參數通過這裡進行傳遞  alert( "Get post number " + id );  }); app_router.on('route:defaultRoute', function (actions) {  alert( actions );  }); // 開啟 Backbone 的記錄 Backbone.history.start();</script>

匹配規則
Backbone 使用兩種形式的變數來設定 Router 的匹配規則。第一種是 :，它可以匹配 URL 中斜杠之間的任意參數，另一種是 *，它用來匹配斜杠後面的所有部分。注意，由於第二種形式的模糊性大於第一種，所以它的匹配優先順序最低。
任一形式匹配的結果會以參數的形式傳遞到相關的函數中，第一種規則可能返回一個或多個參數，第二種規則將整個匹配結果作為一個參數返回。
接下來，我們用執行個體來說明：

routes:{ "posts/:id": "getPost", // <a href="http://example.com/#/posts/121">Example</a> "download/*path": "downloadFile", // <a href="yun_qi_img/">Download</a> ":route/:action": "loadView", // <a href="http://example.com/#/dashboard/graph">Load Route/Action View</a>},app_router.on('route:getPost', function( id ){  alert(id); // 匹配後，傳遞過來的參數為 12});app_router.on('route:downloadFile', function( path ){  alert(path); // 匹配後，整個匹配結果作為一個參數返回，路徑為 user/images/hey.gif });app_router.on('route:loadView', function( route, action ){  alert(route + "_" + action); // 匹配後，傳遞過來兩個參數，此時會彈出 dashboard_graph });

你可能經常聽說“路由器”這個詞，但它常常是指一種網路裝置，這種裝置是網路連接、資料轉送的導航和樞紐。而Backbone中的“路由器”功能與它類似，從上面的例子中你就能看出，它可以將不同的URL錨點導航到對應的Action方法。
（許多服務端Web架構中也提供了這樣的機制，但Backbone.Router更側重前端單頁應用的導航。）

Backbone的路由導航是由Backbone.Router和Backbone.History兩個類共同完成的：

• Router類用於定義和解析路由規則，並將URL映射到Action。
• History類用於監聽URL的變化，和觸發Action方法。

我們一般不會直接執行個體化一個History，因為我們在第一次建立Router執行個體時，會自動建立一個History的單例對象，你可以通過Backbone.history來訪問這個對象。

要使用路由功能，首先我們需要定義一個Router類來聲明需要監聽的URL規則和Action，在剛才的例子中，我們在定義時通過routes屬性來定義需要監聽的URL列表，其中Key表示URL規則，Value表示當URL處於該規則時所執行的Action方法。

Hash規則
URL規則表示當前URL中的Hash（錨點）片段，我們除了能在規則中指定一般的字串外，還需要注意兩種特別的動態規則：
規則中以/（斜線）為分隔的一段字串，在Router類內部會被轉換為運算式([^\/]+)，表示以/（斜線）開頭的多個字元，如果在這一段規則中設定了:（冒號），則表示URL中這一段字串將被作為參數傳遞給Action。
例如我們設定了規則topic/:id，當錨點為#topic/1023時，1023將被作為參數id傳遞給Action，規則中的參數名（:id）一般會和Action方法的形參名稱相同，雖然Router並沒有這樣的限制，但使用相同的參數名更容易讓人理解。
規則中的*（星號）會在Router內部被轉換為運算式(.*?)，表示零個或多個任一字元，與:（冒號）規則相比，*（星號）沒有/（斜線）分隔的限制，就像我們在上面的例子中定義的*error規則一樣。
Router中的*（星號）規則在被轉換為Regex後使用非貪婪模式，因此你可以使用例如這樣的組合規則：*type/:id，它能匹配#hot/1023，同時會將hot和1023作為參數傳遞給Action方法。

上面介紹了規則的定義方式，這些規則都會對應一個Action方法名稱，該方法必須處於Router對象中。
在定義好Router類之後，我們需要執行個體化一個Router對象，並調用Backbone.history對象的start()方法，該方法會啟動對URL的監聽。在History對象內部，預設會通過onhashchange事件監聽URL中Hash（錨點）的變化，對於不支援onhashchange事件的瀏覽器（例如IE6），History會通過setInterval心跳的方式監聽。

pushState規則
Backbone.History還支援pushState方式的URL，pushState是HTML5提供的一種新特性，它能操作當前瀏覽器的URL（而不是僅僅改變錨點），同時不會導致頁面重新整理，從而使單頁應用使用起來更像一套完整的流程。
要使用pushState特性，你需要先瞭解HTML5為該特性提供的一些方法和事件（這些方法都被定義在window.history對象中）：

1.pushState()：該方法可以將指定的URL添加一個新的history實體到瀏覽器歷史裡
2.replaceState()：該方法可以將當前的history實體替換為指定的URL

調用pushState()和replaceState()方法，僅僅是替換當前頁面的URL，而並不會真正轉到這個URL地址（當使用後退或前進按鈕時，也不會跳轉到該URL），我們可以通過onpopstate事件來監聽這兩個方法引起的URL變化。

路由相關方法

1.route()方法
在設定好路由規則之後，如果需要動態調整，可以調用Router.route()方法來動態添加路由規則及Action方法，例如：

router.route('topic/:pageno/:pagesize', 'page', function(pageno, pagesize){  // todo }); 我們調用route()方法時，給定的規則不僅僅可以是字串，也可以是一個Regex：router.route(/^topic/(.*?)/(.*?)$/, 'page', function(pageno, pagesize){  // todo }); 

2.navigate()方法
在前面的例子中，URL規則都是由我們手動輸入觸發的，在實際應用中，有時可能需要手動進行跳轉、導航，這時可以調用

Router.navigate()方法進行控制，例如：router.navigate('topic/1000', {  trigger: true }); 

這段代碼將URL更改為http://localhost/index.html#topic/1000，並觸發了renderDetail方法。需要注意的是，我們在第二個參數傳入了trigger配置，該配置用於表示更改URL的同時是否觸發相應的Action方法。

3.stop()方法
還記得我們是通過Backbone.history.start()方法來啟動路由監聽的，你也可以隨時調用Backbone.history.stop()方法來停止監聽，例如：

router.route('topic/:pageno/:pagesize', 'page', function(pageno, pagesize) {  Backbone.history.stop(); }); 

運行這段代碼，並訪問URL：http://localhost/index.html#topic/5/20，你會發現這個Action被執行之後，監聽已經不再生效了。