前端路由的前生今世及實現原理

時間 2019-11-06

原文原文鏈接

??php

原文發於個人博客：https://github.com/hwen/blogS...html

什麼是路由

路由這個概念最早是後端出現的。在之前用模板引擎開發頁面時，常常會看到這樣前端

http://hometown.xxx.edu.cn/bbs/forum.php

有時還會有帶.asp或.html的路徑，這就是所謂的SSR(Server Side Render)，經過服務端渲染，直接返回頁面。vue

其響應過程是這樣的html5

1.瀏覽器發出請求git

2.服務器監聽到80端口（或443）有請求過來，並解析url路徑github

3.根據服務器的路由配置，返回相應信息（能夠是 html 字串，也能夠是 json 數據，圖片等）ajax

4.瀏覽器根據數據包的Content-Type來決定如何解析數據vue-router

簡單來講路由就是用來跟後端服務器進行交互的一種方式，經過不一樣的路徑，來請求不一樣的資源，請求不一樣的頁面是路由的其中一種功能。npm

前端路由的誕生的原因

前端路由的出現要從 ajax 開始，爲何？且聽下面分析 (ˉ▽￣～)

Ajax，全稱 Asynchronous JavaScript And XML，是瀏覽器用來實現異步加載的一種技術方案。在 90s 年代初，大多數的網頁都是經過直接返回 HTML 的，用戶的每次更新操做都須要從新刷新頁面。及其影響交互體驗，隨着網絡的發展，迫切須要一種方案來改善這種狀況。

1996，微軟首先提出 iframe 標籤，iframe 帶來了異步加載和請求元素的概念，隨後在 1998 年，微軟的 Outloook Web App 團隊提出 Ajax 的基本概念（XMLHttpRequest的前身），並在 IE5 經過 ActiveX 來實現了這項技術。在微軟實現這個概念後，其餘瀏覽器好比 Mozilia，Safari，Opera 相繼以 XMLHttpRequest 來實現 Ajax。（? 兼容問題今後出現，話說微軟命名真喜歡用X，MFC源碼一大堆。。）不過在 IE7 發佈時，微軟選擇了妥協，兼容了 XMLHttpRequest 的實現。

有了 Ajax 後，用戶交互就不用每次都刷新頁面，體驗帶來了極大的提高。

但真正讓這項技術發揚光大的，(｡･∀･)ﾉﾞ仍是後來的 Google Map，它的出現向人們展示了 Ajax 的真正魅力，釋放了衆多開發人員的想象力，讓其不只僅侷限於簡單的數據和頁面交互，爲後來異步交互體驗方式的繁榮發展帶來了根基。

而異步交互體驗的更高級版本就是 SPA（那麼問個問題，異步交互最高級的體驗是什麼？會在文末揭曉）—— 單頁應用。單頁應用不只僅是在頁面交互是無刷新的，連頁面跳轉都是無刷新的，爲了實現單頁應用，因此就有了前端路由。

單頁應用的概念是伴隨着 MVVM 出現的。最先由微軟提出，而後他們在瀏覽器端用 Knockoutjs 實現。但這項技術的強大之處並未當時的開發者體會到，多是由於 Knockoutjs 實現過於複雜，致使沒有大面積的擴散。

一樣，此次接力的選手依然是 Google。Google 經過 Angularjs 將 MVVM 及單頁應用發揚光大，讓前端開發者可以開發出更加大型的應用，職能變得更大了。（不得不感慨，微軟跟 Google 都是偉大的公司）。隨後都是你們都知道的故事，前端圈開始獲得了爆發式的發展，陸續出現了不少優秀的框架。

原本還想寫更多的。。。不過有點慢慢偏離主題了（下次會專門寫寫）

從 vue-router 來看前端路由實現原理

前端路由的實現其實很簡單。

本質上就是檢測 url 的變化，截獲 url 地址，而後解析來匹配路由規則。

可是這樣有人就會問：url 每次變化都會刷新頁面啊？頁面都刷新了，JavaScript 怎麼檢測和截獲 url？

在 2014 年以前，你們是經過 hash 來實現路由，url hash 就是相似於

https://segmentfault.com/a/1190000011956628#articleHeader2

這種 #。後面 hash 值的變化，並不會致使瀏覽器向服務器發出請求，瀏覽器不發出請求，也就不會刷新頁面。另外每次 hash 值的變化，還會觸發 hashchange 這個事件，經過這個事件咱們就能夠知道 hash 值發生了哪些變化。

讓咱們來整理思路，假如咱們要用 hash 的模式實現一個路由，那麼流程應該是這樣的。

hash 的實現相對來講要簡單方便些，並且不用服務器來支持。

另外咱們能夠參考參考 vue-router 這一部分的實現（爲了便於解釋我簡化了部分代碼）

vue-router hash 實現源碼地址

/**
 * 添加 url hash 變化的監聽器
 */
setupListeners () {
  const router = this.router

  /**
   * 每當 hash 變化時就解析路徑
   * 匹配路由
   */
  window.addEventListener('hashchange', () => {
    const current = this.current
    /**
     * transitionTo: 
     * 匹配路由
     * 並經過路由配置，把新的頁面 render 到 ui-view 的節點
     */
    this.transitionTo(getHash(), route => {
      replaceHash(route.fullPath)
    })
  })
}

檢測到 hash 的變化後，就能夠經過替換 DOM 的方式來實現頁面的更換。

14年後，由於HTML5標準發佈。多了兩個 API，pushState 和 replaceState，經過這兩個 API 能夠改變 url 地址且不會發送請求。同時還有 onpopstate 事件。經過這些就能用另外一種方式來實現前端路由了，但原理都是跟 hash 實現相同的。用了 HTML5 的實現，單頁路由的 url 就不會多出一個#，變得更加美觀。但由於沒有 # 號，因此當用戶刷新頁面之類的操做時，瀏覽器仍是會給服務器發送請求。爲了不出現這種狀況，因此這個實現須要服務器的支持，須要把全部路由都重定向到根頁面。具體能夠見：HTML5 histroy 模式

一樣，咱們來理清下思路，這樣寫起代碼才更駕輕就熟~

這部分 vue-router 的源碼，能夠發現實現的思路大致也是相同的

export class HTML5History extends History {
  constructor (router, base) {
    super(router, base)
    /**
     * 原理仍是跟 hash 實現同樣
     * 經過監聽 popstate 事件
     * 匹配路由，而後更新頁面 DOM
     */
    window.addEventListener('popstate', e => {
      const current = this.current

      // Avoiding first `popstate` event dispatched in some browsers but first
      // history route not updated since async guard at the same time.
      const location = getLocation(this.base)
      if (this.current === START && location === initLocation) {
        return
      }

      this.transitionTo(location, route => {
        if (supportsScroll) {
          handleScroll(router, route, current, true)
        }
      })
    })
  }

  go (n) {
    window.history.go(n)
  }

  push (location, onComplete, onAbort) {
    const { current: fromRoute } = this
    this.transitionTo(location, route => {
      // 使用 pushState 更新 url，不會致使瀏覽器發送請求，從而不會刷新頁面
      pushState(cleanPath(this.base + route.fullPath))
      onComplete && onComplete(route)
    }, onAbort)
  }

  replace (location, onComplete, onAbort) {
    const { current: fromRoute } = this
    this.transitionTo(location, route => {
      // replaceState 跟 pushState 的區別在於，不會記錄到歷史棧
      replaceState(cleanPath(this.base + route.fullPath))
      onComplete && onComplete(route)
    }, onAbort)
  }
}