使用backbone的history管理SPA應(yīng)用的url

本文介紹如何使用backbone的history模塊實(shí)現(xiàn)SPA應(yīng)用里面的URL管理。SPA應(yīng)用的核心在于使用無(wú)刷新的方式更改url,從而引發(fā)頁(yè)面內(nèi)容的改變。從實(shí)現(xiàn)上來(lái)看,url的管理和頁(yè)面內(nèi)容的管理是其中的兩個(gè)難點(diǎn)。就url的管理而言,主要有以下三方面的要求:

1)對(duì)于要采用單頁(yè)跳轉(zhuǎn)的鏈接,不能有頁(yè)面刷新; 
2)瀏覽器的前進(jìn)和后退,都能像多頁(yè)應(yīng)用那樣,顯示之前訪(fǎng)問(wèn)地址對(duì)應(yīng)的內(nèi)容; 
3)應(yīng)用處于任何一個(gè)單頁(yè)鏈接地址時(shí),當(dāng)用戶(hù)刷新,依然能初始化顯示該地址對(duì)應(yīng)的內(nèi)容。

假如要自己來(lái)實(shí)現(xiàn)一個(gè)能夠滿(mǎn)足以上三方面要求的功能,思路有2種。

第一種是利用錨點(diǎn)鏈接及hashchange,將所有單頁(yè)鏈接地址全部配置成錨點(diǎn)鏈接的形式,然后在hashchange事件里面,根據(jù)頁(yè)面當(dāng)前的錨點(diǎn)值,執(zhí)行不同的回調(diào)函數(shù),用于更改頁(yè)面內(nèi)容。這個(gè)思路在上一篇博客中《理解瀏覽器歷史記錄(2)-hashchange、pushState》給出了一個(gè)簡(jiǎn)單的實(shí)現(xiàn)(demo),代碼雖然比較簡(jiǎn)陋,但是也說(shuō)明思路是可行的。

第二種是利用pushState,詳細(xì)步驟如下:

1)在點(diǎn)擊鏈接的時(shí)候,如果這個(gè)鏈接是單頁(yè)形式的鏈接,可通過(guò)pushState或者replaceState的方式來(lái)改變url;由于pushState跟replaceState并不會(huì)觸發(fā)popstate事件,所以在必要的條件下,還得在調(diào)用完pushState和replaceState調(diào)用完后,手動(dòng)調(diào)用相應(yīng)的回調(diào)函數(shù); 
2)監(jiān)聽(tīng)瀏覽器的popstate事件,這樣就能響應(yīng)瀏覽器前進(jìn)后退的操作,然后根據(jù)操作后的頁(yè)面地址找到對(duì)應(yīng)的回調(diào)函數(shù)執(zhí)行; 
3)頁(yè)面初始化時(shí),直接根據(jù)當(dāng)前地址執(zhí)行對(duì)應(yīng)的回調(diào)函數(shù)即可。

上次也沒(méi)有給出簡(jiǎn)單使用pushState實(shí)現(xiàn)SPA的例子,這次補(bǔ)上,功能與hashchange那個(gè)類(lèi)似,就是寫(xiě)法稍微有點(diǎn)不同而已。demo地址(不可測(cè)刷新操作,如果使用pushState,單頁(yè)地址刷新會(huì)報(bào)404,需在后臺(tái)處理才能解決,此處畢竟只是個(gè)靜態(tài)頁(yè)):

http://liuyunzhuge.github.io/blog/pushState/demo7.html

網(wǎng)友評(píng)論