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