摘要：?jiǎn)雾?yè)應(yīng)用的原理從早起的根據(jù)的變化，到根據(jù)的的變化，實(shí)現(xiàn)無(wú)刷新條件下的頁(yè)面重新渲染。那么在單頁(yè)應(yīng)用中是如何監(jiān)聽(tīng)的變化呢，本文將總結(jié)一下，如何在單頁(yè)頁(yè)面中優(yōu)雅的監(jiān)聽(tīng)的變化。在下幾章中，重點(diǎn)介紹一下如何監(jiān)聽(tīng)的改變。

??單頁(yè)應(yīng)用的原理從早起的根據(jù)url的hash變化，到根據(jù)H5的history的變化，實(shí)現(xiàn)無(wú)刷新條件下的頁(yè)面重新渲染。那么在單頁(yè)應(yīng)用中是如何監(jiān)聽(tīng)url的變化呢，本文將總結(jié)一下，如何在單頁(yè)頁(yè)面中優(yōu)雅的監(jiān)聽(tīng)url的變化。

單頁(yè)應(yīng)用原理
監(jiān)聽(tīng)url中的hash變化
監(jiān)聽(tīng)通過(guò)history來(lái)改變url的事件
replaceState和pushState行為的監(jiān)聽(tīng)

原文在我的博客中：https://github.com/forthealll...

歡迎star

??單頁(yè)應(yīng)用的原理，在我們的上一篇文章中React-Router源碼閱讀已經(jīng)講的很詳細(xì)，這里做一個(gè)簡(jiǎn)單介紹。單頁(yè)應(yīng)用使得頁(yè)面可以在無(wú)刷新的條件下重新渲染，通過(guò)hash或者h(yuǎn)tml5 Bom對(duì)象中的history可以做到改變url，但是不刷新頁(yè)面。

??早期的前端路由是通過(guò)hash來(lái)實(shí)現(xiàn)的：

??改變url的hash值是不會(huì)刷新頁(yè)面的。

??因此可以通過(guò)hash來(lái)實(shí)現(xiàn)前端路由，從而實(shí)現(xiàn)無(wú)刷新的效果。hash屬性位于location對(duì)象中，在當(dāng)前頁(yè)面中，可以通過(guò)：

window.location.hash="edit"

來(lái)實(shí)現(xiàn)改變當(dāng)前url的hash值。執(zhí)行上述的hash賦值后，頁(yè)面的url發(fā)生改變。

賦值前：http://localhost:3000
賦值后：http://localhost:3000/#edit

在url中多了以#結(jié)尾的hash值，但是賦值前后雖然頁(yè)面的hash值改變導(dǎo)致頁(yè)面完整的url發(fā)生了改變，但是頁(yè)面是不會(huì)刷新的。

此外，除了可以通過(guò)window.location.hash來(lái)改變當(dāng)前頁(yè)面的hash值外，還可以通過(guò)html的a標(biāo)簽來(lái)實(shí)現(xiàn)：

edit

??HTML5的History接口，History對(duì)象是一個(gè)底層接口，不繼承于任何的接口。History接口允許我們操作瀏覽器會(huì)話歷史記錄。

History提供了一些屬性和方法。

History的屬性：

History.length: 返回在會(huì)話歷史中有多少條記錄，包含了當(dāng)前會(huì)話頁(yè)面。此外如果打開(kāi)一個(gè)新的Tab，那么這個(gè)length的值為1

History.state:

保存了會(huì)出發(fā)popState事件的方法，所傳遞過(guò)來(lái)的屬性對(duì)象（后面會(huì)在pushState和replaceState方法中詳細(xì)的介紹）

History方法：

History.back(): 返回瀏覽器會(huì)話歷史中的上一頁(yè)，跟瀏覽器的回退按鈕功能相同

History.forward():指向?yàn)g覽器會(huì)話歷史中的下一頁(yè)，跟瀏覽器的前進(jìn)按鈕相同

History.go(): 可以跳轉(zhuǎn)到瀏覽器會(huì)話歷史中的指定的某一個(gè)記錄頁(yè)

History.pushState():pushState可以將給定的數(shù)據(jù)壓入到瀏覽器會(huì)話歷史棧中，該方法接收3個(gè)參數(shù)，對(duì)象，title和一串url。pushState后會(huì)改變當(dāng)前頁(yè)面url，但是不會(huì)伴隨著刷新

History.replaceState():replaceState將當(dāng)前的會(huì)話頁(yè)面的url替換成指定的數(shù)據(jù)，replaceState后也會(huì)改變當(dāng)前頁(yè)面的url，但是也不會(huì)刷新頁(yè)面。

上面的方法中，pushState和repalce的相同點(diǎn)：

就是都會(huì)改變當(dāng)前頁(yè)面顯示的url，但都不會(huì)刷新頁(yè)面。

不同點(diǎn)：

