使用backbone的history管理SPA應用的url
本文介紹如何使用backbone的history模塊實現(xiàn)SPA應用里面的URL管理。SPA應用的核心在于使用無刷新的方式更改url，從而引發(fā)頁面內(nèi)容的改變。從實現(xiàn)上來看，url的管理和頁面內(nèi)容的管理是其中的兩個難點。就url的管理而言，主要有以下三方面的要求：
1）對于要采用單頁跳轉(zhuǎn)的鏈接，不能有頁面刷新；
2）瀏覽器的前進和后退，都能像多頁應用那樣，顯示之前訪問地址對應的內(nèi)容；
3）應用處于任何一個單頁鏈接地址時，當用戶刷新，依然能初始化顯示該地址對應的內(nèi)容。
假如要自己來實現(xiàn)一個能夠滿足以上三方面要求的功能，思路有2種。
第一種是利用錨點鏈接及hashchange，將所有單頁鏈接地址全部配置成錨點鏈接的形式，然后在hashchange事件里面，根據(jù)頁面當前的錨點值，執(zhí)行不同的回調(diào)函數(shù)，用于更改頁面內(nèi)容。這個思路在上一篇博客中《理解瀏覽器歷史記錄（2）-hashchange、pushState》給出了一個簡單的實現(xiàn)（demo），代碼雖然比較簡陋，但是也說明思路是可行的。
第二種是利用pushState，詳細步驟如下：
1）在點擊鏈接的時候，如果這個鏈接是單頁形式的鏈接，可通過pushState或者replaceState的方式來改變url；由于pushState跟replaceState并不會觸發(fā)popstate事件，所以在必要的條件下，還得在調(diào)用完pushState和replaceState調(diào)用完后，手動調(diào)用相應的回調(diào)函數(shù)；
2）監(jiān)聽瀏覽器的popstate事件，這樣就能響應瀏覽器前進后退的操作，然后根據(jù)操作后的頁面地址找到對應的回調(diào)函數(shù)執(zhí)行；
3）頁面初始化時，直接根據(jù)當前地址執(zhí)行對應的回調(diào)函數(shù)即可。
上次也沒有給出簡單使用pushState實現(xiàn)SPA的例子，這次補上，功能與hashchange那個類似，就是寫法稍微有點不同而已。demo地址（不可測刷新操作，如果使用pushState，單頁地址刷新會報404，需在后臺處理才能解決，此處畢竟只是個靜態(tài)頁）：
http://liuyunzhuge.github.io/blog/pushState/demo7.html
延伸閱讀
- ssh框架 2016-09-30
- 阿里移動安全 [無線安全]玩轉(zhuǎn)無線電——不安全的藍牙鎖 2017-07-26
- 消息隊列NetMQ 原理分析4-Socket、Session、Option和Pipe 2024-03-26
- Selective Search for Object Recognition 論文筆記【圖片目標分割】 2017-07-26
- 詞向量-LRWE模型-更好地識別反義詞同義詞 2017-07-26
- 從棧不平衡問題 理解 calling convention 2017-07-26
- php imagemagick 處理 圖片剪切、壓縮、合并、插入文本、背景色透明 2017-07-26
- Swift實現(xiàn)JSON轉(zhuǎn)Model - HandyJSON使用講解 2017-07-26
- 阿里移動安全 Android端惡意鎖屏勒索應用分析 2017-07-26
- 集合結(jié)合數(shù)據(jù)結(jié)構來看看(二) 2017-07-26
學習是年輕人改變自己的最好方式