在 ArkTS 和 ArkUI 開(kāi)發(fā)中一個(gè)頁(yè)面通常包含三部分內(nèi)容頁(yè)面展示用戶(hù)交互數(shù)據(jù)請(qǐng)求和業(yè)務(wù)處理。如果所有代碼都寫(xiě)在一個(gè)Component中隨著功能增加組件會(huì)變得越來(lái)越臃腫。MVC、MVP 和 MVVM 的作用就是將頁(yè)面、業(yè)務(wù)和數(shù)據(jù)進(jìn)行合理拆分。本文使用同一個(gè)“登錄頁(yè)面”來(lái)理解這三種架構(gòu)。一、三種架構(gòu)共同解決的問(wèn)題假設(shè)登錄頁(yè)面需要完成以下功能獲取用戶(hù)輸入的賬號(hào)和密碼校驗(yàn)賬號(hào)和密碼調(diào)用登錄接口顯示加載狀態(tài)顯示登錄成功或失敗登錄成功后跳轉(zhuǎn)頁(yè)面。如果這些邏輯全部寫(xiě)在頁(yè)面組件中EntryComponentstruct LoginPage{Stateaccount:stringStatepassword:stringStateloading:booleanfalseStatemessage:stringprivateasynclogin():Promisevoid{// 參數(shù)校驗(yàn)// 網(wǎng)絡(luò)請(qǐng)求// 錯(cuò)誤處理// 頁(yè)面狀態(tài)修改// 頁(yè)面跳轉(zhuǎn)}build(){// 頁(yè)面布局}}隨著功能增加LoginPage會(huì)同時(shí)負(fù)責(zé)UI 布局狀態(tài)管理輸入校驗(yàn)網(wǎng)絡(luò)請(qǐng)求數(shù)據(jù)轉(zhuǎn)換錯(cuò)誤處理頁(yè)面跳轉(zhuǎn)。這類(lèi)組件通常被稱(chēng)為“胖組件”。MVC、MVP、MVVM 的核心目標(biāo)就是讓不同對(duì)象承擔(dān)不同職責(zé)。二、公共的 Model 層無(wú)論采用哪種架構(gòu)Model 的職責(zé)基本一致。Model 負(fù)責(zé)數(shù)據(jù)實(shí)體網(wǎng)絡(luò)請(qǐng)求數(shù)據(jù)庫(kù)存儲(chǔ)業(yè)務(wù)數(shù)據(jù)處理底層服務(wù)能力。例如classUser{id:numbername:stringconstructor(id:number,name:string){this.ididthis.namename}}classLoginService{asynclogin(account:string,password:string):PromiseUser{if(accountadminpassword123456){returnnewUser(1,管理員)}thrownewError(賬號(hào)或密碼錯(cuò)誤)}}LoginService只負(fù)責(zé)完成登錄業(yè)務(wù)不關(guān)心頁(yè)面中使用的是Text Button TextInput LoadingProgressModel 不應(yīng)該依賴(lài)具體 UI。三、MVCController 直接協(xié)調(diào) Model 和 ViewMVC 分為Model View Controller其中Model負(fù)責(zé)數(shù)據(jù)和業(yè)務(wù)能力View負(fù)責(zé)界面展示Controller接收用戶(hù)事件調(diào)用 Model并更新 View。在 ArkUI 中Component經(jīng)常同時(shí)承擔(dān) View 和 Controller 的職責(zé)build() → View 事件處理方法 → ControllerMVC 示例EntryComponentstruct LoginMvcPage{Stateaccount:stringStatepassword:stringStateloading:booleanfalseStatemessage:stringprivateloginService:LoginServicenewLoginService()privateasynconLoginClick():Promisevoid{if(this.account.length0){this.message請(qǐng)輸入賬號(hào)return}if(this.password.length6){this.message密碼不能少于 6 位return}this.loadingtruethis.messagetry{constuserawaitthis.loginService.login(this.account,this.password)this.message歡迎你${user.name}}catch(error){this.message賬號(hào)或密碼錯(cuò)誤}finally{this.loadingfalse}}build(){Column({space:16}){TextInput({placeholder:請(qǐng)輸入賬號(hào),text:this.account}).onChange((value:string){this.accountvalue})TextInput({placeholder:請(qǐng)輸入密碼,text:this.password}).onChange((value:string){this.passwordvalue})Button(this.loading?登錄中...:登錄).enabled(!this.loading).onClick((){this.onLoginClick()})if(this.loading){LoadingProgress()}Text(this.message)}.padding(20)}}MVC 的數(shù)據(jù)流用戶(hù)點(diǎn)擊 ↓ View 觸發(fā)事件 ↓ Controller 處理邏輯 ↓ Controller 調(diào)用 Model ↓ Model 返回結(jié)果 ↓ Controller 修改頁(yè)面狀態(tài) ↓ View 重新渲染可以概括為View → Controller → Model View ← Controller ← ModelMVC 的特點(diǎn)MVC 最大的特點(diǎn)是Controller 直接讀取 View 的數(shù)據(jù)也直接修改 View 的狀態(tài)。例如this.loadingtruethis.message登錄失敗這種方式簡(jiǎn)單直接適合業(yè)務(wù)較少的頁(yè)面。但頁(yè)面復(fù)雜后Controller 邏輯容易全部堆積在組件中最終形成“胖組件”。四、MVPPresenter 通過(guò)接口命令 ViewMVP 分為Model View PresenterPresenter 可以理解為從 Controller 中抽離出來(lái)的業(yè)務(wù)協(xié)調(diào)者。它負(fù)責(zé)獲取用戶(hù)輸入校驗(yàn)數(shù)據(jù)調(diào)用 Model處理業(yè)務(wù)結(jié)果命令 View 更新頁(yè)面。MVP 的核心是Presenter 不直接操作具體 UI而是通過(guò) View 接口控制頁(yè)面。定義 View 接口interfaceLoginViewContract{getAccount():stringgetPassword():stringshowLoading():voidhideLoading():voidshowMessage(message:string):voidshowLoginSuccess(user:User):void}這個(gè)接口規(guī)定登錄頁(yè)面必須具備哪些能力。Presenter 只認(rèn)識(shí)這個(gè)接口并不知道頁(yè)面具體使用的是Text、Toast 還是 Dialog。Presenter 實(shí)現(xiàn)classLoginPresenter{privateview:LoginViewContractprivateloginService:LoginServiceconstructor(view:LoginViewContract,loginService:LoginService){this.viewviewthis.loginServiceloginService}asynclogin():Promisevoid{constaccountthis.view.getAccount()constpasswordthis.view.getPassword()if(account.length0){this.view.showMessage(請(qǐng)輸入賬號(hào))return}if(password.length6){this.view.showMessage(密碼不能少于 6 位)return}this.view.showLoading()try{constuserawaitthis.loginService.login(account,password)this.view.showLoginSuccess(user)}catch(error){this.view.showMessage(賬號(hào)或密碼錯(cuò)誤)}finally{this.view.hideLoading()}}}Presenter 中沒(méi)有出現(xiàn)任何 ArkUI 控件Component State TextInput Button Text因此 Presenter 可以脫離頁(yè)面獨(dú)立測(cè)試。MVP 頁(yè)面EntryComponentstruct LoginMvpPage{Stateaccount:stringStatepassword:stringStateloading:booleanfalseStatemessage:stringprivatepresenter:LoginPresenter|nullnullaboutToAppear():void{constview:LoginViewContract{getAccount:():string{returnthis.account},getPassword:():string{returnthis.password},showLoading:():void{this.loadingtrue},hideLoading:():void{this.loadingfalse},showMessage:(message:string):void{this.messagemessage},showLoginSuccess:(user:User):void{this.message歡迎你${user.name}}}this.presenternewLoginPresenter(view,newLoginService())}build(){Column({space:16}){TextInput({placeholder:請(qǐng)輸入賬號(hào),text:this.account}).onChange((value:string){this.accountvalue})TextInput({placeholder:請(qǐng)輸入密碼,text:this.password}).onChange((value:string){this.passwordvalue})Button(this.loading?登錄中...:登錄).enabled(!this.loading).onClick((){this.presenter?.login()})if(this.loading){LoadingProgress()}Text(this.message)}.padding(20)}}MVP 的數(shù)據(jù)流用戶(hù)點(diǎn)擊 ↓ View 將事件交給 Presenter ↓ Presenter 獲取 View 輸入 ↓ Presenter 調(diào)用 Model ↓ Model 返回結(jié)果 ↓ Presenter 調(diào)用 View 接口 ↓ View 修改頁(yè)面狀態(tài) ↓ 頁(yè)面重新渲染可以概括為View ? Presenter ? ModelMVP 的核心特征Presenter 會(huì)調(diào)用this.view.showLoading()this.view.showMessage(登錄失敗)this.view.showLoginSuccess(user)這些代碼表達(dá)的是View請(qǐng)顯示加載狀態(tài) View請(qǐng)顯示錯(cuò)誤信息 View請(qǐng)顯示登錄成功所以 MVP 的本質(zhì)是Presenter 輸出的是行為和命令。Presenter 雖然不認(rèn)識(shí)具體控件但它知道 View 可以執(zhí)行哪些操作。五、MVVMViewModel 提供頁(yè)面狀態(tài)MVVM 分為Model View ViewModelViewModel 負(fù)責(zé)保存頁(yè)面狀態(tài)接收頁(yè)面輸入處理輸入校驗(yàn)調(diào)用 Model轉(zhuǎn)換頁(yè)面數(shù)據(jù)提供頁(yè)面可以直接使用的狀態(tài)。MVVM 的核心是ViewModel 不命令 View 做什么只修改自身狀態(tài)View 根據(jù)狀態(tài)重新渲染。ViewModel 實(shí)現(xiàn)ObservedclassLoginViewModel{account:stringpassword:stringloading:booleanfalsemessage:stringprivateloginService:LoginServiceconstructor(loginService:LoginService){this.loginServiceloginService}getloginEnabled():boolean{returnthis.account.length0this.password.length6!this.loading}setAccount(account:string):void{this.accountaccount}setPassword(password:string):void{this.passwordpassword}asynclogin():Promisevoid{if(this.account.length0){this.message請(qǐng)輸入賬號(hào)return}if(this.password.length6){this.message密碼不能少于 6 位return}this.loadingtruethis.messagetry{constuserawaitthis.loginService.login(this.account,this.password)this.message歡迎你${user.name}}catch(error){this.message賬號(hào)或密碼錯(cuò)誤}finally{this.loadingfalse}}}ViewModel 中沒(méi)有Text Button TextInput LoadingProgress它只維護(hù)頁(yè)面狀態(tài)。MVVM 頁(yè)面EntryComponentstruct LoginMvvmPage{StateviewModel:LoginViewModelnewLoginViewModel(newLoginService())build(){Column({space:16}){TextInput({placeholder:請(qǐng)輸入賬號(hào),text:this.viewModel.account}).onChange((value:string){this.viewModel.setAccount(value)})TextInput({placeholder:請(qǐng)輸入密碼,text:this.viewModel.password}).onChange((value:string){this.viewModel.setPassword(value)})Button(this.viewModel.loading?登錄中...:登錄).enabled(this.viewModel.loginEnabled).onClick((){this.viewModel.login()})if(this.viewModel.loading){LoadingProgress()}Text(this.viewModel.message)}.padding(20)}}MVVM 的數(shù)據(jù)流用戶(hù)輸入或點(diǎn)擊 ↓ View 調(diào)用 ViewModel ↓ ViewModel 調(diào)用 Model ↓ Model 返回結(jié)果 ↓ ViewModel 修改自身狀態(tài) ↓ View 讀取新?tīng)顟B(tài) ↓ 頁(yè)面重新渲染可以概括為View ? ViewModel ? ModelMVVM 的核心特征ViewModel 只會(huì)修改this.loadingtruethis.message登錄失敗它不會(huì)調(diào)用this.view.showLoading()this.view.showMessage()View 根據(jù)狀態(tài)決定頁(yè)面如何顯示if(this.viewModel.loading){LoadingProgress()}Text(this.viewModel.message)因此 MVVM 的本質(zhì)是ViewModel 輸出的是狀態(tài)和數(shù)據(jù)。六、MVP 和 MVVM 的核心區(qū)別MVP 和 MVVM 都把業(yè)務(wù)邏輯從頁(yè)面組件中抽離但它們與 View 的通信方式不同。MVPPresenter 命令 Viewthis.view.showLoading()this.view.showMessage(登錄失敗)Presenter 的意思是View你現(xiàn)在顯示加載。 View你現(xiàn)在顯示錯(cuò)誤。Presenter 輸出的是行為。MVVMViewModel 修改狀態(tài)this.loadingtruethis.message登錄失敗ViewModel 的意思是我現(xiàn)在處于加載狀態(tài)。 我現(xiàn)在有一條錯(cuò)誤信息。View 根據(jù)這些狀態(tài)決定如何渲染。ViewModel 輸出的是狀態(tài)。因此可以記住Presenter 輸出行為 ViewModel 輸出狀態(tài)七、Model 和 ViewModel 的區(qū)別Model 表示真實(shí)業(yè)務(wù)數(shù)據(jù)。例如classUser{firstName:stringlastName:stringage:number0vip:booleanfalse}這些是服務(wù)器或數(shù)據(jù)庫(kù)中的原始數(shù)據(jù)。但頁(yè)面可能需要顯示張三 18歲 VIP會(huì)員ViewModel 可以將 Model 轉(zhuǎn)換成適合頁(yè)面直接展示的數(shù)據(jù)classUserViewModel{displayName:stringageText:stringvipText:stringupdate(user:User):void{this.displayName${user.firstName}${user.lastName}this.ageText${user.age}歲this.vipTextuser.vip?VIP會(huì)員:普通用戶(hù)}}所以Model真實(shí)業(yè)務(wù)數(shù)據(jù) ViewModel頁(yè)面需要的數(shù)據(jù)和狀態(tài)八、三種架構(gòu)的核心對(duì)比架構(gòu)中間層業(yè)務(wù)邏輯位置UI 更新方式MVCControllerComponent 或 ControllerController 直接修改狀態(tài)MVPPresenterPresenterPresenter 通過(guò)接口命令 ViewMVVMViewModelViewModelView 根據(jù) ViewModel 狀態(tài)渲染進(jìn)一步理解問(wèn)題MVCMVPMVVM誰(shuí)處理點(diǎn)擊事件ControllerPresenterViewModel誰(shuí)執(zhí)行輸入校驗(yàn)ControllerPresenterViewModel誰(shuí)調(diào)用 ModelControllerPresenterViewModel誰(shuí)修改 UIControllerViewView中間層輸出什么直接操作行為、命令狀態(tài)、數(shù)據(jù)是否依賴(lài)狀態(tài)綁定不強(qiáng)制不強(qiáng)制通常依賴(lài)測(cè)試難度相對(duì)較高較低較低九、ArkTS 項(xiàng)目應(yīng)該如何選擇簡(jiǎn)單頁(yè)面使用 MVC例如關(guān)于頁(yè)面靜態(tài)詳情頁(yè)簡(jiǎn)單設(shè)置頁(yè)只有少量狀態(tài)和交互的頁(yè)面。這類(lèi)頁(yè)面直接在 Component 中處理邏輯即可沒(méi)必要?jiǎng)?chuàng)建大量額外對(duì)象。流程型頁(yè)面適合 MVP例如多步驟注冊(cè)實(shí)名認(rèn)證權(quán)限申請(qǐng)復(fù)雜表單提交分步驟業(yè)務(wù)流程。這類(lèi)頁(yè)面經(jīng)常需要明確控制 View顯示下一步 隱藏當(dāng)前區(qū)域 彈出錯(cuò)誤提示 進(jìn)入成功頁(yè)面Presenter 輸出行為會(huì)比較直觀。狀態(tài)復(fù)雜的頁(yè)面適合 MVVM例如下載頁(yè)面播放器頁(yè)面聊天頁(yè)面購(gòu)物車(chē)頁(yè)面股票行情頁(yè)面多狀態(tài)列表頁(yè)面。這些頁(yè)面通常有大量狀態(tài)加載中 加載成功 加載失敗 空數(shù)據(jù) 刷新中 是否可點(diǎn)擊 下載進(jìn)度 播放進(jìn)度 未讀數(shù)量MVVM 可以把這些狀態(tài)集中放在 ViewModel 中由 View 聲明式渲染。十、為什么 MVVM 與 ArkUI 很契合ArkUI 是聲明式 UI。開(kāi)發(fā)者不是一步一步命令頁(yè)面創(chuàng)建 Loading 添加 Loading 隱藏按鈕 修改文字 移除 Loading而是描述頁(yè)面在某種狀態(tài)下應(yīng)該是什么樣子if(this.viewModel.loading){LoadingProgress()}Button(登錄).enabled(this.viewModel.loginEnabled)Text(this.viewModel.message)當(dāng)狀態(tài)變化時(shí)ArkUI 會(huì)重新計(jì)算和渲染相關(guān) UI。這與 MVVM 的狀態(tài)驅(qū)動(dòng)思想天然一致ViewModel 管理狀態(tài) View 描述狀態(tài)對(duì)應(yīng)的界面十一、任何架構(gòu)都可能變得臃腫MVC 可能出現(xiàn)Massive ComponentMVP 可能出現(xiàn)Massive PresenterMVVM 可能出現(xiàn)Massive ViewModel如果 ViewModel 同時(shí)負(fù)責(zé)網(wǎng)絡(luò)請(qǐng)求數(shù)據(jù)庫(kù)存儲(chǔ)JSON 解析頁(yè)面跳轉(zhuǎn)權(quán)限申請(qǐng)埋點(diǎn)文件下載緩存處理頁(yè)面狀態(tài)那么它同樣會(huì)非常臃腫。更合理的結(jié)構(gòu)可以繼續(xù)拆分為View ↓ ViewModel / Presenter ↓ UseCase / Service ↓ Repository ↓ 網(wǎng)絡(luò)和數(shù)據(jù)庫(kù)架構(gòu)的重點(diǎn)不是類(lèi)名而是職責(zé)是否清晰。十二、最終總結(jié)MVC、MVP 和 MVVM 都是在解決頁(yè)面代碼職責(zé)混亂的問(wèn)題。MVCView 觸發(fā)事件 → Controller 調(diào)用 Model → Controller 直接修改 View一句話總結(jié)Controller 直接協(xié)調(diào) Model 和 View。MVPView 把事件交給 Presenter → Presenter 調(diào)用 Model → Presenter 通過(guò)接口命令 View一句話總結(jié)Presenter 不直接操作控件但會(huì)命令 View 做什么。MVVMView 把輸入交給 ViewModel → ViewModel 調(diào)用 Model → ViewModel 修改狀態(tài) → View 根據(jù)狀態(tài)重新渲染一句話總結(jié)ViewModel 不命令 View只提供 View 需要的狀態(tài)。最終可以壓縮為三句話MVCController 直接修改 View。 MVPPresenter 通過(guò)接口命令 View。 MVVMViewModel 修改狀態(tài)View 根據(jù)狀態(tài)自己更新。再進(jìn)一步壓縮MVC 直接協(xié)調(diào) MVP 行為驅(qū)動(dòng) MVVM 狀態(tài)驅(qū)動(dòng)