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

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

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

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

歡迎star

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

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

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

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

window.location.hash="edit"

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

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

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

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

edit

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

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

History的屬性：

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

History.state:

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

History方法：

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

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

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

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

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

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

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

不同點(diǎn)：

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

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

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

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

??通過hash改變了url，會(huì)觸發(fā)hashchange事件，只要監(jiān)聽hashchange事件，就能捕獲到通過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)聽事件，且改變hash頁面不刷新，這樣我們就可以在監(jiān)聽事件的回調(diào)函數(shù)中，執(zhí)行我們展示和隱藏不同UI顯示的功能，從而實(shí)現(xiàn)前端路由。

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

同時(shí)在history中還支持一個(gè)事件，該事件為popstate。第一想法就是如果popstate能夠監(jiān)聽所有的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)聽到相應(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事件，舉例來說：

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

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

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

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

??在上面的例子中我們發(fā)現(xiàn)History.replaceState和pushState確實(shí)不會(huì)觸發(fā)popstate事件，那么如何監(jiān)聽這兩個(gè)行為呢?？梢酝ㄟ^在方法里面主動(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)聽：

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)聽到pushState和replaceState行為。

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