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

時間 2019-12-08

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

原文原文鏈接

一，開篇分析javascript

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

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

今天主要講的是「History API」及在單頁應用中的做用，而且會引入一個實際的例子作爲講解的原型範例，先來看看「History API」：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」，就是經過這個接口作到無刷新改變頁面URL的。先來看看"history"接口的詳細方法：chrome

1 interface History {
2   readonly attribute long length;
3   readonly attribute any state;
4   void go(optional long delta);
5   void back();
6   void forward();
7   void pushState(any data, DOMString title, optional DOMString? url = null);
8   void replaceState(any data, DOMString title, optional DOMString? url = null);
9 };

（二），重點API說明json

　　在這裏說明一點："window.history.replaceState"和"window.history.pushState"相似，不一樣之處在於replaceState不會在window.history裏新增歷史記錄點，其效果相似於window.location.replace(url)，都是不會在歷史記錄點裏新增一個記錄點的。當你爲了響應用戶的某些操做，而要更新當前歷史記錄條目的狀態對象或URL時，使用replaceState()方法會特別合適。瀏覽器

（三），引入實例

　　今天說說單頁應用中咱們一般會這樣作，有一個菜單列表，點擊相關菜單項而後動態加載相關模塊，全部方式都是基於異步請求的，美中不足是，咱們會發現地址欄不會有任何變化，以及瀏覽器中的前進和後退操做也不會有任何響應，這對用戶不是很友好，因此爲了解決這個問題「History」就有用武之地了，那麼如何作到的那？不急先看一下例子中的效果圖展現，而後一步步分析,以下所示：

　　如下是監測數據，相同的url再次刷新不會重複請求。

　　咱們梳理一下流程：

　　　　頁面首次載入，雖然咱們訪問的URL是"http://localhost:8888/bbSPA.html"，可是，實際URL確是：

"http://localhost:8888/bbSPA.html#shanghai"，」history.replaceState「完成了初始化url切換工做，而且初始作了加載

"shanghai.data"的數據工做，鼠標點擊左邊的任意一個菜單項，右側內容是Ajax載入，而且頁面的URL隨之發生改變，例如，點擊北京。

此時，咱們點擊地址欄的後退按鈕，又回到了上海，而且顯示內容。原理很簡單，就是經過監聽」window.onpopstate「，達到了自由切換的做用。

好了！其實很簡單你們也嘗試本身實踐一下，如下是完整代碼：

　　（1），html部分代碼　　

 1 <body>    
 2     <center>
 3         <Strong>bbSPA測試頁面</strong>
 4     </center>
 5     <hr>
 6     <ul 
 7         id="list" 
 8         style="float:left;
 9         list-style:none;"
10     >
11         <li><a href="#beijing">北京</a></li>
12         <li><a href="#shanghai">上海</a></li>
13         <li><a href="#shenzhen">深圳</a></li>
14         <li><a href="#guangzhou">廣州</a></li>
15         <li><a href="#tianjin">天津</a></li>
16     </ul>
17     <div 
18         id="content-main" 
19         style="margin-left:50px;
20         float:left;
21         width:220px;
22         border:1px solid #ccc;
23         height:120px;
24         color:#ff3300;"
25     >
26     </div>
27 </body>

（2），Js部分代碼

$(function(){
	_init() ;
}) ;
var _history = [] ; // 記錄hash的活動數據容器
function _init(){
	var root = $("#list") ;
	var defaultHash = root.find("li a").eq(1).attr("href") ;
	var currentHash = window.location.hash ;
	_addToHistory(defaultHash,true) ;
	if(currentHash && currentHash != defaultHash){
		_showContent((currentHash.split("#")[1])) ;
	}
	else{
		_showContent((defaultHash.split("#")[1])) ;
	}
	$("#list").on("click","a",function(e){
		var action = ($(this).attr("href").split("#")[1]) ;
		_showContent(action) ;
		e.preventDefault() ;
	}) ;
	window.addEventListener("popstate",function(e){
		if(e.state && e.state.hash){
			var hash = e.state.hash ;
			if(_history[1] && hash === _history[1].hash){//存在歷史記錄，證實是後退事件
				_showContent(hash.split("#")[1].toLowerCase()) ;
			}else{ // 其它認爲是非法後退或者前進
				return ;
			}
		}
		else{
			return ;
		}
	},false) ;
} ;
function _showContent(action){
	var samePage = _history[0]["hash"] == "#" + action ;
	if(samePage){ // 同頁面,則不從新加載
		return ;
	}
	_loadContent(action + ".data").done(function(data){
		_renderContent(data["content"]) ;
		_addToHistory("#" + action,samePage) ;
	}).fail(function(){
		throw new Error("load content error !") ;
	}) ;	
} ;
function _loadContent(url){
	return $.ajax({
		url : url ,
		dataType : "json"
	}) ;
} ;
function _renderContent(text){
	$("#content-main").text(text) ;
} ;
function _addToHistory(hash,noState){
	var obj = {
		hash : hash
	} ;
	if(noState){
		_history.shift(obj) ;
		window.history.replaceState(obj,"",hash) ;
	}
	else{
		 window.history.pushState(obj,"",hash) ;
	}
	 _history.unshift(obj) ;
} ;

（四），最後總結

　　（1），理解History Api的使用方式以及具體實例中使用的目的是爲了解決哪些問題。

　　（2），兩個核心Api的不一樣之處在哪。

　　（3），測試本例子的注意事項以下。

　　測試須要搭建一個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的，因此會報這個錯誤。

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。