認識 Backbone（三） : 什么是 Router

ShowerSun 發(fā)布于2019-08-22 11:28 / 414人閱讀

摘要：中的充當路由的作用，控制的走向，當在中使用標簽時生效。任一形式匹配的結(jié)果會以參數(shù)的形式傳遞到相關(guān)的函數(shù)中，第一種規(guī)則可能返回一個或多個參數(shù)，第二種規(guī)則將整個匹配結(jié)果作為一個參數(shù)返回。

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

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

動態(tài)路由選擇

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

匹配規(guī)則

Backbone 使用兩種形式的變量來設置 Router 的匹配規(guī)則。第一種是 :，它可以匹配 URL 中斜杠之間的任意參數(shù)，另一種是 *，它用來匹配斜杠后面的所有部分。注意，由于第二種形式的模糊性大于第一種，所以它的匹配優(yōu)先級最低。
任一形式匹配的結(jié)果會以參數(shù)的形式傳遞到相關(guān)的函數(shù)中，第一種規(guī)則可能返回一個或多個參數(shù)，第二種規(guī)則將整個匹配結(jié)果作為一個參數(shù)返回。
接下來，我們用實例來說明：

routes:{

    "posts/:id": "getPost",
    // Example

    "download/*path": "downloadFile",
    // Download

    ":route/:action": "loadView",
    // Load Route/Action View

},

app_router.on("route:getPost", function( id ){ 
    alert(id); // 匹配后，傳遞過來的參數(shù)為 12
});
app_router.on("route:downloadFile", function( path ){ 
    alert(path); // 匹配后，整個匹配結(jié)果作為一個參數(shù)返回，路徑為 user/images/hey.gif 
});
app_router.on("route:loadView", function( route, action ){ 
    alert(route + "_" + action); // 匹配后，傳遞過來兩個參數(shù)，此時會彈出 dashboard_graph 
});

參考

http://backbonetutorials.com/what-is-a-router/#/posts/120