前言
最近幫組里面新人做code review, 順帶回顧了一下以前項目的代碼。問題是真的不少，雖然盡量統(tǒng)一規(guī)范，但每個人的代碼風(fēng)格還是有所區(qū)別的，很難讓人滿意。在項目開發(fā)的時候，我也經(jīng)常會遇到有些部分可以用更有效率和易維護的代碼實現(xiàn)，但是因為項目進度的原因選擇了更省事的寫法，雖然后來會在有時間的時候回去優(yōu)化，但不能否認(rèn)的是大部分還是沒有時間再去修正的。所以我系統(tǒng)總結(jié)了一下我在Vue開發(fā)中遵循的規(guī)則，希望自己能夠嚴(yán)格規(guī)范代碼，同時也分享給大家參考。
項目結(jié)構(gòu)
建項目是技術(shù)確認(rèn)后正式開發(fā)的第一步，一個合理的項目目錄結(jié)構(gòu)會在規(guī)范整個項目的代碼風(fēng)格上有很大幫助。首先先看一下我用vue-cli建的vue項目
在這里我只介紹src內(nèi)部目錄
- api
這個目錄是用來封裝和服務(wù)端交互的api的，比較通用的寫法 - assets
用來存放圖片，字體等等靜態(tài)資源 - business
這個目錄是用來存放視圖和業(yè)務(wù)分離后業(yè)務(wù)部分的代碼的，我會在下面詳細(xì)介紹 - components
用來存放一些封裝好的公共組件，或基礎(chǔ)組件。如果是只在某個頁面單獨使用的組件，一般放到views目錄下。 - lang
用來存放國際化的多語言相關(guān)的文件 - model
該目錄下一般用來存放兩種model,一種是頁面的viewModel,一種是網(wǎng)絡(luò)請求的數(shù)據(jù)model,我會在下面詳細(xì)介紹 - router
存放vue-router的路由文件 - store
存放vuex的store文件 - utils
該目錄下一般放一些工具類或靜態(tài)數(shù)據(jù)，比如說對日期處理的封裝函數(shù)，還有靜態(tài)的變量名之類的數(shù)據(jù)。 - views
該目錄下放項目的主要代碼，一般來說該目錄下的一個子目錄對應(yīng)一個頁面。
代碼分離
在Vue開發(fā)中，我見過包括我自己在內(nèi)的很多開發(fā)人員都會犯的一個錯誤，那就是視圖代碼和業(yè)務(wù)代碼過度耦合。非常簡單的一個例子，業(yè)務(wù)比較復(fù)雜的頁面的，寫到后期經(jīng)常會出現(xiàn)一個.vue文件里面寫了最少上千行代碼，導(dǎo)致無論繼續(xù)開發(fā)或者是后期維護都變得非常費時費力，究其原因是因為把很多業(yè)務(wù)、數(shù)據(jù)上的處理都放到了這一個.vue文件里面。
要想解決這個問題，那就必須要分離代碼，在和視圖有關(guān)的.vue文件中，只允許存在和視圖UI操作有關(guān)的代碼。下面是一個對模板增刪改查的.vue文件的分離寫法。
在這里我將Template.vue這個文件有關(guān)的所有業(yè)務(wù)處理，以及進行網(wǎng)絡(luò)請求的數(shù)據(jù)處理都放到business目錄下的template.business.js這個文件中，在.vue文件中只保留對UI對基本操作。而在相應(yīng)的template.business.js中，如果業(yè)務(wù)很復(fù)雜的話，也可以對這個js文件進行模塊劃分，這樣對于相應(yīng)業(yè)務(wù)的邏輯會更加清晰，讓復(fù)雜的項目代碼也會具有較高的可維護性和易讀性。
數(shù)據(jù)處理
在前端開發(fā)中，當(dāng)通過網(wǎng)絡(luò)請求獲取、提交數(shù)據(jù)時，接口提交、返回當(dāng)數(shù)據(jù)格式和頁面渲染時用的當(dāng)數(shù)據(jù)格式很有可能并不相符，所以對于這部分一般需要做數(shù)據(jù)轉(zhuǎn)換。數(shù)據(jù)轉(zhuǎn)換我一般會封裝到model目錄下，每一個網(wǎng)絡(luò)請求都對應(yīng)于一個數(shù)據(jù)Model和一個View Model,在進行http請求獲取數(shù)據(jù)時生成一個普通的數(shù)據(jù)Model的實例，然后轉(zhuǎn)換成適合頁面渲染的View Model。當(dāng)進行數(shù)據(jù)提交時，將頁面的view Model轉(zhuǎn)換成普通的數(shù)據(jù)Model然后進行http請求。
總結(jié)
以上的這些方法在開發(fā)的時候稍微麻煩一些，肯定不如直接在.vue文件里直接寫要方便。但是當(dāng)項目開發(fā)到后期，代碼量越來越多時，或者有需求要改動時，就會發(fā)現(xiàn)這些額外的工作是完全有價值的。
