一，開篇分析
Hi，大家好！大熊君又和大家見面了，(*^__^*) 嘻嘻……，這系列文章主要是學習Html5相關的知識點，以學習API知識點為入口，由淺入深的引入實例，
讓大家一步一步的體會"h5"能夠做什么，以及在實際項目中如何去合理的運用達到使用自如，完美駕馭O(∩_∩)O~，好了，廢話不多說，直接進入今天的主題，
今天主要講的是對昨天文章中的代碼進行重構，並且相應的美化了一下前台UI界面，如下圖所示的效果：
哈哈哈酷吧！繼續讓咱們做個簡單的回顧：
為了提高Web頁面的響應速度，越來越多的開發者開始采用單頁面結構（single-page application）的解決方案。所謂的單頁面結構就是指多個頁面間切換時，不刷新當前整個頁面，更新頁面展示數據，並且相應地改變地址欄中的url，以使用戶可以分享這個url。
如果你使用chrome或者firefox等瀏覽器訪問"github.com、plus.google.com"等網站時，細心的你會發現頁面之間的點擊是通過ajax異步請求的，
同時頁面的URL發生了了改變。並且能夠很好的支持瀏覽器前進和后退。是什么有這么強大的功能呢？恩，這就會說到HTML5里引用了新的API：
“history.pushState”和“history.replaceState”
二者之間的重要區別------"window.history.replaceState"和"window.history.pushState"類似，不同之處在於replaceState不會在window.history里新增歷史記錄點，其效果類似於window.location.replace(url)，都是不會在歷史記錄點里新增一個記錄點的。當你為了響應用戶的某些操作，而要更新當前歷史記錄條目的狀態對象或URL時，使用replaceState()方法會特別合適。
（二），流程梳理
頁面首次載入，雖然我們訪問的URL是"http://localhost:8888/bbSPA.html"，但是，實際URL確是：
"http://localhost:8888/bbSPA.html#shanghai"，”history.replaceState“完成了初始化url切換工作，並且初始做了加載
"shanghai.data"的數據工作，鼠標點擊左邊的任意一個菜單項，右側內容是Ajax載入，並且頁面的URL隨之發生改變，例如，點擊北京。
此時，我們點擊地址欄的后退按鈕，又回到了上海，並且顯示內容。原理很簡單，就是通過監聽”window.onpopstate“，達到了自由切換的作用。
測試時注意事項：
測試需要搭建一個web服務器，以http://host/的形式去訪問才能生效，如果你在本地測試以file://這樣的方式在瀏覽器打開，就會出現如下的問題：
|
|
Uncaught SecurityError: A history state object with URL 'file:///C:/xxx/xxx/xxx/xxx.html' cannot be created in a document with origin 'null'.
|
因為你要pushState的url與當前頁面的url必須是同源的，而file://形式打開的頁面是沒有origin的，所以會報這個錯誤。
（三），重構一下昨天的代碼
說明幾點：
（1），昨天的代碼雖然功能是完成了，但是很松散需要通過類的方式進行有效的組織。
（2），Api要粒度化，各負其責，通過“init”初始化方式進項合理的組織。
（3），UI部分做了修改增強了體驗和視覺感。
（4），補充相關數據文件，例如：“beijing.data”，內容如下：
{
"content" : "Hi,這里是北京(*^__^*) 嘻嘻……)！"
}
好了！！！以下是完整代碼：
1，html源碼
1 <body> 2 <div class="hd">bbSPA測試頁面</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() ;
} ;
（四），最后總結
（1），理解History Api的使用方式以及具體實例中使用的目的是為了解決哪些問題。
（2），兩個核心Api的不同之處在哪。
（3），想想重構后與之前有什么優勢，以及是否可以進一步抽象出不同的類，比如“Router”,“History”。
（4），說幾句：編程是思想層面的事，實現方式很多，關鍵是看問題的深度與角度，好了不羅嗦了！！！明天繼續！
哈哈哈，本篇結束，未完待續，希望和大家多多交流夠溝通，共同進步。。。。。。呼呼呼……(*^__^*)