MVC、MVP、MVVM

说明：
它们是三种常见的软件架构设计模式， 在开发单⻚⾯应⽤时，往往⼀个路由⻚⾯对应了⼀个脚本⽂件，所有的⻚⾯逻 辑都在⼀个脚本⽂件⾥。⻚⾯的渲染、数据的获取，对⽤户事件的响应所有的应⽤逻辑都混合在⼀起，这样在开发简单项⽬时，可能看不出什么问题，如果 项⽬变得复杂，那么整个⽂件就会变得冗⻓、混乱，这样对项⽬开发和后期的 项⽬维护是⾮常不利的。为了解决图形界面程序的复杂性，提高可维护性，MVC 模型、MVP模型 及 MVVM 模型应运而生。它们的本质都是将数据层、逻辑层、视图层分层管理。

MVC 模型
1、概念
MVC 全称 Model（模型）-View（视图）- Controller（控制器）。
【Model】用于管理程序的数据部分，承担数据管理者的角色。创建数据，并提供访问、修改数据的接口，执行修改数据之后的操作。
【View】 用于渲染程序的视图部分，根据不同的数据模型，展示不同的界面。
【Controller】用于处理程序中用户交互的部分，Controller 从 View 获取数据，通过 Model 提供的接口操作数据。

MVC MVC 通过分离 Model、View 和 Controller 的⽅式来组织代码结构。
其中 View 负责⻚⾯的显示逻辑，
Model 负责存储⻚⾯的业务数据，以及对相应数 据的操作。
并且 View 和 Model 应⽤了观察者模式，当 Model 层发⽣改变的 时候它会通知有关 View 层更新⻚⾯。
Controller 层是 View 层和 Model 层的 纽带，它主要负责⽤户与应⽤的响应操作，当⽤户与⻚⾯产⽣交互的时候， Controller 中的事件触发器就开始⼯作了，通过调⽤ Model 层，来完成对 Model 的修改，然后 Model 层再去通知 View 层更新

2、特点
优点：业务逻辑抽离到 Controller，模块化程度高。新增逻辑功能时，只需要再添加一个 Controller。
缺点：测试困难，View 无法组件化。系统结构较复杂，不适合简单程序。

3、通信
在 MVC 模型中，View 传送指令（数据）到 Controller 。Controller 接收数据，编写业务逻辑，然后更新 Model。Model 中的数据又会改变 View 的状态。如此反复。

MVP 模型
1、概念
MVP 全称 Model（模型 ）-View（视图 ）- Presenter（提供者）。
MVP 是从经典的 MVC 模式演变而来。模型与视图完全分离。Presenter 与具体的 View 是没有关联的，而是通过定义好的接口进行交互。从而保证在变更 View 的时候 Presenter 保持不变。这样 Presenter 就能够实现复用。还可以编写测试用的 View，模拟用户操作。

MVP 模式与 MVC 唯⼀不同的在于 Presenter 和 Controller。
在 MVC 模式中 使⽤观察者模式，来实现当 Model 层数据发⽣变化的时候，通知 View 层的 更新。这样 View 层和 Model 层耦合（耦合就是一个系统的各个部分之间彼此关联、互相影响的程度。当系统内部的各个部分之间耦合度较高时，它们的行为会更加紧密地相互关联，但也更加复杂、难以控制。相反，当各个部分之间的耦合度较低时，它们的行为会更加独立，但也会导致系统的整体性能较差）在⼀起，当项⽬逻辑变得复杂的时候， 可能会造成代码的混乱，并且可能会对代码的复⽤性造成⼀些问题。MVP 的 模式通过使⽤ Presenter 来实现对 View 层和 Model 层的解耦（解耦就是是减少耦合的过程，使得模块或组件之间的依赖尽可能小。这样可以使得代码更加模块化、灵活、易于维护和扩展。）。MVC 中的 Controller 只知道 Model 的接⼝，因此它没有办法控制 View 层的更新，MVP 模式中，View 层的接⼝暴露给了 Presenter 因此可以在 Presenter 中将 Model 的变化和 View 的变化绑定在⼀起，以此来实现 View 和 Model 的同步 更新。这样就实现了对 View 和 Model 的解耦，Presenter 还包含了其他的响应逻辑

2、特点
优点：视图与模型完全分离。一个 Presenter 可以应用于多个视图，从而应变 View 的频繁变化，可以做单元测试。
缺点：Presenter 与 View 耦合度太高，一旦 View 发生大改变，Presenter 也会跟着变。

3、通信
在 MVP 模型中，Presenter 取代了 Controller。通信方向发生了改变。View 与 Model 之间不再直接通信。取而代之的是 View 与 Presenter 双向通信。Model 与 Presenter 双向通信。

MVVM 模型
1、概念
MVVM 全称 Model（模型 ）-View（视图 ）-ViewModel（视图模型）。
MVVM 就是把 MVP 模型中的 Presenter 改成了 ViewModel。随着业务的复杂性提高，视图也变得越来越复杂。视图与数据之间的交互更加频繁。所以可以把这一部分的逻辑抽离出来体现在框架里面。这就是 ViewModel 的功能。

MVVM 分为 Model、View、ViewModel：

Model代表数据模型，数据和业务逻辑都在Model层中定义；

View代表UI视图，负责数据的展示；

ViewModel负责监听Model中数据的改变并且控制视图的更新，处理⽤户 交互操作；
 

2、特点
优点：简化测试，提高可维护性。
缺点：不适合简单的图形界面，太复杂的图形界面 ViewModel 维护起来成本也比较高，ViewModel 中的数据没办法断点调试。

3、通信

Model和View并⽆直接关联，⽽是通过ViewModel来进⾏联系的，Model和 ViewModel之间有着双向数据绑定的联系。因此当Model中的数据改变时会 触发View层的刷新，View中由于⽤户交互操作⽽改变的数据也会在Model中 同步。 这种模式实现了 Model和View的数据⾃动同步，因此开发者只需要专注于数 据的维护操作即可，⽽不需要⾃⼰操作DOM