摘要：最新一直在看關(guān)于和路由這塊的知識(shí)，最終發(fā)現(xiàn)這些路由框架的模塊功能的實(shí)現(xiàn)都是基于瀏覽器原生路由的。在瀏覽器中實(shí)現(xiàn)前端路由主要有兩種方式一個(gè)是我們常用的，另一個(gè)是提供的。該對(duì)象的和分別表示的各個(gè)部分，它們因此被稱為分解屬性。

最新一直在看關(guān)于 Vue 和 React 路由這塊的知識(shí)，最終發(fā)現(xiàn)這些路由框架的模塊功能的實(shí)現(xiàn)都是基于瀏覽器原生路由 API?的。本著追根溯源的初心，于是就想著將瀏覽器原生的路由 API 整體梳理一遍，以便更加順暢的理解 Vue-Router 和 React-Router 的相關(guān)實(shí)現(xiàn)和原理。

瀏覽器的主要功能就是根據(jù)輸入的 URL 在窗口加載對(duì)應(yīng)的文檔，與此同時(shí)，瀏覽器會(huì)記錄一個(gè) tab 窗口載入過(guò)的所有文檔，同時(shí)會(huì)提供 "前進(jìn)"、"后退" 和 "刷新" 的功能，以便用戶可以在這些已經(jīng)記錄的文檔之間進(jìn)行切換瀏覽和重載當(dāng)前頁(yè)面獲取最新的瀏覽信息。

這些功能的實(shí)現(xiàn)最早是在服務(wù)器端實(shí)現(xiàn)的，因?yàn)槟菚r(shí)候的引用都是前后端不分離的，頁(yè)面內(nèi)容也是動(dòng)態(tài)生成的，所以這些頁(yè)面的跳轉(zhuǎn)、切換、刷新都是在服務(wù)端實(shí)現(xiàn)的。后來(lái)出現(xiàn)了 SPA（Single Page Application 單頁(yè)應(yīng)用），頁(yè)面都是通過(guò) JavaScript 動(dòng)態(tài)生成和載入到頁(yè)面的，并且可以在無(wú)刷新的情況下加載頁(yè)面最新的狀態(tài)信息，這時(shí)候如果要提供上述的功能就需要自己進(jìn)行處理（因?yàn)榇藭r(shí)的頁(yè)面都是現(xiàn)實(shí)在同一個(gè)大的框架頁(yè)面里面的，根本不存在頁(yè)面的跳轉(zhuǎn)切換），所以催生了各種框架對(duì)應(yīng)的 Router 實(shí)現(xiàn)。

在瀏覽器中實(shí)現(xiàn)前端路由主要有兩種方式：一個(gè)是我們常用的 hash，另一個(gè)是 HTML5 提供的 history。其實(shí)還有另外一種利用 stack 實(shí)現(xiàn)的方式適用于 Node.js 服務(wù)器端，這里我們著重說(shuō)一下瀏覽器提供的 hash 和 history 吧，stack 具體怎么實(shí)現(xiàn)等我們說(shuō)到 x-Router 源碼的時(shí)候再詳細(xì)說(shuō)一下。

在瀏覽器 URL 地址欄，我們總會(huì)發(fā)現(xiàn)像這樣的地址：react.docschina.org/docs/react-… React 官網(wǎng)關(guān)于 lazy 的一個(gè)地址）。大家肯定發(fā)現(xiàn)：這串 URL 的最后有以 # 號(hào)開(kāi)始的一串標(biāo)識(shí)，那它到底是起著什么樣的作用呢？肯定不會(huì)平白無(wú)故的出現(xiàn)吧。

hash 特性

你可以直接在瀏覽器中打開(kāi)這個(gè)鏈接地址，你是不是發(fā)現(xiàn)頁(yè)面會(huì)自動(dòng)滾動(dòng)到（頁(yè)面頂部定位到）標(biāo)題為 React.lazy 的部分文檔。你再將頁(yè)面往上滾動(dòng)，肯定會(huì)發(fā)現(xiàn)上面還有部分的文檔內(nèi)容。此時(shí)，你修改地址欄的地址為?react.docschina.org/docs/react-… React.Suspense 部分。

