問(wèn)題描述

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

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

// viewModel｛ phoneNum, smsCode, loginbtn }

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

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

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

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

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

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

問(wèn)題解答

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

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

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

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

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

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

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

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

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

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