javascript - webapp業(yè)務流程基本一致,多套主題(樣式基本不一樣,交互稍有偏差)管理,并且有不斷有新增主題,該如何設(shè)計組件化架構(gòu)?
問題描述
業(yè)務場景一套單頁應用,由于需要接入到不同的合作方,因此需要對ui進行調(diào)整,有時需要變更一些交互,但整個流程基本一致。
目前打算用vue重構(gòu)項目,已將公共的業(yè)務邏輯抽離成業(yè)務層,但編寫頁面級組件時發(fā)現(xiàn),依然存在大部分可復用代碼,例如在登錄頁面上:
// viewModel{ phoneNum, smsCode, loginbtn }
對于每個版本都存在,基本上可以用一套viewmodel去描述這個業(yè)務流程,我認為這部分重復代碼是可復用。
對于每次新增的版本而言,大多數(shù)改動的是樣式,少量的交互(也存在動很多交互,但具體業(yè)務邏輯流程不變)。
曾經(jīng)考慮:方案一:1.分割viewmodel到各子組件,構(gòu)建該頁面時,引用這些業(yè)務組件拼湊,添加/修改樣式;2.子組件間事件通信或動態(tài)注冊data。3.交互變更大,新增某個子組件。
但是,一般應該先有ui組件,再有業(yè)務組件,此處設(shè)計是先有業(yè)務組件,再有ui組件。
方案二:1.先編寫ui組件2.再編寫viewmodel對應的流程邏輯3.引用ui組件,mixin對應邏輯
思路十分凌亂,還請各位給點意見,謝謝。
問題解答
回答1:首先,請區(qū)分【組件】和模塊的概念。組件僅僅用于表達 UI 交互,不應包含前后端請求等業(yè)務邏輯。
具體到問題,Sass 化的站點開發(fā)經(jīng)常需要處理這類【功能可配置】的需求,常見流程:
后端開放【功能配置】接口,前端在頁面加載時獲取【當前頁面配置參數(shù)】信息
前端封裝各業(yè)務邏輯為獨立的 JS 模塊,通過 export 模塊的功能,將業(yè)務功能提供給 Vue 的 UI 層使用。
前端 UI 層根據(jù)功能配置,調(diào)用不同的模塊功能。
簡單說,開發(fā)模式和 Vue 單頁應用是一致的,追加根據(jù)功能配置定義 UI 邏輯的 JS 模塊,做好封裝即可。
至于主題動態(tài)切換的功能,同樣可用配置接口實現(xiàn)。例如,配置接口中存儲 style 字段標識當前業(yè)務方主題的 className 前綴,然后通過 :class 指令綁定該樣式前綴至當前頁面上,配合相應的 css 即可輕松實現(xiàn)主題切換。
P.S. 不要在項目開始階段使用 mixin。mixin 會使得業(yè)務邏輯難以查找與調(diào)試(混入 mixin 后可以引用不知從何位置導入的函數(shù)和變量)。按需導入業(yè)務模塊才是正確做法。
回答2:分離 ui 與 功能組件(例如:網(wǎng)絡(luò)請求,本地存儲),實現(xiàn)功能組件基本上可以自由搭配組合;
ui 組件抽取拆分,具體粒度到多小,主要看題主項目之間差異有多大,還有迭代發(fā)布速度要求;現(xiàn)實中并不是可復用程度越高越好,層級越多,執(zhí)行效率越低,出錯機會越大,調(diào)試難度越高;需要取得一個平衡點。
