大熊君學習html5系列之------History API（SPA單頁應用的必備------重構完結版）

時間 2019-11-09

標籤學習 html5 html 系列 history api spa 單頁應用必備完結欄目 HTML5 简体版

原文原文鏈接

一，開篇分析javascript

Hi，你們好！大熊君又和你們見面了，(*^__^*) 嘻嘻……，這系列文章主要是學習Html5相關的知識點，以學習API知識點爲入口，由淺入深的引入實例，css

讓你們一步一步的體會"h5"可以作什麼，以及在實際項目中如何去合理的運用達到使用自如，完美駕馭O(∩_∩)O~，好了，廢話很少說，直接進入今天的主題，html

今天主要講的是對昨天文章中的代碼進行重構，而且相應的美化了一下前臺UI界面，以下圖所示的效果：java

　　哈哈哈酷吧！繼續讓我們作個簡單的回顧：git

　　爲了提升Web頁面的響應速度，愈來愈多的開發者開始採用單頁面結構（single-page application）的解決方案。所謂的單頁面結構就是指多個頁面間切換時，不刷新當前整個頁面，更新頁面展現數據，而且相應地改變地址欄中的url，以使用戶能夠分享這個url。github

　　若是你使用chrome或者firefox等瀏覽器訪問"github.com、plus.google.com"等網站時，細心的你會發現頁面之間的點擊是經過ajax異步請求的，web

同時頁面的URL發生了了改變。而且可以很好的支持瀏覽器前進和後退。是什麼有這麼強大的功能呢？恩，這就會說到HTML5裏引用了新的API：ajax

「history.pushState」和「history.replaceState」chrome

兩者之間的重要區別------"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），說幾句：編程是思想層面的事，實現方式不少，關鍵是看問題的深度與角度，好了不羅嗦了！！！明天繼續！

　　　　　　　　　　　　　　哈哈哈，本篇結束，未完待續，但願和你們多多交流夠溝通，共同進步。。。。。。呼呼呼……(*^__^*)　　　