pushState是壓入瀏覽器的會(huì)話歷史棧中，會(huì)使得History.length加1，而replaceState是替換當(dāng)前的這條會(huì)話歷史，因此不會(huì)增加History.length.

??通過(guò)改變hash值，或者h(yuǎn)istory的repalceState和pushState都可以實(shí)現(xiàn)無(wú)刷新的改變url。這樣還留有一個(gè)問(wèn)題需要解決：

??如何監(jiān)聽(tīng)url的改變

??因?yàn)槲覀儾粌H要無(wú)刷新的改變url，還要監(jiān)聽(tīng)到這個(gè)url改變的行為，根據(jù)該行為去重新渲染視圖。在下幾章中，重點(diǎn)介紹一下如何監(jiān)聽(tīng)url的改變。

??通過(guò)hash改變了url，會(huì)觸發(fā)hashchange事件，只要監(jiān)聽(tīng)hashchange事件，就能捕獲到通過(guò)hash改變url的行為。

window.onhashchange=function(event){
  console.log(event);
}
//或者
window.addEventListener("hashchange",function(event){
   console.log(event);
})

當(dāng)hash值改變時(shí)，輸出一個(gè)HashChangeEvent。該HashChangeEvent的具體值為：

{isTrusted: true, oldURL: "http://localhost:3000/", newURL:   "http://localhost:3000/#teg", type: "hashchange".....}

有了監(jiān)聽(tīng)事件，且改變hash頁(yè)面不刷新，這樣我們就可以在監(jiān)聽(tīng)事件的回調(diào)函數(shù)中，執(zhí)行我們展示和隱藏不同UI顯示的功能，從而實(shí)現(xiàn)前端路由。

在上一章講到了通過(guò)History改變url有以下幾種方法：History.back()、History.forward()、History.go()、History.pushState()和History.replaceState()。

同時(shí)在history中還支持一個(gè)事件，該事件為popstate。第一想法就是如果popstate能夠監(jiān)聽(tīng)所有的history方法所導(dǎo)致的url變化，那么就大功告成了。遺憾的是：

History.back()、History.forward()、History.go()事件是會(huì)觸發(fā)popstate事件的，但是History.pushState()和History.replaceState()不會(huì)觸發(fā)popstate事件。

如果是History.back(),History.forward()、History.go()那么會(huì)觸發(fā)popstate事件，我們只需要：

window.addEventListener("popstate", function(event) {
     console.log(event);
})

就可以監(jiān)聽(tīng)到相應(yīng)的行為，手動(dòng)調(diào)用：

window.history.go();
window.history.back();
window.history.forward();

都會(huì)觸發(fā)這個(gè)事件，此外，在瀏覽器中點(diǎn)擊后退和前進(jìn)按鈕也會(huì)觸發(fā)popstate事件，這個(gè)事件內(nèi)容為：

PopStateEvent?{isTrusted: true, state: null, type: "popstate", target: Window, currentTarget: Window,?…}

但是，History.pushState()和History.replaceState()不會(huì)觸發(fā)popstate事件，舉例來(lái)說(shuō)：

window.addEventListener("popstate", function(event) {
     console.log(event);
})
window.history.pushState({first:"first"}, "page 2", "/first"})

上述例子中不會(huì)有任何的輸出，因?yàn)椴](méi)有監(jiān)聽(tīng)的popstate事件的發(fā)生。

但是History.go和History.back()等，雖然可以觸發(fā)popstate事件，但是都會(huì)刷新頁(yè)面，我們?cè)趩雾?yè)應(yīng)用中使用的是replaceState和pushState，因此這里還有一個(gè)等待解決的問(wèn)題：

如何監(jiān)聽(tīng)replaceState和pushState行為

??在上面的例子中我們發(fā)現(xiàn)History.replaceState和pushState確實(shí)不會(huì)觸發(fā)popstate事件，那么如何監(jiān)聽(tīng)這兩個(gè)行為呢。可以通過(guò)在方法里面主動(dòng)的去觸發(fā)popState事件。另一種就是在方法中創(chuàng)建一個(gè)新的全局事件。

具體做法為：

var _wr = function(type) {
   var orig = history[type];
   return function() {
       var rv = orig.apply(this, arguments);
      var e = new Event(type);
       e.arguments = arguments;
       window.dispatchEvent(e);
       return rv;
   };
};
 history.pushState = _wr("pushState");
 history.replaceState = _wr("replaceState");

這樣就創(chuàng)建了2個(gè)全新的事件，事件名為pushState和replaceState，我們就可以在全局監(jiān)聽(tīng)：

window.addEventListener("replaceState", function(e) {
  console.log("THEY DID IT AGAIN! replaceState 111111");
});
window.addEventListener("pushState", function(e) {
  console.log("THEY DID IT AGAIN! pushState 2222222");
});

這樣就可以監(jiān)聽(tīng)到pushState和replaceState行為。

參考文章：https://stackoverflow.com/que...