【Web技术】913- 谈谈你对前端路由的理解

朱雀 2022-11-15 01:11 139阅读 0赞

![079731f66387e4af6a41f2a3b333798a.png][]

> 来自：掘金
> 
> 作者：尼克陈
> 
> 链接：https://juejin.cn/post/6917523941435113486

> 一篇文章，不可能做的面面俱到，全部受众。希望大家带着发散思维去看文章，将文章涉及的知识点，吸收为己所用。这样看完一篇文章，才能有所收获。

## 前言 ##

好了不装了，今天我就化身性感面试官在线问大家一个问题，**“谈谈你对前端路由的理解”**。看到这个问题，那回答可多了去了。但是换位思考一下，你问候选人这个问题的时候，你想要得到什么答案？以我个人拙见，我希望候选人能从全局解读这个问题，大致以下三点。

**1、为什么会出现前端路由。**

**2、前端路由解决了什么问题。**

**3、前端路由实现的原理是什么。**

我们带着这三个问题，继续往下看，阅读的过程中如果同学们有自己的见解，可以评论区发表自己的看法。如果觉得讲的内容让你有了新的见解，请献上你宝贵的一赞????，这将是我继续写作的动力。

## 传统页面 ##

这里不纠结叫法，凡是整个项目都是 `DOM` 直出的页面，我们都称它为“传统页面”（SSR 属于首屏直出，这里我不认为是传统页面的范畴）。那么什么是 `DOM` 直出呢？简单说就是在浏览器输入网址后发起请求，返回来的 `HTML` 页面是最终呈现的效果，那就是 `DOM` 直出。并且每次点击页面跳转，都会重新请求 `HTML` 资源。耳听为虚，眼见为实。我们以这个地址为例，验证以下上述说法。

> www.cnblogs.com/han-1034683…

![a327f7ff48d94304c1723d7f973d8283.gif][]

定眼一看，就能明白上图在描述什么。没错，博客园就是一个传统页面搭建而成的网站，每次加载页面，都会返回 `HTML` 资源以及里面的 `CSS` 等静态资源，组合成一个新的页面。

“瞎了”的同学，我再教一个方法，就是在浏览器页面右键，点击“显示网页源代码”，打开后如下所示：

![ce0fa15ad4b1007ad5f2c8a212a9f4ff.png][]

网页上能看到什么图片或文字，你能在上述图片中找到相应的 `HTML` 结构，那也属于传统页面，也就是 `DOM` 直出。

## 单页面 ##

时代在进步，科技在发展，面对日益增长的网页需求，网页开始走向模块化、组件化的道路。随之而来的是代码的难以维护、不可控、迭代艰难等现象。面临这种情况，催生出不少优秀的现代前端框架，首当其冲的便是 `React` 、 `Vue` 、 `Angular` 等著名单页面应用框架。而这些框架有一个共同的特点，便是“通过 JS 渲染页面”。

举个例子，以前我们直出 `DOM` ，而现在运用这些单页面框架之后， `HTML` 页面基本上只有一个 `DOM` 入口，大致如下所示：

![e67013a69fb237724e574c61de04bf1f.png][]

所有的页面组件，都是通过运行上图底部的 `app.js` 脚本，挂载到 `<div id="root"></div>` 这个节点下面。用一个极其简单的 JS 展示挂载这一个步骤：

<body>
      <div id="root"></div>
      <script>
        const root = document.getElementById('root') // 获取根节点
        const divNode = document.createElement('div') // 创建 div 节点
        divNode.innerText = '你妈贵姓？' // 插入内容
        root.appendChild(divNode) // 插入根节点
      </script>
    </body>

![2fe0408a21ea1cada06b6f38f153bfb7.png][] image.png

脱去所有的凡尘世俗，最本真的单页项目运行形式便是如此。**注意，我要点题了啊！！！**

![37b847e052d680fcf3bc83e30b2b306f.png][]

既然单页面是这样渲染的，那如果我有十几个页面要互相跳转切换，咋整！！？？这时候 **前端路由** 应运而生，它的出现就是为了解决单页面网站，通过切换浏览器地址路径，来匹配相对应的页面组件。我们通过一张丑陋的图片来理解这个过程：

![7b2922c35729eda99148d2691b32bd59.png][]

**前端路由** 会根据浏览器地址栏 `pathname` 的变化，去匹配相应的页面组件。然后将其通过创建 `DOM` 节点的形式，塞入根节点 `<div id="root"></div>` 。这就达到了无刷新页面切换的效果，从侧面也能说明正因为无刷新，所以 `React` 、 `Vue` 、 `Angular` 等现代框架在创建页面组件的时候，每个组件都有自己的 **生命周期** 。

## 原理 ##

**前端路由** 插件比较火的俩框架对应的就是 `Vue-Router` 和 `React-Router` ,但是它们的逻辑，归根结底还是一样的，用殊途同归四个字，再合适不过。

通过分析哈希模式和历史模式的实现原理，让大家对前端路由的原理有一个更深刻的理解。

