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

Question

業務場景

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

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

 // viewModel
｛ 
    phoneNum, smsCode, loginbtn
 }

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

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

曾經考慮：

方案一：

1.分割viewmodel到各子组件，构建该页面时，引用这些业务组件拼凑，添加／修改样式；
2.子组件间事件通信或动态注册data。
3.交互变更大，新增某个子组件。

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

方案二：

1.先编写ui组件
2.再编写viewmodel对应的流程逻辑
3.引用ui组件，mixin对应逻辑

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

Answer 1

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

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

1. 後端開放【功能配置】接口，前端在頁面加載時獲取【當前頁面配置參數】資訊

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

3. 前端 UI 層依功能配置，呼叫不同的模組功能。

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

至於主題動態切換的功能，同樣可用配置介面實作。例如，設定介面中儲存 style 欄位標識目前業務方主題的 className 前綴，然後透過 :class 指令綁定該樣式前綴至目前頁面上，配合對應的 css 即可輕鬆實現主題切換。

P.S. 不要在專案開始階段使用 mixin。 mixin 會讓業務邏輯難以找到與偵錯（混入 mixin 後可以引用不知從何處匯入的函數和變數）。按需導入業務模組才是正確做法。

Answer 2

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

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