全面解析JavaScript的Backbone.js框架中的Router路由-js教程-PHP中文網

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(&#39;route:defaultRoute&#39;, 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(&#39;route:getPost&#39;, function (id) {
  // 注意，参数通过这里进行传递
  alert( "Get post number " + id ); 
 });
 app_router.on(&#39;route:defaultRoute&#39;, 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="http://example.com/#/download/user/images/hey.gif">Download</a>
 
 ":route/:action": "loadView",
 // <a href="http://example.com/#/dashboard/graph">Load Route/Action View</a>
 
},
 
app_router.on(&#39;route:getPost&#39;, function( id ){ 
 alert(id); // 匹配后，传递过来的参数为 12
});
app_router.on(&#39;route:downloadFile&#39;, function( path ){ 
 alert(path); // 匹配后，整个匹配结果作为一个参数返回，路径为 user/images/hey.gif 
});
app_router.on(&#39;route:loadView&#39;, 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中的*（星號）規則會在轉換為正規表示式後使用非貪婪模式，因此你可以使用例如這樣的組合規則：*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(&#39;topic/:pageno/:pagesize&#39;, &#39;page&#39;, function(pageno, pagesize){ 
 // todo 
}); 
我们调用route()方法时，给定的规则不仅仅可以是字符串，也可以是一个正则表达式：
router.route(/^topic/(.*?)/(.*?)$/, &#39;page&#39;, function(pageno, pagesize){ 
 // todo 
});

登入後複製

2.navigate()方法
在前面的例子中，URL规则都是由我们手动输入触发的，在实际应用中，有时可能需要手动进行跳转、导航，这时可以调用

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

登入後複製

这段代码将URL更改为http://localhost/index.html#topic/1000，并触发了renderDetail方法。需要注意的是，我们在第二个参数传入了trigger配置，该配置用于表示更改URL的同时是否触发相应的Action方法。

3.stop()方法
还记得我们是通过Backbone.history.start()方法来启动路由监听的，你也可以随时调用Backbone.history.stop()方法来停止监听，例如：

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

登入後複製

运行这段代码，并访问URL：http://localhost/index.html#topic/5/20，你会发现这个Action被执行之后，监听已经不再生效了。

更多全面解析JavaScript的Backbone.js框架中的Router路由相关文章请关注PHP中文网！