前端基礎設施-封裝項目路由模塊

前言

react項目鑑權怎麼辦？路由跳轉沒有回調怎麼辦？路由懶加載怎麼辦？接下來逐個分析分析一下。

分析

一個實用的路由模塊應該至少包括如下幾個功能

1. 能自動根據路由配置按需加載
2. 能提供相似beforeEnter，afterEnter等生命週期鉤子
3. 生命週期鉤子支持異步操做/阻塞後續加載，這個特性在鑑權相關場景有很重要的做用
4. 能提供過場動畫設置
5. 配置簡單，方便調用

定義

先來看一下定義，要知足以上要求，這個類至少由如下幾個部分組成。

接下來看各個功能點分析

按需加載

按路由進行代碼分割而後按需加載，適合大多數優化場景，並且這種方式與業務代碼徹底解耦，雖然有時分割得比較粗糙，但確實是一把梭的普適方案。不過要實現打包後的代碼分割至少須要打包工具的支持，幸運的是webpack根據es規範實現相關的APIimport()，import()返回一個Promise，完成加載後回調。

如今是在封裝react-router，咱們還須要@
babel/plugin-syntax-dynamic-import這個插件在由babel解析成的AST中識別出import()相關的語法。

ok，思路有了，咱們能夠這樣去配置路由，這樣當咱們解析配置拿到component時，纔去調用import，來達到按路由分割的效果。

生命週期

其實這個過程就是對傳入的component進行一層包裝，而後在調用component的各個階段，回調提早埋下的生命週期鉤子函數。

好比像BeforeEnter和Mounted這兩個生命週期就能夠像這樣埋下對應的鉤子

支持異步操做/阻塞後續加載

不少時候，好比鑑權，進入頁面前必要的初始化操做，都是異步的行爲，而且異步行爲結束前不容許頁面加載出來。

這也很好解決，使用async await便可

使用的時候也很方便，像須要處理異步操做的時候，返回一個Promise就行。嫌麻煩的話也能夠封裝成vue-router那樣，在參數位置給你一個next()去作一下回調。

過場動畫

過場動畫的設置與生命週期差很少，只須要在開始加載路由組件時去設置顯示，加載完成時設置隱藏便可。

核心

ok，接下來看看這個包裝函數是怎麼寫的

核心內容其實就這麼多了，配置讀取處理的過程還有類型的聲明可看的完整代碼，源碼是用ts編寫的。

如何使用

由配置與渲染兩個部分組成，簡單易用。

路由原理

不會吧不會吧，就是一句話加一張圖就能夠講完的事情。

前端路由的核心思路就是經過對瀏覽器跳轉相關的事件作一個代理，匹配到對應路由以後替換dom節點，來完成路由的切換。

結束

至此，前端路由已經沒有什麼神祕的地方了，在不一樣的時間節點回調各類奇奇怪怪的生命週期都沒問題。