簡單場景
左側(cè)是一個列表忆肾，列表的單項點擊編輯按鈕，右側(cè)表單則顯示對應(yīng)數(shù)據(jù)。
之前的設(shè)計方式
按照業(yè)務(wù)區(qū)域來完成業(yè)務(wù)組件的劃分蹂风，并且將各個業(yè)務(wù)區(qū)域的邏輯埋在對應(yīng)的業(yè)務(wù)組件中。
同時重度依賴mobx強(qiáng)大的數(shù)據(jù)監(jiān)聽能力乾蓬，將操作數(shù)據(jù)的業(yè)務(wù)邏輯和數(shù)據(jù)實體集中在一起惠啄。
該頁面組件的整體結(jié)構(gòu)可能如下：
在這樣的業(yè)務(wù)組件結(jié)構(gòu)設(shè)計下，頁面的數(shù)據(jù)流向及處理流程如下圖：
問題點
數(shù)據(jù)流向
- 始終從數(shù)據(jù)實體開始任内，經(jīng)過各個組件撵渡，最終回流至數(shù)據(jù)實體中，導(dǎo)致一份數(shù)據(jù)在不同的組件中留存死嗦。
- 數(shù)據(jù)大部分時候是雙向流動趋距，子組件將數(shù)據(jù)處理為業(yè)務(wù)數(shù)據(jù)狀態(tài)返回給父級，就會導(dǎo)致數(shù)據(jù)流向復(fù)雜且不可控越除。
數(shù)據(jù)處理流程
- 如果數(shù)據(jù)是未經(jīng)業(yè)務(wù)邏輯處理的原始數(shù)據(jù)棚品，就會導(dǎo)致所有途經(jīng)的組件內(nèi)部都必須增加業(yè)務(wù)邏輯處理成為業(yè)務(wù)組件。
- 對于關(guān)鍵業(yè)務(wù)節(jié)點的組件廊敌，需要銜接上下游組件铜跑，就會導(dǎo)致關(guān)鍵組件必須處理上下游業(yè)務(wù)流程。
- 處理流程中觀測的數(shù)據(jù)很可能是數(shù)據(jù)實體中同一個可觀測數(shù)據(jù)骡澈，就會導(dǎo)致處理流程可能會被其他改變所影響锅纺。
耦合
- 各層級的組件與業(yè)務(wù)邏輯非常耦合，即便分拆肋殴，也只會得到一個只適用于某個特定業(yè)務(wù)流程的UI組件囤锉，無法真正通用坦弟。
- 在關(guān)鍵業(yè)務(wù)節(jié)點需要銜接上下游組件，就會導(dǎo)致不同組件間業(yè)務(wù)性耦合增加官地，使用一個必須一齊使用酿傍。
- 由于各個組件的行為與業(yè)務(wù)關(guān)聯(lián)較深，就會導(dǎo)致頁面行為和交互較固定驱入，在面對頁面交互修改時赤炒，只能修改所有組件行為和交互。
協(xié)作
- 整個流程需要各個組件開發(fā)期間緊密配合亏较，就會導(dǎo)致新的團(tuán)隊成員介入開發(fā)時莺褒，完全無法快速理清關(guān)系。
- 組件與數(shù)據(jù)實體之間的對應(yīng)關(guān)系很隱秘雪情，一個數(shù)據(jù)實體可能在多個組件中有對應(yīng)關(guān)系遵岩，就會導(dǎo)致新的修改會影響到其他組件。
- 業(yè)務(wù)邏輯散落在各個地方巡通，可能獨自成一個文件尘执，也可能在相關(guān)行為的組件中，就會導(dǎo)致需求修改時宴凉，各個地方都要完成修改誊锭。
如何拆解
基于重業(yè)務(wù)組件輕UI組件的策略進(jìn)行拆解。
重業(yè)務(wù)組件
將業(yè)務(wù)處理的流程完全集中在某一個層級的組件當(dāng)中跪解，盡可能將一個業(yè)務(wù)領(lǐng)域的流程在一個組件內(nèi)實現(xiàn)炉旷。
通過對外暴露業(yè)務(wù)能力開放自身的數(shù)據(jù)處理流程，例如數(shù)據(jù)調(diào)用能力叉讥、業(yè)務(wù)邏輯能力等窘行。
封閉自己的渲染方法，例如渲染時的數(shù)據(jù)狀態(tài)图仓、渲染的內(nèi)容罐盔、渲染的模版等。
封閉自己的數(shù)據(jù)流向救崔，例如向子組件傳遞數(shù)據(jù)惶看、向子組件傳遞回調(diào)方法等。
輕UI組件
將非業(yè)務(wù)處理流程的組件完全抽離業(yè)務(wù)
通過對外暴露觸發(fā)事件開放自身的UI能力六孵，例如UI行為事件纬黎、UI交互事件等。
封閉自己的渲染方法劫窒，例如渲染時的數(shù)據(jù)狀態(tài)本今、渲染的內(nèi)容、渲染的模版等。
重設(shè)計
按照如上思想重新設(shè)計剛才的案例
該頁面組件的整體結(jié)構(gòu)如下：
在這樣的業(yè)務(wù)組件結(jié)構(gòu)設(shè)計下冠息，頁面的數(shù)據(jù)流向及處理流程如下圖：
特點
數(shù)據(jù)流向
- 在業(yè)務(wù)組件中使用內(nèi)部的數(shù)據(jù)狀態(tài)作為唯一數(shù)據(jù)實體挪凑。
- 數(shù)據(jù)流向為單向流動，業(yè)務(wù)組件間不流動數(shù)據(jù)逛艰。
數(shù)據(jù)處理流程
- 業(yè)務(wù)邏輯完全集中于業(yè)務(wù)組件內(nèi)部躏碳。
- 通過業(yè)務(wù)組件對外暴露的業(yè)務(wù)能力，從而對外開放數(shù)據(jù)處理的流程散怖。
耦合
- UI組件無業(yè)務(wù)邏輯菇绵，僅處理渲染相關(guān)流程，與業(yè)務(wù)流程完全解耦杭抠。
- 業(yè)務(wù)組件通過暴露能力在業(yè)務(wù)入口的頁面組件中耦合脸甘，減輕耦合程度恳啥，將耦合封閉在業(yè)務(wù)范圍內(nèi)偏灿。
- 業(yè)務(wù)組件僅關(guān)注業(yè)務(wù)領(lǐng)域，通過調(diào)用不同UI組件的UI能力完成業(yè)務(wù)行為的實現(xiàn)钝的，讓業(yè)務(wù)流程與UI行為解耦翁垂。
協(xié)作
- 一個業(yè)務(wù)流程可以在同層級的業(yè)務(wù)組件中完整體現(xiàn)，方便接手的團(tuán)隊成員梳理硝桩。
- 業(yè)務(wù)處理邏輯集中在業(yè)務(wù)組件層沿猜，不會散落各處難以查找。
總結(jié)
每個業(yè)務(wù)領(lǐng)域都有自己的業(yè)務(wù)流程模型碗脊，但不能因為業(yè)務(wù)流程模型的復(fù)雜啼肩，就放棄拆分，甚至將復(fù)雜的業(yè)務(wù)流程塞入普通的組件中衙伶。
業(yè)務(wù)需求或?qū)崿F(xiàn)雖然復(fù)雜多變祈坠，但對于企業(yè)級的業(yè)務(wù)系統(tǒng)來說，業(yè)務(wù)流程或者業(yè)務(wù)模型是固定的矢劲，迅速找到以不變應(yīng)萬變之法才是唯一的破局之路
這套重業(yè)務(wù)輕UI的策略其實就是赦拘，將業(yè)務(wù)邏輯結(jié)合單一的UI能力整合后，轉(zhuǎn)換為強(qiáng)大的業(yè)務(wù)能力來提升的多變性芬沉，從而達(dá)到可以快速支持多變的業(yè)務(wù)需求躺同。
