前端路由原理解析和實(shí)現(xiàn)

lavor 發(fā)布于2019-05-23 16:28 / 3080人閱讀

摘要：如何實(shí)現(xiàn)前端路由要實(shí)現(xiàn)前端路由，需要解決兩個(gè)核心如何改變卻不引起頁(yè)面刷新如何檢測(cè)變化了下面分別使用和兩種實(shí)現(xiàn)方式回答上面的兩個(gè)核心問(wèn)題。

原文鏈接：github.com/whinc/blog/…

在單頁(yè)應(yīng)用如此流行的今天，曾經(jīng)令人驚嘆的前端路由已經(jīng)成為各大框架的基礎(chǔ)標(biāo)配，每個(gè)框架都提供了強(qiáng)大的路由功能，導(dǎo)致路由實(shí)現(xiàn)變的復(fù)雜。想要搞懂路由內(nèi)部實(shí)現(xiàn)還是有些困難的，但是如果只想了解路由實(shí)現(xiàn)基本原理還是比較簡(jiǎn)單的。本文針對(duì)前端路由主流的實(shí)現(xiàn)方式 hash 和 history，提供了原生JS/React/Vue 共計(jì)六個(gè)版本供參考，每個(gè)版本的實(shí)現(xiàn)代碼約 25~40 行左右（含空行）。

什么是前端路由？

路由的概念來(lái)源于服務(wù)端，在服務(wù)端中路由描述的是 URL 與處理函數(shù)之間的映射關(guān)系。

在 Web 前端單頁(yè)應(yīng)用 SPA(Single Page Application)中，路由描述的是 URL 與 UI 之間的映射關(guān)系，這種映射是單向的，即 URL 變化引起 UI 更新（無(wú)需刷新頁(yè)面）。

如何實(shí)現(xiàn)前端路由？

要實(shí)現(xiàn)前端路由，需要解決兩個(gè)核心：

如何改變 URL 卻不引起頁(yè)面刷新？

如何檢測(cè) URL 變化了？

下面分別使用 hash 和 history 兩種實(shí)現(xiàn)方式回答上面的兩個(gè)核心問(wèn)題。

hash 實(shí)現(xiàn)

