[TOC] ## 前言 通過本問將看到我在vue的項目中，進行的一系列的項目優化，然后看到不同的維度將這些點進行分類。 這里更多的指的是設計考慮的思路，是大綱，暫不涉及實際代碼。 ## 項目架構 ### 分模塊設計思想 在接到項目之后，首先將store,router，xhr的對應三個部分分別分子模塊，每個子模塊的劃分維度有所差別。 - 其中store劃分modules劃分維度是數據關聯性，由于store本身支持modules的組合，而且使用是混合在一起的，所以我們還是會在index中將模塊進行混入的。 - 其中router是按照業務進行分模塊的，或者說是按照頁面維度分的，每個一級路由分一個路由模塊，二級路由為頁面名稱，其中將一級路由設置為文件夾名稱，二級路由路徑與頁面名稱同名，為了簡化這部分，一級路由的名稱定為‘scope’，而且為了同時支持懶加載和優化引入組件的寫法，寫了_import的優化方法，可以批量按照文件名引入對應的組件，在生產環境將進行路由代碼分割。然后不同模塊也是最后匯總到router的modules中。 - 其中xhr的部分按照后端的微服務進行拆分模塊，方便查看和維護。按照后端的接口層次再決定是否劃分二級對象屬性，其中暴露出來的方法與后端同名，后續也是決定采用easymock進行批量生成api方法來優化這部分手寫代碼的工作。考慮到幾乎沒有一個頁面或者組件會用到多余兩個的api微服務請求，所以這就決定了我在index.js中并沒有收集聚合每個業務的api，而是選擇開發時按需加載。而對于通用性比較高的api，我一方面會定義在index.js中，另一方面會把這部分數據暴露在vuex中來達到目的。 - 額外介紹，除了以上三個，我針對src根目錄也設置了過濾器的分業務模塊實現方案。這部分由于各個業務耦合情況比較少，所以也是僅僅針對核心的工具過濾器暴露在index.js中，其他的都是按需引入。 ### 業務內公共組件 與有的同學考慮不同的是，我在寫一些組件的時候，針對業務性比較強，但是針對當前業務公用的一些拆分組件會定義在每個業務的components目錄下，而不是放在src/components,我稱之業務內公共組件。 ### 業務內枚舉 與 全局枚舉 其實很多時候會遇到枚舉數據，或者是后端定義好的，或者是前端定義好的，或者是接口請求的但是基本不做更改的。也許枚舉字段少的也還好，但如果一個數據項有超過十個枚舉項，有超過2個頁面使用的時候，你應該考慮的是單獨的放在枚舉字典文件中去維護。 那么首先，我是建議基于這個業務的枚舉建在業務的根目錄下新建一個enum的js枚舉文件，單獨用來承載業務中的枚舉。但較多時候會有一些比較讓人煩惱的部分： 1 業務中的枚舉發現另外的頁面中也有用，不單單屬于這個一級業務頁面。那么你可以這樣考慮下：首先肯定是維護一份數據的，那么維護在哪里，如果是核心業務，那就維護在全局枚舉倉庫，然后業務中進行按需引入或者改裝。如果是周邊業務，偶爾用下，我個人覺得維護在業務中的枚舉是比較好的。 2 枚舉與過濾器與字段翻譯的關系。其實枚舉字段不僅僅是用于做枚舉的，還必然的會充當一些下拉框，顯示值的遍歷來源，也可以當做字段翻譯的翻譯來源，同時還可以當做我們一些業務字段的過濾器。這部分理解好之后，對于我們優化整理項目中的業務數據類型有著極大的好處。 3 全局枚舉業務過濾器，通用性過濾器，當然這些過濾器功能除了按照基本的部分，還會按照業務中收集到的部分進行業務過濾器的維護。同時也作為對應的方法來獲得對應值轉換值的語法，一者兩得。 ### common組件 - 純ui組件，elementui組件進行進一步的封裝，按照其官方的維護方式進行自己項目需求的一些分類。 - 布局內基本布局組件，這里面包括了頁面架構，菜單，頂部，主題頁面。 - 可分解于任何頁面任何位置的特征業務組件，支持其展現到任何位置任何頁面中，只要求其對應的業務數據要求即可。 - 功能性組件，包括圖片上傳，自定義的模態框 ### theme 為了維護基本的風格，設置了一些基本的主題變量，然后針對elementui的核心組件修改器風格顏色。 ### axios攔截 針對axios的部分進行請求前后攔截，針對特定狀態碼進行翻譯，在這個設置中進行vuex必要的接口token必要性的驗證以及引入提示組件進行必要的接口提示。 針對業務的整合需求，進行接口的串聯、并聯的請求優化。 ### mixins 將常用的優化方法進行mixins進行混入。 ## 典型代碼段優化 ### 用數據做邏輯，減少標簽的顯示控制 看到很多前端會根據數據的某個字段，然后寫v-if 決定這個標簽是否顯示，然后不是這個字段，另外一個顯示。建議在不管是對象還是數組的顯示控制中，直接根據需要的數據進行數據改裝，不用多條件判斷類似的組件渲染。這種代碼簡單的可以用一個標簽承載，內容的顯示區別簡單的可以用三目，復雜的就應該在js方法中進行改造完之后或者過濾器實現。 ``` <span v-if="sex===male" >男</span> <span v-else >女<span> ``` ### 揮之不去的靜態復制寫法 vue提供了良好的數組循環和對象循環的方法，在我們實現類似的頁面需求的時候，不建議再和之前一樣，寫很多維護性不強的頁面列表了。把它用一個數組維護，然后v-for循環實現，對于因為大量的這種代碼占據篇幅的話，說明還是 沒有很好的理解vm的含義。 ``` <option value='1'>1</option> <option value='2'>2</option> <option value='3'>3 </option> ``` ### 除了if,else想不到其他邏輯方式 然后就看到一大波人會if，age===0,判斷，else if 等等。其實除了這些你還有switch,對象屬性字面量方式，switch方式，等等。不要讓if,else的嵌套循環成為我們寫代碼的唯一方式。 ``` <option value='0'>0</option> <option value='18'>未成年</option> <option value='60'>老年 </option> ``` ## 待更新中