【Web技术】943- 对前端路由的一些理解
來自：掘金，作者：尼克陳
鏈接：https://juejin.cn/post/6917523941435113486
一篇文章，不可能做的面面俱到，全部受眾。希望大家帶著發散思維去看文章，將文章涉及的知識點，吸收為己所用。這樣看完一篇文章，才能有所收獲。
前言
好了不裝了，今天我就化身性感面試官在線問大家一個問題，“談談你對前端路由的理解”?？吹竭@個問題，那回答可多了去了。但是換位思考一下，你問候選人這個問題的時候，你想要得到什么答案？以我個人拙見，我希望候選人能從全局解讀這個問題，大致以下三點。
1、為什么會出現前端路由。
2、前端路由解決了什么問題。
3、前端路由實現的原理是什么。
我們帶著這三個問題，繼續往下看，閱讀的過程中如果同學們有自己的見解，可以評論區發表自己的看法。如果覺得講的內容讓你有了新的見解，請獻上你寶貴的一贊????，這將是我繼續寫作的動力。
傳統頁面
這里不糾結叫法，凡是整個項目都是?DOM?直出的頁面，我們都稱它為“傳統頁面”（SSR 屬于首屏直出，這里我不認為是傳統頁面的范疇）。那么什么是?DOM?直出呢？簡單說就是在瀏覽器輸入網址后發起請求，返回來的?HTML?頁面是最終呈現的效果，那就是?DOM?直出。并且每次點擊頁面跳轉，都會重新請求?HTML?資源。耳聽為虛，眼見為實。我們以這個地址為例，驗證以下上述說法。
www.cnblogs.com/han-1034683…
定眼一看，就能明白上圖在描述什么。沒錯，博客園就是一個傳統頁面搭建而成的網站，每次加載頁面，都會返回?HTML?資源以及里面的?CSS?等靜態資源，組合成一個新的頁面。
“瞎了”的同學，我再教一個方法，就是在瀏覽器頁面右鍵，點擊“顯示網頁源代碼”，打開后如下所示：
網頁上能看到什么圖片或文字，你能在上述圖片中找到相應的?HTML?結構，那也屬于傳統頁面，也就是?DOM?直出。
單頁面
時代在進步，科技在發展，面對日益增長的網頁需求，網頁開始走向模塊化、組件化的道路。隨之而來的是代碼的難以維護、不可控、迭代艱難等現象。面臨這種情況，催生出不少優秀的現代前端框架，首當其沖的便是?React?、?Vue?、?Angular?等著名單頁面應用框架。而這些框架有一個共同的特點，便是“通過 JS 渲染頁面”。
舉個例子，以前我們直出?DOM?，而現在運用這些單頁面框架之后，?HTML?頁面基本上只有一個?DOM?入口，大致如下所示：
所有的頁面組件，都是通過運行上圖底部的?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> image.png脫去所有的凡塵世俗，最本真的單頁項目運行形式便是如此。注意，我要點題了啊！！！
image.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?=?nullfunction?Load()?{routeView?=?document.getElementById('route-view')HashChange()}function?HashChange()?{//?每次觸發?hashchange?事件，通過?location.hash?拿到當前瀏覽器地址的?hash?值//?根據不同的路徑展示不同的內容switch(location.hash)?{case?'#/page1':routeView.innerHTML?=?'page1'returncase?'#/page2':routeView.innerHTML?=?'page2'returndefault:routeView.innerHTML?=?'page1'return}}</script></body> </html>當然，這是很簡單的實現，真正的 hash 模式，還要考慮到很多復雜的情況，大家有興趣就去看看源碼。
瀏覽器展示效果如下：
歷史模式
history?模式會比?hash?模式稍麻煩一些，因為?history?模式依賴的是原生事件?popstate?，下面是來自 MDN 的解釋：
image.png小知識：pushState 和 replaceState 都是 HTML5 的新 API，他們的作用很強大，可以做到改變瀏覽器地址卻不刷新頁面。這是實現改變地址欄卻不刷新頁面的重要方法。
包括?a?標簽的點擊事件也是不會被?popstate?監聽。我們需要想個辦法解決這個問題，才能實現?history?模式。
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?=?nullfunction?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?是監聽不到地址欄的變化，所以此處需要手動執行回調函數?PopChangePopChange()}))}function?PopChange()?{console.log('location',?location)switch(location.pathname)?{case?'/page1':routeView.innerHTML?=?'page1'returncase?'/page2':routeView.innerHTML?=?'page2'returndefault:routeView.innerHTML?=?'page1'return}}</script> </body> </html>這里注意，不能在瀏覽器直接打開靜態文件，需要通過 web 服務，啟動端口去瀏覽網址。
總結
這篇文章主要知識點集中在前端路由這塊，能完全看完，并且把實現原理捋一遍，我想你應該對現代前端框架會有一個新的理解。沒有新的理解的同學，來杭州打我，我不還手。
1. JavaScript 重溫系列（22篇全）
2. ECMAScript 重溫系列（10篇全）
3. JavaScript設計模式 重溫系列（9篇全）
4.?正則 / 框架 / 算法等 重溫系列（16篇全）
5.?Webpack4 入門（上）||?Webpack4 入門（下）
6.?MobX 入門（上）?||??MobX 入門（下）
7. 120+篇原創系列匯總
回復“加群”與大佬們一起交流學習~
點擊“閱讀原文”查看 120+ 篇原創文章
總結
以上是生活随笔為你收集整理的【Web技术】943- 对前端路由的一些理解的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 大量北美散户打算把补助支票投入股市,80
- 下一篇： 时间筛选之 本周、上周、更早