【模式】MVC、MVP、MVVM、MV、MVM

参考：

deepseek、豆包 

 

一 MVC

二 MVP

三 MVVM

四 MV 

五 MVM 

 

一 MVC

MVC就是Model、View、Control组成，开源框架有Puremvc。

Model：管理数据和业务逻辑

View：显示界面

Control：接收用户输入，协调model和view

 

mvc算是比较常见的框架了，开源的就有puremvc，分三层也算合理，不会某一层代码特别多。

 

以用户登录为例子

 

View.ts：

class View{

    onLoad(){
        loginBtn.on(Node.Event.TOUCH_END, this.onLoginBtn, this);
        event.on(EventConst.LOGIN_SUCCESS, this.onLoginSuccess, this);
        event.on(EventConst.LOGIN_FAIL, this.onLoginFail, this):
    }
     
     //点击登录按钮
     onLoginBtn(){
            Control.reqLogin(username, password);
     }

     onLoginSuccess(){
        console.log("登录成功")
    }

    onLoginFail(){
        console.log("登录失败");
    }
}

　　

Control.ts：

class Control{
    
    constructor(){
        event.on(EventConst.REV_LOGIN, this.revLogin, this);
    }
    
    //请求登录
    reqLogin(username, password){
        const isValid:boolean = Model.valid(usename, password);
        if(isValid){
             Websocket.send();
        }else{
             console.log("用户名密码错误")
        }
    }
    
    //接收登录
    revLogin(data){
        if(登录成功){
           Model.handleLoginData(data);
           event.emit(EventConst.LOGIN_SUCCESS);
        } else{
           event.emit(EventCont.LOGIN_FAIL);
        }
    }
}

　　

Model.ts：

class Model{
   
    //校验用户名、密码是否符合条件 
    valid(usename, password){
          return true;
    }
 

    //保存登录数据
    handleLoginData(data){
  
    }
 
}

　　

二 MVP

Model：管理数据和业务逻辑

View：显示界面

Presenter：处理所有业务逻辑，直接更新View

 

和mvc对比，presenter其实就是control，只是数据变更后没有派发事件更新UI，而是直接调用UI进行更新。

 

 

Model保存数据，并提供远程请求

Model.ts：

class Model{
    reqLogin(){
        return true;
    }
}

　　

View持有Presenter，并调用presenter请求登录

View.ts：

class View {
    private presenter: LoginPresenter = null;
    
    onLoad(){
        this.presenter = new Presenter(this);
        this.loginBtn.on(Node.EventType.TOUCH_END, this.onLoginBtn, this);
    }

    onLoginBtn(){
        this.presenter.handleLogin(username, password);
    }

    showLoginSuccess(){

    }

    showLoginFail(){

    }
}

　　

Presenter持有view和model，并调用Model请求登录，更新UI

Presenter.ts：

class Presenter{
    private view: LoginView;
    private model: LoginModel;

    constructor(view:View){
        this.view = view;
        this.model = new Model();
    }

    handleLogin(usename, password){
        const success:boolean = this.model.reqLogin();
        if(success){
            this.view.showLoginSuccess();
        }else{
            this.view.showLoginFail();
        }
    }
}

　　

　

三 MVVM

Model：管理数据和业务逻辑

View：声明式界面(如XAML、前端框架模板)

ViewModel：暴露数据属性和命令，供View自动绑定

 

这个贼复杂，主要用于前端吧，例如Vue。

 

四  MV

Model：数据和业务逻辑

View：用户界面

 

和MVC对比，没有了control层， View里直接调用Model获取数据或发送请求，Model派发事件更新UI。

最简的框架了，在cocos论坛里讨论过，很多人表示适用于小型项目开发快。

 

五 MVM

Model：数据和业务逻辑

View：用户界面

ViewModel：暴露数据属性和命令，实现 View 和 Model 的双向绑定

 

和MVC对比，通过框架实现双向绑定，View变化自动更新ViewModel，ViewModel变化自动更新Model。View和Model完全解耦，通过ViewModel间接通信。

ViewModel可以独立测试，无需依赖View。

 

Model保存登录数据，并提供访问服务器接口

Model.ts：

class Model {
    private _username: string = "";
    private _password: string = "";

    reqLogin() {
        //请求服务器登录
        return true;
    }
}

　　

View和ViewModel绑定，View输入变化时让ViewModel更新Model

View.ts：

class View {
    onLoad() {
        //绑定UI事件到ViewModel
        this.usernameEditBox.node.on(EditBox.EventType.TEXT_CHANGED, this.onUsernameChanged, this);
        this.passwordEditBox.node.on(EditBox.EventType.TEXT_CHANGED, this.onPasswordChanged, this);
        this.loginBtn.on(Node.EventType.TOUCH_END, this.onLoginBtn, this);

        //监听ViewModel事件更新UI
        Event.on('stateChanged', this.updateUI, this);
        Event.on('loginSuccess', this.onLoginSuccess, this);
        Event.on('loginFailed', this.onLoginFailed, this);
    }

    private onUsernameChanged(event: EditBox): void {
        this.loginViewModel.updateUsername(event.string);
    }

    private onPasswordChanged(event: EditBox): void {
        this.loginViewModel.updatePassword(event.string);
    }

    onLoginBtn() {
        LoginView.performLogin();
    }

    private updateUI(state: any): void {
        //更新UI
    }

    private onLoginSuccess(): void {
        //登录成功
    }

    private onLoginFailed(errorMessage: string): void {
        //登录失败
    }
}

　　

提供登录请求，并派发事件去更新View

ViewModel.ts：

class ViewModel {
    private model:Model;

    //更新用户名
    updateUsername(username: string): void {
        this.model.username = username;
        this.emitChange();
    }

    //更新密码
    updatePassword(password: string): void {
        this.model.password = password;
        this.emitChange();
    }

    //执行登录
    performLogin() {
        const success: boolean = this.model.reqLogin();
        if (success) {
            Event.emit('loginSuccess');
        } else {
            Event.emit('loginFail');
        }
    }

    // 发出状态变更事件
    private emitChange(): void {
        Event.emit('stateChanged', this.getState());
    }
}