#### 哈希模式 ####

`a` 标签锚点大家应该不陌生，而浏览器地址上 `#` 后面的变化，是可以被监听的，浏览器为我们提供了原生监听事件 `hashchange` ，它可以监听到如下的变化：

*  点击 `a` 标签，改变了浏览器地址
 *  浏览器的前进后退行为
 *  通过 `window.location` 方法，改变浏览器地址

接下来我们利用这些特点，去实现一个 `hash` 模式的简易路由：在线运行

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Hash 模式</title>
    </head>
      <body>
        <div>
          <ul>
            <li><a href="#/page1">page1</a></li>
            <li><a href="#/page2">page2</a></li>
          </ul>
          
          <div id="route-view"></div>
        </div>
      <script type="text/javascript">
        // 第一次加载的时候，不会执行 hashchange 监听事件，默认执行一次
        // DOMContentLoaded 为浏览器 DOM 加载完成时触发
        window.addEventListener('DOMContentLoaded', Load)
        window.addEventListener('hashchange', HashChange)
        // 展示页面组件的节点
        var routeView = null
        function Load() {
          routeView = document.getElementById('route-view')
          HashChange()
        }
        function HashChange() {
          // 每次触发 hashchange 事件，通过 location.hash 拿到当前浏览器地址的 hash 值
          // 根据不同的路径展示不同的内容
          switch(location.hash) {
          case '#/page1':
            routeView.innerHTML = 'page1'
            return
          case '#/page2':
            routeView.innerHTML = 'page2'
            return
          default:
            routeView.innerHTML = 'page1'
            return
          }
        }
      </script>
      </body>
    </html>

> 当然，这是很简单的实现，真正的 hash 模式，还要考虑到很多复杂的情况，大家有兴趣就去看看源码。

浏览器展示效果如下：![5863dc192d6dea81c9189b288e69fe68.gif][]

#### 历史模式 ####

`history` 模式会比 `hash` 模式稍麻烦一些，因为 `history` 模式依赖的是原生事件 `popstate` ，下面是来自 MDN 的解释：

![3f53ff4ca7273ce904aa10cf56e60bbb.png][] image.png

> 小知识：pushState 和 replaceState 都是 HTML5 的新 API，他们的作用很强大，可以做到改变浏览器地址却不刷新页面。这是实现改变地址栏却不刷新页面的重要方法。

包括 `a` 标签的点击事件也是不会被 `popstate` 监听。我们需要想个办法解决这个问题，才能实现 `history` 模式。

![96232ae5d0b6b5a0012a61357150158b.png][] image.png

\*\*解决思路：\*\*我们可以通过遍历页面上的所有 `a` 标签，阻止 `a` 标签的默认事件的同时，加上点击事件的回调函数，在回调函数内获取 `a` 标签的 `href` 属性值，再通过 `pushState` 去改变浏览器的 `location.pathname` 属性值。然后手动执行 `popstate` 事件的回调函数，去匹配相应的路由。逻辑上可能有些饶，我们用代码来解释一下：在线地址

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>History 模式</title>
    </head>
    <body>
      <div>
        <ul>
          <li><a href="/page1">page1</a></li>
          <li><a href="/page2">page2</a></li>
        </ul>
        <div id="route-view"></div>
      </div>
      <script type="text/javascript">
        window.addEventListener('DOMContentLoaded', Load)
        window.addEventListener('popstate', PopChange)
        var routeView = null
        function Load() {
          routeView = document.getElementById('route-view')
          // 默认执行一次 popstate 的回调函数，匹配一次页面组件
          PopChange()
          // 获取所有带 href 属性的 a 标签节点
          var aList = document.querySelectorAll('a[href]')
          // 遍历 a 标签节点数组，阻止默认事件，添加点击事件回调函数
          aList.forEach(aNode => aNode.addEventListener('click', function(e) {
            e.preventDefault() //阻止a标签的默认事件
            var href = aNode.getAttribute('href')
            //  手动修改浏览器的地址栏
            history.pushState(null, '', href)
            // 通过 history.pushState 手动修改地址栏，
            // popstate 是监听不到地址栏的变化，所以此处需要手动执行回调函数 PopChange
            PopChange()
          }))
        }
        function PopChange() {
          console.log('location', location)
          switch(location.pathname) {
          case '/page1':
            routeView.innerHTML = 'page1'
            return
          case '/page2':
            routeView.innerHTML = 'page2'
            return
          default:
            routeView.innerHTML = 'page1'
            return
          }
        }
      </script>
    </body>
    </html>

> 这里注意，不能在浏览器直接打开静态文件，需要通过 web 服务，启动端口去浏览网址。

## 总结 ##

这篇文章主要知识点集中在前端路由这块，能完全看完，并且把实现原理捋一遍，我想你应该对现代前端框架会有一个新的理解。没有新的理解的同学，来杭州打我，我不还手。

![b01901021596a94a7299c39031dfc893.gif][]

