javascript - webapp業務流程基本一致，多套主題（樣式基本不一樣，交互稍有偏差）管理，并且有不斷有新增主題，該如何設計組件化架構？

問題描述

一套單頁應用，由于需要接入到不同的合作方，因此需要對ui進行調整，有時需要變更一些交互，但整個流程基本一致。

目前打算用vue重構項目，已將公共的業務邏輯抽離成業務層，但編寫頁面級組件時發現，依然存在大部分可復用代碼，例如在登錄頁面上：

// viewModel｛ phoneNum, smsCode, loginbtn }

對于每個版本都存在，基本上可以用一套viewmodel去描述這個業務流程，我認為這部分重復代碼是可復用。

對于每次新增的版本而言，大多數改動的是樣式，少量的交互（也存在動很多交互，但具體業務邏輯流程不變）。

1.分割viewmodel到各子組件，構建該頁面時，引用這些業務組件拼湊，添加／修改樣式；2.子組件間事件通信或動態注冊data。3.交互變更大，新增某個子組件。

但是，一般應該先有ui組件，再有業務組件，此處設計是先有業務組件，再有ui組件。

1.先編寫ui組件2.再編寫viewmodel對應的流程邏輯3.引用ui組件，mixin對應邏輯

思路十分凌亂，還請各位給點意見，謝謝。

問題解答

首先，請區分【組件】和模塊的概念。組件僅僅用于表達 UI 交互，不應包含前后端請求等業務邏輯。

具體到問題，Sass 化的站點開發經常需要處理這類【功能可配置】的需求，常見流程：

后端開放【功能配置】接口，前端在頁面加載時獲取【當前頁面配置參數】信息

前端封裝各業務邏輯為獨立的 JS 模塊，通過 export 模塊的功能，將業務功能提供給 Vue 的 UI 層使用。

前端 UI 層根據功能配置，調用不同的模塊功能。

簡單說，開發模式和 Vue 單頁應用是一致的，追加根據功能配置定義 UI 邏輯的 JS 模塊，做好封裝即可。

至于主題動態切換的功能，同樣可用配置接口實現。例如，配置接口中存儲 style 字段標識當前業務方主題的 className 前綴，然后通過 :class 指令綁定該樣式前綴至當前頁面上，配合相應的 css 即可輕松實現主題切換。

P.S. 不要在項目開始階段使用 mixin。mixin 會使得業務邏輯難以查找與調試（混入 mixin 后可以引用不知從何位置導入的函數和變量）。按需導入業務模塊才是正確做法。

分離 ui 與 功能組件（例如：網絡請求，本地存儲），實現功能組件基本上可以自由搭配組合；

ui 組件抽取拆分，具體粒度到多小，主要看題主項目之間差異有多大，還有迭代發布速度要求；現實中并不是可復用程度越高越好，層級越多，執行效率越低，出錯機會越大，調試難度越高；需要取得一個平衡點。