Router和History (路由控制)-backbone

 Router和History (路由控制)

　　Backbone.Router擔任了一部分Controller（控制器）的工做，它通常運行在單頁應用中，能將特定的URL或錨點規則綁定到一個指定的方法（後文中稱Action）。

　　當咱們開發一個單頁應用時，經常會遇到這樣兩個問題：

 

　　咱們在同一個頁面中經過用戶的操做來隱藏、顯示HTML塊，爲用戶提供一個無刷新、完整流暢的體驗，但用戶可能並不知道他當前正處於同一個頁面中，所以他但願經過瀏覽器的「前進」和「後退」按鈕來返回和前進到上一步操做。當他真正這樣操做時，會離開當前頁面，這顯然不是用戶所指望的。

 

　　另外一個問題是用戶在單頁應用中操做，當他讀到一篇好的文章，或看到一箇中意的商品時，他可能會將URL收藏起來或分享給本身的好友。但當他下一次從新打開這個連接地址，看到的倒是應用的初始化狀態，而並非當初那篇文章或那個商品。

 

　　Backbone.Router爲咱們提供瞭解決這兩個問題的方法，咱們先來看一個例子：

1. var AppRouter = Backbone.Router.extend({ routes : { renderList : function() { console.log('渲染列表方法'); }, renderDetail : function(id) { console.log('渲染詳情方法, id爲: ' + id); }, renderError : function(error) { console.log('URL錯誤, 錯誤信息: ' + error); } }); 

複製代碼

將例子中的代碼複製到你的頁面中。假設你的頁面地址爲http://localhost/index.html，請依次訪問下面的地址，並注意控制檯的輸出結果：

 

• http://localhost/index.html // 輸出：應用入口方法
• http://localhost/index.html#topic // 輸出：渲染列表方法
• http://localhost/index.html#topic/1023 // 輸出：渲染詳情方法, id爲:1023
• http://localhost/index.html#about // 輸出：URL錯誤, 錯誤信息: about
  

 

　　而後再使用瀏覽器的「前進」、「返回」等按鈕進行切換，你會看到當你的URL切換時，控制檯輸出了對應的結果，說明它已經調用了相應的方法。而在進行這些操時，頁面並無刷新。這個例子很好地解決了咱們在一開始所說的兩個問題。

 

10.1 路由規則設定

　　你可能常常據說「路由器」這個詞，但它經常是指一種網絡設備，這種設備是網絡鏈接、數據傳輸的導航和樞紐。而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方法。

10.2 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心跳的方式監聽。

10.3 pushState規則

　　Backbone.History還支持pushState方式的URL，pushState是HTML5提供的一種新特性，它能操做當前瀏覽器的URL（而不是僅僅改變錨點），同時不會致使頁面刷新，從而使單頁應用使用起來更像一套完整的流程。

 

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

 

• pushState()：該方法能夠將指定的URL添加一個新的history實體到瀏覽器歷史裏
• replaceState()：該方法能夠將當前的history實體替換爲指定的URL
  

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

 

　　值得注意的是，使用pushState特性時，須要在服務器端對URL規則進行配置，不然用戶在下一次訪問該地址時，可能沒法正確導航到當前頁面。另外低於如下版本的瀏覽器是不支持該特性的：Chrome 5，Firefox 4.0，IE 10，Opera 11.5，Safari 5.0

 

　　關於pushState規則這裏再也不深刻討論，若是須要了解，請參考我所註釋的Backbone源碼。

10.4 路由相關方法

　　route()方法

　　在設定好路由規則以後，若是須要動態調整，能夠調用Router.route()方法來動態添加路由規則及Action方法，例如：

 

1. router.route('topic/:pageno/:pagesize', 'page', function(pageno, pagesize){  
2.     // todo  
3. });  

複製代碼

咱們調用route()方法時，給定的規則不只僅能夠是字符串，也能夠是一個正則表達式：

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

複製代碼

　navigate()方法

　　在前面的例子中，URL規則都是由咱們手動輸入觸發的，在實際應用中，有時可能須要手動進行跳轉、導航，這時能夠調用Router.navigate()方法進行控制，例如：

 

1. router.navigate('topic/1000', {  
2.      trigger: true  
3. });

複製代碼

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

 

　　stop()方法

　　還記得咱們是經過Backbone.history.start()方法來啓動路由監聽的，你也能夠隨時調用Backbone.history.stop()方法來中止監聽

 

原文http://sun80264629.iteye.com/blog/1883204