[1. JavaScript 重温系列（22篇全）][1. JavaScript _22]

[2. ECMAScript 重温系列（10篇全）][2. ECMAScript _10]

[3. JavaScript设计模式 重温系列（9篇全）][3. JavaScript_ _9]

4. [正则 / 框架 / 算法等 重温系列（16篇全）][_ _ _ _ _16]

5. [Webpack4 入门（上）][Webpack4]|| [Webpack4 入门（下）][Webpack4 1]

6. [MobX 入门（上）][MobX] || [MobX 入门（下）][MobX 1]

7. 120[\+篇原创系列汇总][Link 1]

![23b8915eb600cc2d6506f1a3002c5116.gif][]

回复“**加群**”与大佬们一起交流学习~

点击“**阅读原文**”查看 120+ 篇原创文章

[079731f66387e4af6a41f2a3b333798a.png]: /images/20221022/f20e4f5127ff4121941ad0251a1cfc00.png
[a327f7ff48d94304c1723d7f973d8283.gif]: /images/20221022/123a7c525a834acdbc8b85168bb7283d.png
[ce0fa15ad4b1007ad5f2c8a212a9f4ff.png]: /images/20221022/023bbfe00a334526afaae0a07989f09b.png
[e67013a69fb237724e574c61de04bf1f.png]: /images/20221022/cd383c8ab735433498e34abc108319ca.png
[2fe0408a21ea1cada06b6f38f153bfb7.png]: /images/20221022/9bd0c0dd150841c6bd9dc670572e7ac6.png
[37b847e052d680fcf3bc83e30b2b306f.png]: /images/20221022/5aee39c34e8244248ff51fc8884e6b1a.png
[7b2922c35729eda99148d2691b32bd59.png]: /images/20221022/3d09088cc4064583bd8f1b0e222a7795.png
[5863dc192d6dea81c9189b288e69fe68.gif]: /images/20221022/39bdec718f8c4834afd1b54171131145.png
[3f53ff4ca7273ce904aa10cf56e60bbb.png]: /images/20221022/1ca325e0bc2a4689afb2a2e32a73db5f.png
[96232ae5d0b6b5a0012a61357150158b.png]: /images/20221022/c226d795ecdb4fef92dd818d9fcb31f8.png
[b01901021596a94a7299c39031dfc893.gif]: /images/20221022/70444c868c5a42efb1a8cc9db5e0ad0a.png
[1. JavaScript _22]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224ea86b5adfc10c3aa1841be3879b9360d671e98cc73391c2490246f1348857b9821d32c&idx=1&mid=2458453187&scene=21&sn=a69b4d7d991867a07a933f86e66b9f55#wechat_redirect
[2. ECMAScript _10]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e086b5adf6dad41a0d36b77a9bfb4bc9f0d29a816266b3e28c892e54274967dbce380b&idx=1&mid=2458453193&scene=21&sn=e5392cb77bc17c9e94b6c826b5f52a83#wechat_redirect
[3. JavaScript_ _9]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e386b5adf554ab928cdeaf7ee16dbb2d895be17f2a12a59054a75b913470ca7649bbc7&idx=1&mid=2458453194&scene=21&sn=e7f0734b04484bee5e10a85a7cbb85c1#wechat_redirect
[_ _ _ _ _16]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e286b5adf432850f82db18cc8647d639836798cf16b478d9a6f7c81df87c6da5257684&idx=1&mid=2458453195&scene=21&sn=1e0c8b7ea8ddc207b523ec0a636a5254#wechat_redirect
[Webpack4]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251f86b5ac09dbbbb7c8e1d80c6cbd793a523cdfa690f8734def57812e616b9906aeec79&idx=1&mid=2458453302&scene=21&sn=904e40a421024ea0d394e9850b674012#wechat_redirect
[Webpack4 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251e86b5ac08464872cd880811423e0d1bbcebbe11dcac9d99fa38c5332c089c06d65d95&idx=1&mid=2458453303&scene=21&sn=422f2b5e22c3b0e91a8353ee7e53fed9#wechat_redirect
[MobX]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264c86b5af5aa7300a04d55efead6223e310d68e10222cd3577a25c783d3429f00767960&idx=1&mid=2458453605&scene=21&sn=0a506769d5eeb7953f676e93fb4d18eb#wechat_redirect
[MobX 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264086b5af5611524eedb0d409afe86d859dce6ceff1c17ddab49d353c385e45611a73fa&idx=1&mid=2458453609&scene=21&sn=f0c22e82f2537204d9b173161bae6b82#wechat_redirect
[Link 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224dd86b5adcbd98189315e60de6a0106993690b69927cc1c1f19fd8f591fefce4e3db51f&idx=2&mid=2458453236&scene=21&sn=daf00392f960c115463c5aaf980620b4#wechat_redirect
[23b8915eb600cc2d6506f1a3002c5116.gif]: /images/20221022/71a818acf7824f61951df73773203612.png