五顏六色的程式碼：論程式碼的正確位置

凌霄光發表於2019-02-21

問題描述

最近在做一個需求，多個地方的學員姓名保持一致，從技術角度來看就是多個元件中使用從store中取的同一份資料，並且要格式化。我所採用的方案是 store層的getter + 元件層的 computed和filter ，因為是多個元件都用到這些computed和getter，於是封裝了一個mixin。

五顏六色的程式碼：論程式碼的正確位置
mixin：

import {mapGetters} from 'vuex';
export default {
    computed: {
       ...mapGetters(['getStudentInfo'])
    },
    filters: {
        formatStudentName(stuName = '') {
            return stuName.slice(0, 5);
        }
    }
}
複製程式碼

元件的模板裡：

  <div>{{getStudentInfo('xxxx') | formatStudentName}}</div>
複製程式碼

整體思路就是這樣，涉及到的元件比較多，因為我還有別的需求要做，剩下的讓小夥伴繼續做了。

今天快下班的時候我問了下這裡進度咋樣了，他說做完了，但是不是用的我那種方式，他覺得每個元件都要寫filter太繁瑣了，很多元件都要這麼寫

{{getStudentInfo('xxxx') | formatStudentName}}
複製程式碼

於是他修改了store層的getter，把filter的邏輯放到了getter裡去：

{
 getters:{
   getStudentInfo(state) => (id, key = 'name', formatFn) {
     formatFn = formatFn || (str) => str.slice(0,5) 
     return formatFn(state.studentInfo[id][key]);
   }   
 }
}
複製程式碼

而且沒使用mixin，元件裡面直接使用了這個getter

{
  computed: {
    ...mapGetters(['getStudentInfo'])
 }
}
複製程式碼
<div>{{getStudentInfo(id)}}</div>
複製程式碼

分析思路

他覺得這樣省掉了呼叫filter的程式碼，但我卻覺得這種方式不是正確的。

因為這裡的格式化是用於顯示給使用者的，是viewmodel層的邏輯，就算是不想寫filter，也應該是在元件層處理，比如新增一個computed。

import {mapGetters} from 'vuex';
export default {
    computed: {
       ...mapGetters(['getStudentInfo']),
       getFormatedStudentName() {
           return (id) => this.getStudentInfo(id).slice(0, 5);
       }
    }
}
複製程式碼
<div>{{getFormatedStudentName}}</div>
複製程式碼

元件裡面也同樣省掉了filter，但是卻不是通過修改store層的getter來做到的。

先不說這裡去掉filter有沒有必要，關於這段格式化的邏輯應不應該放在getter裡，我們進行了討論，確實，放在getter裡看上去也沒啥問題，但是這是不那麼正確的，並且會導致理解成本的增加。

程式碼的顏色

如果把viewmodel層、view層、model層的程式碼分別標記成紅綠藍三種顏色，那麼會清晰的看見，在model層裡出現了一些viewmodel層的程式碼。

五顏六色的程式碼：論程式碼的正確位置

我們沒法對程式碼標記顏色，但是我們應該有程式碼分層的意識，按照職能的不同，把程式碼存放到不同的層次，不同的模組，這樣的程式碼才是整潔易維護的，而不是像大染缸一樣，分不清層次，沒有約定和規矩。

我們對使用者的輸入有嚴格的校驗，後端介面對傳入的引數也會校驗，對於資料，我們會保證正確的基礎上，分類存放。其實程式碼也同樣，在正確的基礎上，按照職能和架構的不同，把程式碼歸類到不同層次不同模組，涇渭分明，井井有條，這樣的程式碼才是有秩序的易維護的。

總結

討論一段只用作顯示的格式化資料的邏輯應該放在store層還是元件層，分析過程中，通過對程式碼標記了顏色，理清了程式碼所應在的位置。

我們接觸到的很多難維護的程式碼就像一個大染缸，很多程式碼都放錯了位置或者封裝錯了形式，雖然能完成功能，卻充滿著各種hack的味道，程式碼難讀不說，而不敢隨便改，怕牽一髮而動全身。

好的程式碼應該是涇渭分明的，就算程式碼五顏六色，架構複雜，卻絲毫不會亂。

相關文章