林大媽的JavaScript進階知識（三）：HTML5 History API
HTML5中新增了History API，它用於管理瀏覽器路由跳轉的一個url棧。History是window物件的一部分，它也是一個物件，因此稱它是BOM（類似DOM，Browser Object Model）中的一份子。History物件包含了使用者在瀏覽器端訪問過的所有url。
一、為什麼存在History物件
當使用location.herf或a標籤中的非錨點方式的href進行頁面跳轉時，會造成整個頁面的重新整理。但目前來說，越來越多的單頁應用利用ajax技術進行非同步請求，僅僅依靠資料變化更改檢視而不重新整理頁面，像瀏覽器的前進和後退這些按鈕的功能定位就會變得十分尷尬。例如我們訪問一個部落格頁，在列表中點選某個部落格跳轉到文章頁面，但文章是利用ajax技術載入的，也就是頁面的url沒有發生變化。此時我覺得這篇部落格很有教育意義，於是將它分享給了我的朋友，如果不對路由進行處理，我的朋友點選這個url開啟的頁面將是部落格列表而不是這篇被分享的部落格。因此我們需要得到History物件的幫助。同時，History物件本被設計以表示與操作瀏覽器的訪問歷史，但由於隱私原因，它被封裝好不能使用指令碼訪問其中的url，而只允許我們使用暴露出的幾個方法：go()、back()和forward()來進行跳轉。
二、History相關方法
我們已經介紹了History中存在的部分內容以及它為什麼要誕生。然後我們就要關注怎麼使用它。我們首先要了解它的內建方法：
1. back()，forward()和go(n)方法
這三個方法的使用非常的直觀，如它們字面的意思一樣，就是直接呼叫history.back()和history.forward()，還有history.go(n)。其中go方法中填入引數為希望跳轉到多少個頁面以前/以後，填入正數n相當於迴圈呼叫n次forward，負數-n相當於迴圈呼叫n次back。假如我先後訪問了
① www.baidu.com，
② www.google.com，
③ www.cnblogs.com（現在頁面在此處）：
當我在瀏覽器除錯工具中這樣呼叫：
1 history.back(); 2 //跳轉到谷歌首頁 3 history.forward(); 4 //跳轉到部落格園首頁 5 history.go(-2); 6 //跳轉到百度首頁 7 history.go(2); 8 //跳轉到部落格園首頁
2. pushState(stateData, title, url)，replaceState(stateData, title, url)
這兩個方法也是單頁面應用實現的實質之一，它們均不會造成頁面的重新整理，且都不能跨域。而它們的功能可以從名字中看出，分別是在history棧中建立新的訪問記錄和修改當前的訪問記錄。需要注意的是，pushState會將當前url往後的記錄清除，再將新的url記錄壓入history棧中。
3. location.href
這個location物件中的屬性會直接導致重新整理頁面，需要與以上的兩個方法進行區分。
4. window.onpopstate，window.onhashchange
這兩個全域性方法被建立用以監聽訪問的變化。它們的區別是，一個只有在頁面發生重新整理的情況下呼叫；一個在url的錨點（由於“#”後面的內容不會被識別，修改它頁面不會發生跳轉，因此稱為錨點）變化時就會呼叫。
三、以圖詳解變化
上圖簡單介紹了History API中各方法呼叫時url跳轉及頁面顯示情況。其中橙色表示當前頁面顯示的內容。
總結：由於Ajax技術的出現，單頁面應用的興起，現代的Web技術中需要有正確管理排程路由的工具，History API於是誕生。現代的前端框架中也同樣配備了以History封裝的路由管理工具，如，Vue-router，React-router-DOM等。通過了解History中go、pushState以及replaceState方法，我們可以進一步學習框架內部的實現原理。只有懂得原理才能觸類旁