好的業務組件設計

好的業務組件設計

一個好的業務組件必然是邏輯清晰以及方便修改維護。

下面以 Vue 爲例子進行進行概念上的簡單說明。

一些涉及到的概念

1. 數據驅動UI
2. 單向數據流
3. 有限狀態機

模板

模板應保證邏輯清晰，業務複雜的部分可拆分紅獨立的業務組件又或者經過 computed 組裝數據關係。

不該該在模板寫邏輯語句，僅使用簡單的條件判斷以及方法調用或表達式。

狀態的設計(data、computed)

狀態分全局狀態以及本地狀態，全局狀態就是 sotre(Vuex 或者本身另外定義的 Vue 對象)，本地狀態包括數據(data)以及根據數據響應的狀態(computed)。

須要根據 data、store 或者 其餘 computed 響應的同步狀態都屬於 computed，computed 必須是同步數據，computed 內部禁止任何異步操做。

全部須要異步獲取以及沒法由其餘數據響應變化的數據都是 data。

有時候能夠把 computed 做爲一個不可寫屬性使用，返回一個常量或者其餘想輸入到模板的值。

原則是 data 的結構應清晰簡單，數據之間的關係放在 computed。

數據的處理

服務器獲取的數據不要在業務組件直接寫請求，應經過 services 封裝。

數據單位應保存一致(例如時間使用 13 位，金錢使用分)，須要進行轉換的數據按就近原則進行處理：若是是服務器數據在 services 進行轉換，若是是用戶輸入的數據，經過 computed 進行 get/set 處理。

發送到服務器的數據也是同樣，應在 services 裏面處理數據的單位以及一些簡單的判斷。

保證代碼的可維護性

1. 代碼、數據邏輯之間的關係應保持簡單與一致，不該存在多種不一樣的業務關係模型。
2. 單向數據流。
3. 數據處理以及操做分開。
4. 交互狀態複雜的業務組件應用有限狀態機以及 computed。