大熊君学习html5系列之------History API（SPA单页应用的必备------重构完结版）
一，開(kāi)篇分析
Hi，大家好！大熊君又和大家見(jiàn)面了，(*^__^*) 嘻嘻……，這系列文章主要是學(xué)習(xí)Html5相關(guān)的知識(shí)點(diǎn)，以學(xué)習(xí)API知識(shí)點(diǎn)為入口，由淺入深的引入實(shí)例，
讓大家一步一步的體會(huì)"h5"能夠做什么，以及在實(shí)際項(xiàng)目中如何去合理的運(yùn)用達(dá)到使用自如，完美駕馭O(∩_∩)O~，好了，廢話(huà)不多說(shuō)，直接進(jìn)入今天的主題，
今天主要講的是對(duì)昨天文章中的代碼進(jìn)行重構(gòu)，并且相應(yīng)的美化了一下前臺(tái)UI界面，如下圖所示的效果：
?
哈哈哈酷吧！繼續(xù)讓咱們做個(gè)簡(jiǎn)單的回顧：
為了提高Web頁(yè)面的響應(yīng)速度，越來(lái)越多的開(kāi)發(fā)者開(kāi)始采用單頁(yè)面結(jié)構(gòu)（single-page application）的解決方案。所謂的單頁(yè)面結(jié)構(gòu)就是指多個(gè)頁(yè)面間切換時(shí)，不刷新當(dāng)前整個(gè)頁(yè)面，更新頁(yè)面展示數(shù)據(jù)，并且相應(yīng)地改變地址欄中的url，以使用戶(hù)可以分享這個(gè)url。
如果你使用chrome或者firefox等瀏覽器訪(fǎng)問(wèn)"github.com、plus.google.com"等網(wǎng)站時(shí)，細(xì)心的你會(huì)發(fā)現(xiàn)頁(yè)面之間的點(diǎn)擊是通過(guò)ajax異步請(qǐng)求的，
同時(shí)頁(yè)面的URL發(fā)生了了改變。并且能夠很好的支持瀏覽器前進(jìn)和后退。是什么有這么強(qiáng)大的功能呢？恩，這就會(huì)說(shuō)到HTML5里引用了新的API：
“history.pushState”和“history.replaceState”
二者之間的重要區(qū)別------"window.history.replaceState"和"window.history.pushState"類(lèi)似，不同之處在于replaceState不會(huì)在window.history里新增歷史記錄點(diǎn)，其效果類(lèi)似于window.location.replace(url)，都是不會(huì)在歷史記錄點(diǎn)里新增一個(gè)記錄點(diǎn)的。當(dāng)你為了響應(yīng)用戶(hù)的某些操作，而要更新當(dāng)前歷史記錄條目的狀態(tài)對(duì)象或URL時(shí)，使用replaceState()方法會(huì)特別合適。
?
（二），流程梳理
頁(yè)面首次載入，雖然我們?cè)L問(wèn)的URL是"http://localhost:8888/bbSPA.html"，但是，實(shí)際URL確是：
"http://localhost:8888/bbSPA.html#shanghai"，”history.replaceState“完成了初始化url切換工作，并且初始做了加載
"shanghai.data"的數(shù)據(jù)工作，鼠標(biāo)點(diǎn)擊左邊的任意一個(gè)菜單項(xiàng)，右側(cè)內(nèi)容是Ajax載入，并且頁(yè)面的URL隨之發(fā)生改變，例如，點(diǎn)擊北京。
此時(shí)，我們點(diǎn)擊地址欄的后退按鈕，又回到了上海，并且顯示內(nèi)容。原理很簡(jiǎn)單，就是通過(guò)監(jiān)聽(tīng)”window.onpopstate“，達(dá)到了自由切換的作用。
?
測(cè)試時(shí)注意事項(xiàng)：
測(cè)試需要搭建一個(gè)web服務(wù)器，以http://host/的形式去訪(fǎng)問(wèn)才能生效，如果你在本地測(cè)試以file://這樣的方式在瀏覽器打開(kāi)，就會(huì)出現(xiàn)如下的問(wèn)題：
| ? | Uncaught SecurityError: A history state object?with?URL?'file:///C:/xxx/xxx/xxx/xxx.html'?cannot be created?in?a document?with?origin?'null'. |
因?yàn)槟阋猵ushState的url與當(dāng)前頁(yè)面的url必須是同源的，而file://形式打開(kāi)的頁(yè)面是沒(méi)有origin的，所以會(huì)報(bào)這個(gè)錯(cuò)誤。
?
（三），重構(gòu)一下昨天的代碼
說(shuō)明幾點(diǎn)：
（1），昨天的代碼雖然功能是完成了，但是很松散需要通過(guò)類(lèi)的方式進(jìn)行有效的組織。
（2），Api要粒度化，各負(fù)其責(zé)，通過(guò)“init”初始化方式進(jìn)項(xiàng)合理的組織。
（3），UI部分做了修改增強(qiáng)了體驗(yàn)和視覺(jué)感。
（4），補(bǔ)充相關(guān)數(shù)據(jù)文件，例如：“beijing.data”，內(nèi)容如下：
{"content" : "Hi,這里是北京(*^__^*) 嘻嘻……)！" }
好了！！！以下是完整代碼：
1，html源碼
1 <body> 2 <div class="hd">bbSPA測(cè)試頁(yè)面</div> 3 <ul id="list" > 4 <li><a href="#beijing">北京</a></li> 5 <li><a href="#shanghai">上海</a></li> 6 <li><a href="#shenzhen">深圳</a></li> 7 <li><a href="#guangzhou">廣州</a></li> 8 <li><a href="#tianjin">天津</a></li> 9 </ul> 10 <div id="content-main"></div> 11 </body>
?
·2，css源碼
1 .hd { 2 height:60px; 3 line-height: 60px; 4 color:#f8f8f8; 5 font-family: "微軟雅黑" ; 6 font-size: 24px; 7 text-align: center; 8 background: #49b49b; 9 } 10 #list { 11 border-bottom:2px solid #49b49b; 12 height:32px; 13 width:520px; 14 list-style:none; 15 } 16 #list li { 17 padding:0px; 18 margin-left:10px; 19 width:84px; 20 height:32px; 21 float : left; 22 } 23 #list li a { 24 padding:0px; 25 width:84px; 26 height:32px; 27 line-height: 32px; 28 background: #49b49b; 29 color:#fff; 30 font-family: arial ; 31 font-size: 13px; 32 text-align: center; 33 display:block; 34 text-decoration:none; 35 } 36 #list li a:hover { 37 background: #019875; 38 } 39 #content-main { 40 width:556px; 41 height:220px; 42 border:2px solid #49b49b; 43 }
?
3，Js源碼
function bbSPA(elem){this.elem = elem ; } ; var bbSPAProto = bbSPA.prototype ; bbSPAProto.getElem = function(){return this.elem ; } ; bbSPAProto._getDefaultHash = function(){return window.location.hash ; } ; bbSPAProto._getCurrentHash = function(){return this.getElem().eq(1).attr("href") ; } ; bbSPAProto._parseHash = function(hash){return hash.split("#")[1] ; } ; bbSPAProto._fnPopStateHandler = function(target){var that = this ;var elem = target || null ;var query = this._getDefaultHash() ;if(!query){if(elem = this._getElemByIndex(1)){this._addToHistory(elem.attr("href"),true) ;this._fnPopStateHandler(elem) ;}}else{this.getElem().find("li a").each(function() {if (!elem && $(this).attr("href") == query){elem = $(this) ;}}) ;if(!elem){this._fnPopStateHandler(this._getElemByIndex(1)) ;}else{ elem.trigger("click") ;} } } ; bbSPAProto._showContent = function(action){var that = this ;this._loadContent(this._parseHash(action) + ".data").done(function(data){that._renderContent(data["content"]) ;that._addToHistory(action,false) ;}).fail(function(){throw new Error("load content error !") ;}) ; } ; bbSPAProto._loadContent = function(url){return $.ajax({url : url ,dataType : "json"}) ; } ; bbSPAProto._getElemByIndex = function(index){return this.getElem().find("li a").eq(index) ; } ; bbSPAProto._renderContent = function(text){this.getElem().next().text(text) ; } ; bbSPAProto._addToHistory = function(hash,noState){var stateObj = {hash : hash} ;if(noState){window.history.replaceState(stateObj,"",hash) ;}else{window.history.pushState(stateObj,"",hash) ;} } ; bbSPAProto._isSupportH5History = function(){return !!("pushState" in window.history) ; } ; bbSPAProto.init = function(){var that = this ;if(!this._isSupportH5History()){throw new Error("Not Support H5 History API !") ;}this.getElem().on("click","a",function(){that._showContent($(this).attr("href")) ;return false ;}) ;window.addEventListener("popstate",function(){that._fnPopStateHandler() ;},false) ;this._fnPopStateHandler() ; } ;
（四），最后總結(jié)
（1），理解History Api的使用方式以及具體實(shí)例中使用的目的是為了解決哪些問(wèn)題。
（2），兩個(gè)核心Api的不同之處在哪。
（3），想想重構(gòu)后與之前有什么優(yōu)勢(shì)，以及是否可以進(jìn)一步抽象出不同的類(lèi)，比如“Router”,“History”。
（4），說(shuō)幾句：編程是思想層面的事，實(shí)現(xiàn)方式很多，關(guān)鍵是看問(wèn)題的深度與角度，好了不羅嗦了！！！明天繼續(xù)！
?
?
哈哈哈，本篇結(jié)束，未完待續(xù)，希望和大家多多交流夠溝通，共同進(jìn)步。。。。。。呼呼呼……(*^__^*)
轉(zhuǎn)載于:https://www.cnblogs.com/bigbearbb/p/4261017.html
總結(jié)
以上是生活随笔為你收集整理的大熊君学习html5系列之------History API（SPA单页应用的必备------重构完结版）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 原 iOS面试题收集
- 下一篇： （转）【风宇冲】Unity3D教程宝典之