vue專案實踐思考003
通過本問將看到我在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> 複製程式碼