在單頁應(yīng)用中，如何優(yōu)雅的監(jiān)聽url的變化

leap_frog 發(fā)布于2019-08-30 15:55 / 2013人閱讀

摘要：單頁應(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)用原理

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

(1)通過hash來實(shí)現(xiàn)單頁路由

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

??改變url的hash值是不會刷新頁面的。

??因此可以通過hash來實(shí)現(xiàn)前端路由，從而實(shí)現(xiàn)無刷新的效果。hash屬性位于location對象中，在當(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ā)生了改變，但是頁面是不會刷新的。

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

edit

(2)通過history實(shí)現(xiàn)前端路由

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

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

History的屬性：

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

History.state:

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

History方法：

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

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

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

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

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

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

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

不同點(diǎn)：

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

(3)總結(jié)

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

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

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

二、監(jiān)聽url中的hash變化

??通過hash改變了url，會觸發(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值改變時，輸出一個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)前端路由。

三、監(jiān)聽通過history來改變url的事件

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

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

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

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

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

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

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

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

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

但是，History.pushState()和History.replaceState()不會觸發(fā)popstate事件，舉例來說：

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

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

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

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

四、replaceState和pushState行為的監(jiān)聽

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

具體做法為：

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個全新的事件，事件名為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...