在早些年，hash 作為 URL 的一部分主要用來(lái)定位文檔中的文檔片段。在上面的例子中，我們通過(guò)在 URL 后面添加 #reactlazy 和 #reactsuspense 定位到了文檔對(duì)應(yīng)標(biāo)題為 React.lazy 和 React.Suspense 的部分。那他們到底是怎么做到的呢？
通過(guò)審核元素我們發(fā)現(xiàn)：在?React.lazy 和 React.Suspense 對(duì)應(yīng)的標(biāo)題部分分別都有一個(gè) h3 標(biāo)簽，而且標(biāo)簽的 id 屬性對(duì)應(yīng)就是我們?cè)?URL 地址欄輸入的 hash 值部分（只是少了 # 號(hào)）。

hash 定位文檔片段
可能有同學(xué)會(huì)有疑惑：為什么 hash 是通過(guò)元素上面的 id 屬性來(lái)定位文檔的？前面我們提到過(guò)，URL 中的 hash 部分是用來(lái)定位文檔中的文檔片段的。大家想想：所需要定位的文檔片段肯定是唯一的，不然定位肯定是不準(zhǔn)確了，那這個(gè)定位文檔就有點(diǎn)雞肋了，在文檔中標(biāo)識(shí)唯一的屬性只有是 id 了，如果是我，我也會(huì)通過(guò) hash 匹配元素的 id 來(lái)定位文檔?，F(xiàn)在來(lái)驗(yàn)證一下我們的猜想：

1、首先在新的 tab 窗口打開(kāi)?react.docschina.org/docs/react-… 頁(yè)面，然后在審核元素下找到上圖所展示的 DOM 元素，修改其中的 h3 標(biāo)簽的 id 屬性值為 reactlazy1，接著在 URL 地址欄追加 #reactlazy hash 值并按下回車鍵，此時(shí)頁(yè)面并沒(méi)有定位到標(biāo)題為 React.lazy 的文檔片段，最后將 URL 地址欄的 #reactlazy hash 值改成?#reactlazy1 hash 值并按下回車鍵，此時(shí)頁(yè)面并沒(méi)有定位到標(biāo)題為 React.lazy 的文檔片段，這一系列的表現(xiàn)說(shuō)明 hash 定位還是和元素的 id 屬性值還是有關(guān)聯(lián)的；

2、依然是在新的 tab 窗口打開(kāi)?react.docschina.org/docs/react-… 頁(yè)面，然后將頁(yè)面手動(dòng)滾動(dòng)到標(biāo)題為 React.lazy 的文檔片段，將鼠標(biāo)放在標(biāo)題上會(huì)出現(xiàn)一個(gè)錨點(diǎn)的圖標(biāo)，點(diǎn)擊圖標(biāo)發(fā)現(xiàn)頁(yè)面定位到了標(biāo)題為 React.lazy 的文檔片段并且 URL 地址欄變成了?react.docschina.org/docs/react-…?#reactlazy hash 值。此時(shí)再回頭看看我們前面給出的截圖發(fā)現(xiàn) id 屬性值為?reactlazy 的 h3 標(biāo)簽中有一個(gè) href 屬性值為 #reactlazy 的 a 標(biāo)簽，其實(shí)我們?cè)陧?yè)面上看到的錨點(diǎn)圖標(biāo)就是這個(gè) a 標(biāo)簽的展示。當(dāng)我們點(diǎn)擊錨點(diǎn)圖標(biāo)就是點(diǎn)擊了 a 鏈接，然后將 url 定位到了?id 屬性值為?reactlazy 的 h3 標(biāo)簽，還是很好的說(shuō)明了 hash 定位還是和元素的 id 屬性值還是有關(guān)聯(lián)的；

3、MDN 官方定義如下：

MDN 官方文檔上有明確的定義，但是我們還是通過(guò)兩個(gè)方面來(lái)證明了我們的推論，乍一看好像說(shuō)了很多沒(méi)有用的東西，其實(shí)這樣反復(fù)的推敲更有利于我們深刻的理解相關(guān)的知識(shí)點(diǎn)以及為什么是這樣，而不是那樣!

hash 路由

