概述
MVC、MCP、MVVC 是三种常见的软件架构设计模式，主要通过分离关注点的方式来组织代码架构，优化开发效率
背景
在开发 单页面应用 时，往往一个路由对应一个具体的脚本文件，而这一个文件就包含了所有的应用逻辑：
- 视图渲染
- 数据的获取
- 对用户事件的响应
如果在开发大型项目时，整个文件就会变得冗长、混乱，因此诞生了相对应的架构设计模式
MVC 和 MVVM 区别
如 MVC 代表 jQuery 中要更新 UI ，则每次都要先获取到对应的 DOM 后，再更改 DOM 中的数据
- 此时的业务逻辑和视图还是耦合在一起的
而 MVVM 代表的 vue，利用双向绑定机制，只需要更新 model 层数据，viewModel 会自动触发 view 层的更新
- 此时的业务逻辑完全和视图解耦
MVC
MVC 通过分离 Model、View 和 Controller 的方式来组织代码结构
- Model：负责存储页面的业务数据，及对应数据的操作
- View：负责页面的渲染
- Controller：负责用户与应用的响应操作（连接 Model 层和 View 层）
View 和 Model 应用了 观察者模式 ，当 Model 层发生改变的时候它会通知 View 层相应的视图更新
当用户与应用发生交互时，会触发 Controller 中的事件 Handler，Handler 再通过调用 Model 层中的 数据操作 来修改业务数据，进而由 Model 通知 View 更新视图
MVVM
MVVM 分为 Model、VIew 和 ViewModel
- Model 代表数据模型，数据和业务逻辑都在 Model 层中定义；
- View 代表 UI 视图，负责数据的展示；
- ViewModel 负责监听 Model 中数据的改变并且控制视图的更新，处理用户交互操作；
相比 MVC 架构 ，MVVM 中的 Model 与 View 并没有直接关联，而是通过 ViewModel 建立简介联系
Model 与 ViewModel 有着数据的 双向绑定 ，当 Model 中数据改变时，自然会触发 ViewModel 中事件，然后再由 ViewModel 去触发 View 层的视图刷新，View 中由于用户交互操作而改变的数据也会在 Model 中同步
这种模式实现了 Model 和 View 的数据自动同步，因此开发者只需要专注于数据的维护操作即可，而不需要自己操作 DOM
MVP
MVP 模式与 MVC 唯一不同的在于 Presenter 和 Controller
在 MVC 模式中使用观察者模式，来实现当 Model 层数据发生变化的时候，通知 View 层的更新。这样 View 层和 Model 层耦合在一起，当项目逻辑变得复杂的时候，可能会造成代码的混乱，并且可能会对代码的复用性造成一些问题。
——由此引出的 MVP 模式中的 Presenter
MVP 的模式通过使用 Presenter 来实现对 View 层和 Model 层的解耦。MVC 中的 Controller 只知道 Model 的接口，因此它没有办法控制 View 层的更新，MVP 模式中，View 层的接口暴露给了 Presenter 因此可以在 Presenter 中将 Model 的变化和 View 的变化绑定在一起，以此来实现 View 和 Model 的同步更新。这样就实现了对 View 和 Model 的解耦，Presenter 还包含了其他的响应逻辑。
贡献者
jiechen