hash 是 URL 中 hash (#) 及后面的那部分，常用作錨點(diǎn)在頁(yè)面內(nèi)進(jìn)行導(dǎo)航，改變 URL 中的 hash 部分不會(huì)引起頁(yè)面刷新

通過(guò) hashchange 事件監(jiān)聽 URL 的變化，改變 URL 的方式只有這幾種：通過(guò)瀏覽器前進(jìn)后退改變 URL、通過(guò)標(biāo)簽改變 URL、通過(guò)window.location改變URL，這幾種情況改變 URL 都會(huì)觸發(fā) hashchange 事件

history 實(shí)現(xiàn)

history 提供了 pushState 和 replaceState 兩個(gè)方法，這兩個(gè)方法改變 URL 的 path 部分不會(huì)引起頁(yè)面刷新

history 提供類似 hashchange 事件的 popstate 事件，但 popstate 事件有些不同：通過(guò)瀏覽器前進(jìn)后退改變 URL 時(shí)會(huì)觸發(fā) popstate 事件，通過(guò)pushState/replaceState或標(biāo)簽改變 URL 不會(huì)觸發(fā) popstate 事件。好在我們可以攔截 pushState/replaceState的調(diào)用和標(biāo)簽的點(diǎn)擊事件來(lái)檢測(cè) URL 變化，所以監(jiān)聽 URL 變化可以實(shí)現(xiàn)，只是沒(méi)有 hashchange 那么方便。

原生JS版前端路由實(shí)現(xiàn)

基于上節(jié)討論的兩種實(shí)現(xiàn)方式，分別實(shí)現(xiàn) hash 版本和 history 版本的路由，示例使用原生 HTML/JS 實(shí)現(xiàn)，不依賴任何框架。

基于 hash 實(shí)現(xiàn)

運(yùn)行效果：

HTML 部分：

<body>
  <ul>
    
    <li><a href="#/home">homea>li>
    <li><a href="#/about">abouta>li>

    
    <div id="routeView">div>
  ul>
body>

JavaScript 部分：

// 頁(yè)面加載完不會(huì)觸發(fā) hashchange，這里主動(dòng)觸發(fā)一次 hashchange 事件
window.addEventListener("DOMContentLoaded", onLoad)
// 監(jiān)聽路由變化
window.addEventListener("hashchange", onHashChange)

// 路由視圖
var routerView = null

function onLoad () {
  routerView = document.querySelector("#routeView")
  onHashChange()
}

// 路由變化時(shí)，根據(jù)路由渲染對(duì)應(yīng) UI
function onHashChange () {
  switch (location.hash) {
    case "#/home":
      routerView.innerHTML = "Home"
      return
    case "#/about":
      routerView.innerHTML = "About"
      return
    default:
      return
  }
}

基于 history 實(shí)現(xiàn)

運(yùn)行效果：

HTML 部分：

<body>
  <ul>
    <li><a href="/home">homea>li>
    <li><a href="/about">abouta>li>

    <div id="routeView">div>
  ul>
body>

JavaScript 部分：

// 頁(yè)面加載完不會(huì)觸發(fā) hashchange，這里主動(dòng)觸發(fā)一次 hashchange 事件
window.addEventListener("DOMContentLoaded", onLoad)
// 監(jiān)聽路由變化
window.addEventListener("popstate", onPopState)

// 路由視圖
var routerView = null

function onLoad () {
  routerView = document.querySelector("#routeView")
  onPopState()

  // 攔截  標(biāo)簽點(diǎn)擊事件默認(rèn)行為， 點(diǎn)擊時(shí)使用 pushState 修改 URL并更新手動(dòng) UI，從而實(shí)現(xiàn)點(diǎn)擊鏈接更新 URL 和 UI 的效果。
  var linkList = document.querySelectorAll("a[href]")
  linkList.forEach(el => el.addEventListener("click", function (e) {
    e.preventDefault()
    history.pushState(null, "", el.getAttribute("href"))
    onPopState()
  }))
}

// 路由變化時(shí)，根據(jù)路由渲染對(duì)應(yīng) UI
function onPopState () {
  switch (location.pathname) {
    case "/home":
      routerView.innerHTML = "Home"
      return
    case "/about":
      routerView.innerHTML = "About"
      return
    default:
      return
  }
}

React 版前端路由實(shí)現(xiàn) 基于 hash 實(shí)現(xiàn)

運(yùn)行效果：

使用方式和 react-router 類似：

  
    <ul>
      <li>
        <Link to="/home">homeLink>
      li>
      <li>
        <Link to="/about">aboutLink>
      li>
    ul>

    "/home" render={() => <h2>Homeh2>} />
    <Route path="/about" render={() => <h2>Abouth2>} />
  BrowserRouter>

BrowserRouter 實(shí)現(xiàn)

export default class BrowserRouter extends React.Component {
  state = {
    currentPath: utils.extractHashPath(window.location.href)
  };

  onHashChange = e => {
    const currentPath = utils.extractHashPath(e.newURL);
    console.log("onHashChange:", currentPath);
    this.setState({ currentPath });
  };

  componentDidMount() {
    window.addEventListener("hashchange", this.onHashChange);
  }

  componentWillUnmount() {
    window.removeEventListener("hashchange", this.onHashChange);
  }

  render() {
    return (
      <RouteContext.Provider value={{currentPath: this.state.currentPath}}>
        {this.props.children}
      RouteContext.Provider>
    );
  }
}

Route 實(shí)現(xiàn)

export default ({ path, render }) => (
  <RouteContext.Consumer>
    {({currentPath}) => currentPath === path && render()}
  RouteContext.Consumer>
);

Link 實(shí)現(xiàn)

export default ({ to, ...props }) => <a {...props} href={"#" + to} />;

基于 history 實(shí)現(xiàn)

運(yùn)行效果：

使用方式和 react-router 類似：

  
    <ul>
      <li>
        <Link to="/home">homeLink>
      li>
      <li>
        <Link to="/about">aboutLink>
      li>
    ul>

    "/home" render={() => <h2>Homeh2>} />
    <Route path="/about" render={() => <h2>Abouth2>} />
  HistoryRouter>

HistoryRouter 實(shí)現(xiàn)

export default class HistoryRouter extends React.Component {
  state = {
    currentPath: utils.extractUrlPath(window.location.href)
  };

  onPopState = e => {
    const currentPath = utils.extractUrlPath(window.location.href);
    console.log("onPopState:", currentPath);
    this.setState({ currentPath });
  };

  componentDidMount() {
    window.addEventListener("popstate", this.onPopState);
  }

  componentWillUnmount() {
    window.removeEventListener("popstate", this.onPopState);
  }

  render() {
    return (
      <RouteContext.Provider value={{currentPath: this.state.currentPath, onPopState: this.onPopState}}>
        {this.props.children}
      RouteContext.Provider>
    );
  }
}

Route 實(shí)現(xiàn)

export default ({ path, render }) => (
  <RouteContext.Consumer>
    {({currentPath}) => currentPath === path && render()}
  RouteContext.Consumer>
);

Link 實(shí)現(xiàn)

export default ({ to, ...props }) => (
  
    {({ onPopState }) => (
       {
          e.preventDefault();
          window.history.pushState(null, "", to);
          onPopState();
        }}
      />
    )}
  
);

Vue 版本前端路由實(shí)現(xiàn) 基于 hash 實(shí)現(xiàn)

運(yùn)行效果：

使用方式和 vue-router 類似（vue-router 通過(guò)插件機(jī)制注入路由，但是這樣隱藏了實(shí)現(xiàn)細(xì)節(jié)，為了保持代碼直觀，這里沒(méi)有使用 Vue 插件封裝）：

    <div>
      <ul>
        <li><router-link to="/home">homerouter-link>li>
        <li><router-link to="/about">aboutrouter-link>li>
      ul>
      <router-view>router-view>
    div>