hash 的存在除了可以通過(guò)設(shè)置文檔中元素的 ID 來(lái)定位文檔片段之外，還可以設(shè)置為任意的字符串來(lái)表示路由。在 Vue、React 等現(xiàn)代前端框架中，為了實(shí)現(xiàn)功能完備的 SPA 應(yīng)用都配備了對(duì)應(yīng)的路由系統(tǒng)。在這些路由系統(tǒng)都會(huì)提供 hash 路由模式。

在 hash 模式下，hash 會(huì)支持任意的字符串來(lái)表示對(duì)應(yīng)的 URL。這些路由系統(tǒng)針對(duì) hash 模式的實(shí)現(xiàn)基本都是大同小異：在設(shè)置 location.hash 屬性值后，應(yīng)用就會(huì)想盡一切辦法檢測(cè)狀態(tài)值變化，以便能夠讀取出存儲(chǔ)在片段標(biāo)識(shí)符中的狀態(tài)并相應(yīng)地更新自己的狀態(tài)。支持 HTML5 的瀏覽器一旦發(fā)現(xiàn)片段標(biāo)識(shí)符發(fā)生了變化，就會(huì)在 Window 對(duì)象上觸發(fā) hashchange 事件，這時(shí)就會(huì)觸發(fā)對(duì)象的函數(shù)處理邏輯 —— 對(duì)?location.hash 的值進(jìn)行解析，然后使用該值包含的狀態(tài)信息重新渲染應(yīng)用。

這里只是提到了一個(gè)基礎(chǔ)的思路，路由系統(tǒng)的具體實(shí)現(xiàn)，后續(xù)會(huì)娓娓道來(lái)！

hash 事件

// 在 window 下監(jiān)聽(tīng) hashchange 事件
window.onhashchange = function() {
  // 當(dāng)事件觸發(fā)時(shí)輸出當(dāng)前的 hash 值
  console.log(window.location.hash)
}

在不支持 HTML5 的瀏覽器中，我們可以通過(guò) 100ms 輪詢監(jiān)聽(tīng) url 變化來(lái)模擬：

(function(window){
  // 如果瀏覽器不支持原生實(shí)現(xiàn)的事件，則開(kāi)始模擬，否則退出。
  if ( "onhashchange" in window.document.body ) return;
  
  var location = window.location,
      oldUrl = location.href,
      oldHash = location.hash;

  // 每隔 100ms 檢查 hash 是否發(fā)生變化
  setInterval(function() {
    var newUrl = location.href,
        newHash = location.hash;

    // hash 發(fā)生變化且全局注冊(cè)有 onhashchange 方法（這個(gè)名字是為了和模擬的事件名保持統(tǒng)一）；
    if (newHash !== oldHash && typeof window.onhashchange === "function"  ) {
      // 執(zhí)行方法
      window.onhashchange({
        type: "hashchange",
        oldURL: oldUrl,
        newURL: newUrl
      });

      oldUrl = newUrl;
      oldHash = newHash;
    }
  }, 100);
})(window)

??注意：設(shè)置 location.hash 屬性會(huì)更新顯示在地址欄中的 URL，同時(shí)會(huì)在瀏覽器的歷史記錄中添加一條記錄。

為了標(biāo)準(zhǔn)化管理瀏覽器歷史管理，HTML5 定義了相對(duì)復(fù)雜的 API —— history。

history api

1、history 里面新增了兩個(gè) API，history.pushState() 和 history.replaceState()。這兩個(gè) API 都接受同樣的參數(shù)：

它們之間的不同之處是：history.pushState() 方法是將新?tīng)顟B(tài)添加到瀏覽器的歷史記錄中，也就是說(shuō)還可以通過(guò)點(diǎn)擊?"后退"?按鈕，退到前一個(gè)頁(yè)面；history.replaceState() 是用新的狀態(tài)代替當(dāng)前的歷史狀態(tài)，也就是說(shuō)沒(méi)有更多的歷史記錄，"后退"?按鈕不能操作了，頁(yè)面不能?"后退"?了。

??注意：當(dāng)執(zhí)行這兩個(gè) API 時(shí)，瀏覽器的 URL 地址欄會(huì)變化，但是頁(yè)面內(nèi)容不會(huì)刷新！

狀態(tài)對(duì)象（state