最近接手了公司兩個專案，一個PC端后臺管理系統，一個app端專案，當然使用的依然是熟悉“Vue全家桶”那套！但是，當我打開專案時，里面的代碼是這樣的（路由模塊）：
就是所有路由配置都放到一個index.js中，這多少還是讓我有點驚呆的，顯然，專案會越做越大，模塊會越加越多，那這種不分模塊的架構方式明顯給以后帶來很大維護困難，index.js檔案會變得例外龐大...
所以，我便想趁現在代碼量還在可控的情況下趕緊優化一下吧！于是，跟領導說明了用意，并很快得到了首肯！所以就開始動起來了~
1. 分模塊：
首先，當然是要把不同模塊的路由分離開來了（本來想只把新加入的功能模塊做處理，老模塊保留現狀，因為復制、粘貼也是很耗體力的，但是，想想所幸現在專案還不大，再加上目前雖然不年輕但還算力壯，且還稍微有點強迫癥的催動下，所以還是決定將現在有代碼拆開...）,心里小小斗爭一下之后，就開干了！于是，就有了這樣的結構：
同時，讓index.js的全部代碼縮減成了這樣：
為啥你module里的檔案名會是.routes.js 呢？這個嘛...
其實是個小技巧，并不是便性規定， 1. 為了方便正則匹配，2. 為了標識檔案的功能，讓人一看就是知道這是路由檔案...
啥正則匹配？
2. 自動匯入：
為啥能將index.js縮減成這樣呢？其實就是代碼所示，利用了require.context來實作了自動匯入...
require.context：是一個webpack提供的api,通過執行require.context函式遍歷獲取到指定檔案夾（及其下子檔案夾）內的指定檔案，然后自動匯入，
語法：require.context(directory, useSubdirectories = false, regExp = /^.//); 三個引數分別代表：
. directory 讀取的目錄；
. useSubdirectories 是否遍歷目錄的子目錄
. regExp 匹配檔案的正則運算式 （即你要讀取目錄下什么型別的檔案，就是這個正則匹配）
require.context() 回傳一個函式，該函式包含三個屬性 resolve()、keys()、id 具體定義請自行到百度上谷歌一下！
我們這里用到了keys()： 回傳匹配成功模塊的名字組成的陣列：
importAll()是對代碼進行了一個封裝，里面的r.keys() 得到的將是：
['./action.routes.js', './apply.routes.js', './base.routes.js', './common.routes.js', './cost.routes.js', './liveActivity.routes.js']
可以看到拿到的就是module目錄里的所有檔案；
拿到陣列檔案之后便可對其進行forEach，然后通過 `r(key).default`拿到檔案的內容也就是各種模塊寫好的路由配置，從而也就實作了路由模塊自動匯入功能，從此，每次只需要要將新加的xxx.routes.js檔案放入module目錄（也可以是里面的子目錄），也就不必手動再import了！
其實，require.context，還能實作其他模塊的自動匯入功能，比如：Vue官網提到的實作基礎組件的全域注冊（Vue官網的示例），以及對ajax Api模塊化管理并自動引入等等...
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/138820.html
標籤：JavaScript
上一篇：babel環境安裝與編譯
下一篇：Vue3中的大熱門——其他技術