問題描述

一套單頁應(yīng)用，由于需要接入到不同的合作方，因此需要對ui進(jìn)行調(diào)整，有時需要變更一些交互，但整個流程基本一致。

目前打算用vue重構(gòu)項(xiàng)目，已將公共的業(yè)務(wù)邏輯抽離成業(yè)務(wù)層，但編寫頁面級組件時發(fā)現(xiàn)，依然存在大部分可復(fù)用代碼，例如在登錄頁面上：

// viewModel｛ phoneNum, smsCode, loginbtn }

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

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

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

但是，一般應(yīng)該先有ui組件，再有業(yè)務(wù)組件，此處設(shè)計(jì)是先有業(yè)務(wù)組件，再有ui組件。

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

思路十分凌亂，還請各位給點(diǎn)意見，謝謝。

問題解答

首先，請區(qū)分【組件】和模塊的概念。組件僅僅用于表達(dá) UI 交互，不應(yīng)包含前后端請求等業(yè)務(wù)邏輯。

具體到問題，Sass 化的站點(diǎn)開發(fā)經(jīng)常需要處理這類【功能可配置】的需求，常見流程：

后端開放【功能配置】接口，前端在頁面加載時獲取【當(dāng)前頁面配置參數(shù)】信息

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

前端 UI 層根據(jù)功能配置，調(diào)用不同的模塊功能。

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

至于主題動態(tài)切換的功能，同樣可用配置接口實(shí)現(xiàn)。例如，配置接口中存儲 style 字段標(biāo)識當(dāng)前業(yè)務(wù)方主題的 className 前綴，然后通過 :class 指令綁定該樣式前綴至當(dāng)前頁面上，配合相應(yīng)的 css 即可輕松實(shí)現(xiàn)主題切換。

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

分離 ui 與 功能組件（例如：網(wǎng)絡(luò)請求，本地存儲），實(shí)現(xiàn)功能組件基本上可以自由搭配組合；

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