久久r热视频,国产午夜精品一区二区三区视频,亚洲精品自拍偷拍,欧美日韩精品二区

您的位置:首頁技術(shù)文章
文章詳情頁

javascript - webapp業(yè)務流程基本一致,多套主題(樣式基本不一樣,交互稍有偏差)管理,并且有不斷有新增主題,該如何設(shè)計組件化架構(gòu)?

瀏覽:124日期:2022-12-06 18:47:06

問題描述

業(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)試難度越高;需要取得一個平衡點。

標簽: JavaScript
主站蜘蛛池模板: 兴业县| 石渠县| 翁牛特旗| 阿克苏市| 三亚市| 鄂托克旗| 育儿| 特克斯县| 灵台县| 襄垣县| 井陉县| 平江县| 于都县| 林州市| 买车| 安远县| 蒙自县| 惠安县| 马公市| 日照市| 沙湾县| 南平市| 来宾市| 庄浪县| 于田县| 滨海县| 钟山县| 韩城市| 焉耆| 巴彦县| 南昌县| 昌邑市| 句容市| 罗源县| 广河县| 岐山县| 康定县| 望江县| 保山市| 新宁县| 阿尔山市|