Hash規(guī)則

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

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

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

規(guī)則中的*（星號）會在Router內(nèi)部被轉(zhuǎn)換為表達式(.*?)，表示零個或多個任意字符，與:（冒號）規(guī)則相比，*（星號）沒有/（斜線）分隔的限制，就像我們在上面的例子中定義的*error規(guī)則一樣。

Router中的*（星號）規(guī)則在被轉(zhuǎn)換為正則表達式后使用非貪婪模式，因此你可以使用例如這樣的組合規(guī)則：*type/:id，它能匹配#hot/1023，同時會將hot和1023作為參數(shù)傳遞給Action方法。
上面介紹了規(guī)則的定義方式，這些規(guī)則都會對應(yīng)一個Action方法名稱，該方法必須處于Router對象中。

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

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

要使用pushState特性，你需要先了解HTML5為該特性提供的一些方法和事件（這些方法都被定義在window.history對象中）：
1.pushState()：該方法可以將指定的URL添加一個新的history實體到瀏覽器歷史里

2.replaceState()：該方法可以將當(dāng)前的history實體替換為指定的URL
調(diào)用pushState()和replaceState()方法，僅僅是替換當(dāng)前頁面的URL，而并不會真正轉(zhuǎn)到這個URL地址（當(dāng)使用后退或前進按鈕時，也不會跳轉(zhuǎn)到該URL），我們可以通過onpopstate事件來監(jiān)聽這兩個方法引起的URL變化。
路由相關(guān)方法
1.route()方法

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





2.navigate()方法

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



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

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





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




聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com