使用backbone的history管理SPA應(yīng)用的url
本文介紹如何使用backbone的history模塊實(shí)現(xiàn)SPA應(yīng)用里面的URL管理。SPA應(yīng)用的核心在于使用無刷新的方式更改url，從而引發(fā)頁面內(nèi)容的改變。從實(shí)現(xiàn)上來看，url的管理和頁面內(nèi)容的管理是其中的兩個(gè)難點(diǎn)。就url的管理而言，主要有以下三方面的要求：
1）對(duì)于要采用單頁跳轉(zhuǎn)的鏈接，不能有頁面刷新；
2）瀏覽器的前進(jìn)和后退，都能像多頁應(yīng)用那樣，顯示之前訪問地址對(duì)應(yīng)的內(nèi)容；
3）應(yīng)用處于任何一個(gè)單頁鏈接地址時(shí)，當(dāng)用戶刷新，依然能初始化顯示該地址對(duì)應(yīng)的內(nèi)容。
假如要自己來實(shí)現(xiàn)一個(gè)能夠滿足以上三方面要求的功能，思路有2種。
第一種是利用錨點(diǎn)鏈接及hashchange，將所有單頁鏈接地址全部配置成錨點(diǎn)鏈接的形式，然后在hashchange事件里面，根據(jù)頁面當(dāng)前的錨點(diǎn)值，執(zhí)行不同的回調(diào)函數(shù)，用于更改頁面內(nèi)容。這個(gè)思路在上一篇博客中《理解瀏覽器歷史記錄（2）-hashchange、pushState》給出了一個(gè)簡單的實(shí)現(xiàn)（demo），代碼雖然比較簡陋，但是也說明思路是可行的。
第二種是利用pushState，詳細(xì)步驟如下：
1）在點(diǎn)擊鏈接的時(shí)候，如果這個(gè)鏈接是單頁形式的鏈接，可通過pushState或者replaceState的方式來改變url；由于pushState跟replaceState并不會(huì)觸發(fā)popstate事件，所以在必要的條件下，還得在調(diào)用完pushState和replaceState調(diào)用完后，手動(dòng)調(diào)用相應(yīng)的回調(diào)函數(shù)；
2）監(jiān)聽瀏覽器的popstate事件，這樣就能響應(yīng)瀏覽器前進(jìn)后退的操作，然后根據(jù)操作后的頁面地址找到對(duì)應(yīng)的回調(diào)函數(shù)執(zhí)行；
3）頁面初始化時(shí)，直接根據(jù)當(dāng)前地址執(zhí)行對(duì)應(yīng)的回調(diào)函數(shù)即可。
上次也沒有給出簡單使用pushState實(shí)現(xiàn)SPA的例子，這次補(bǔ)上，功能與hashchange那個(gè)類似，就是寫法稍微有點(diǎn)不同而已。demo地址（不可測刷新操作，如果使用pushState，單頁地址刷新會(huì)報(bào)404，需在后臺(tái)處理才能解決，此處畢竟只是個(gè)靜態(tài)頁）：
http://liuyunzhuge.github.io/blog/pushState/demo7.html
