JavaScript MV*模式

1. MVC

MVC

• M: Model数据模型，它管理应用程序的数据
• V：View视图，它是Model的可视化表示
• C：Controller控制器，它是Model和View之间的中介，通常执行一些具体的操作

1.1.Model

• 它是一个数据模型，例如我们有一个图片组件，用来展示一个图片，那么这个组件的Model可以定义为

// model.js
// 图片组件的Model
const imgModel = {
    src: '',
    alt: '',
    width: '',
    height: ''
}

• Model改变时，他会通知观察它的视图做出更新

1.2.View

• View视图展示，它是一个Model的可视化展示，上面图片组件的View可以表示为

// view.html
// 图片组件的View
 <img src={imgModel.src} alt={imgModel.alt} width={imgModel.width} height={imgModel.height} />

• 视图会观察Model的改变而做出更新

1.3.Controller

• 完成一些更新操作，例如当用户点击图片时，做出响应的处理逻辑，即基于一些操作，去更新Model

// controller.js
const Controller = {
    handleClick(event,model){
     // 处理逻辑
    }
}

const handleClick = () => {
	Controller.handleClick('click',imgModel)
}
<img src={imgModel.src} alt={imgModel.alt} width={imgModel.width} height={imgModel.height} onClick={handleClick} />

优势：

• 易于维护
• 解耦了Model和View
• 消除了代码重复
• 这种模块化的开发可以让不同业务逻辑的功能同时进行

2. MVVM

MVVM

• M：数据模型，与MVC中的Model一样
• V: 视图，与MVC一样，
• VM：视图模型

2.1 Model，View

• Model与View和在MVC中一样

2.2 ViewModel

• ViewModel视图模型通过数据绑定，将Model转化为View，通过事件监听，将View更新通知给Model做出对应更新，在ViewModel上需要实现一个观察者，来监听Model和View的改变然后给另一方发出通知