const routes = {
  "/home": {
    template: "Home
"
  },
  "/about": {
    template: "About
"
  }
}

const app = new Vue({
  el: ".vue.hash",
  components: {
    "router-view": RouterView,
    "router-link": RouterLink
  },
  beforeCreate () {
    this.$routes = routes
  }
})

router-view 實(shí)現(xiàn)

router-link 實(shí)現(xiàn)

基于 history 實(shí)現(xiàn)

運(yùn)行效果：

使用方式和 vue-router 類似：

    <div>
      <ul>
        <li><router-link to="/home">homerouter-link>li>
        <li><router-link to="/about">aboutrouter-link>li>
      ul>
      <router-view>router-view>
    div>

const routes = {
  "/home": {
    template: "Home
"
  },
  "/about": {
    template: "About
"
  }
}

const app = new Vue({
  el: ".vue.history",
  components: {
    "router-view": RouterView,
    "router-link": RouterLink
  },
  created () {
    this.$routes = routes
    this.boundPopState = this.onPopState.bind(this)
  },
  beforeMount () {
    window.addEventListener("popstate", this.boundPopState) 
  },
  beforeDestroy () {
    window.removeEventListener("popstate", this.boundPopState) 
  },
  methods: {
    onPopState (...args) {
      this.$emit("popstate", ...args)
    }
  }
})

router-view 實(shí)現(xiàn)：

router-link 實(shí)現(xiàn)

小結(jié)

前端路由的核心實(shí)現(xiàn)原理很簡(jiǎn)單，但是結(jié)合具體框架后，框架增加了很多特性，如動(dòng)態(tài)路由、路由參數(shù)、路由動(dòng)畫等等，這些導(dǎo)致路由實(shí)現(xiàn)變的復(fù)雜。本文去粗取精只針對(duì)前端路由最核心部分的實(shí)現(xiàn)進(jìn)行分析，并基于 hash 和 history 兩種模式，分別提供原生JS/React/Vue 三種實(shí)現(xiàn)，共計(jì)六個(gè)實(shí)現(xiàn)版本供參考，希望對(duì)你有所幫助。

所有的示例的代碼放在 Github 倉(cāng)庫(kù)：github.com/whinc/web-r…

參考

詳解單頁(yè)面路由的幾種實(shí)現(xiàn)原理

單頁(yè)面應(yīng)用路由實(shí)現(xiàn)原理：以 React-Router 為例

GPU云服務(wù)器云服務(wù)器 js前端路由原理 linux路由原理前端路由 js前端路由

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/7258.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

lavor

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

RackNerd：雙11優(yōu)惠，促銷多款美國(guó)便宜VPS，低至$12/年，可選6個(gè)機(jī)房(洛杉磯/圣何塞/

閱讀 845·2021-10-25 09:48
Vultr機(jī)房測(cè)評(píng) - Vultr英國(guó)倫敦London機(jī)房綜合速度和線路去程回程測(cè)試

閱讀 617·2021-08-23 09:45
CSS 雜記

閱讀 2509·2019-08-30 15:53
手機(jī)html頁(yè)面的垂直布局的基本框架

閱讀 1765·2019-08-30 12:45
2018 百度web前端面試

閱讀 608·2019-08-29 17:21
Android Studio導(dǎo)入并顯示國(guó)內(nèi)地圖SDK步驟對(duì)比以及需要注意的點(diǎn)（百度地圖和高德地圖為例

閱讀 3423·2019-08-27 10:56
JavaScript系列--類型判斷的4種基本方法，研究jquery的type方法，空對(duì)象的檢測(cè)方法

閱讀 2556·2019-08-26 13:48
文章5：vue（2）

閱讀 704·2019-08-26 12:24

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

前端路由原理解析和實(shí)現(xiàn)

Home

About

Home

About

相關(guān)文章

前端路由簡(jiǎn)介以及vue-router實(shí)現(xiàn)原理

**自己動(dòng)手實(shí)現(xiàn)一個(gè)前端路由**

面試官常問(wèn)——vue篇

面試官常問(wèn)——vue篇

面試官常問(wèn)——vue篇

發(fā)表評(píng)論

0條評(píng)論

lavor

男|高級(jí)講師

TA的文章

RackNerd：雙11優(yōu)惠，促銷多款美國(guó)便宜VPS，低至$12/年，可選6個(gè)機(jī)房(洛杉磯/圣何塞/

Vultr機(jī)房測(cè)評(píng) - Vultr英國(guó)倫敦London機(jī)房綜合速度和線路去程回程測(cè)試

CSS 雜記

手機(jī)html頁(yè)面的垂直布局的基本框架

2018 百度web前端面試

Android Studio導(dǎo)入并顯示國(guó)內(nèi)地圖SDK步驟對(duì)比以及需要注意的點(diǎn)（百度地圖和高德地圖為例

JavaScript系列--類型判斷的4種基本方法，研究jquery的type方法，空對(duì)象的檢測(cè)方法

文章5：vue（2）

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

前端路由原理解析和實(shí)現(xiàn)

Home

About

Home

About

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！