参考：
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());
}
}