spa的意義及原理
-
設計意義
a、 前後端分離
b、減輕服務器壓力
c、增強用戶體驗
d、Prerender預渲染優化SEO
-
工作原理
- History API 優雅
-
pushState
history.pushState(**stateObject**, title, url);history.pushState()主要是在不刷新瀏覽器的情況下，創建新的瀏覽記錄並插入瀏覽記錄隊列中。
-
狀態對象（stateObject）–stateObject是一個JavaScript對象，通過pushState方法可以將stateObject內容傳遞到新頁面中。
-
標題（title）–幾乎沒有瀏覽器支持該參數，但是傳一個空字符串會比較安全。
-
地址（url）–新的歷史記錄條目的地址（可選，不指定的話則爲文檔當前URL）；瀏覽器在調用pushState()方法後不會加載該地址；傳入的URL與當前URL應該是同源的，否則，pushState()會拋出異常。
-
-
onpopstate事件
window.onpopstate = function(event) { alert("location: " + document.location + ", state: " + JSON.stringify(event.state)); };onpopstate事件，點擊後退按鈕(或者在JavaScript中調用
history.back()方法)時觸發；
- Hash 不優雅、兼容性好
1. #含義
#代表網頁中的一個位置。右面的自負就是代表的位置信息：如:
http://localhost：8080/cbuild/index.html#one 2. window.location.hash讀取#值
window.location.hash這個屬性可讀可寫。讀取時，可以用來判斷網頁狀態是否改變；寫入時，則會在不重載網頁的前提下，創造一條訪問歷史記錄。
3. onhashchange事件
這是一個HTML5新增的事件，當#值發生變化時，就會觸發這個事件。 使用方法如下:
window.onhashchange = func;
<body onhashchange="func();">
window.addEventListener("hashchange",func, false);
