软件架构设计模式之 MVC-MVP-MVVM

---

题意描述：

什么是 MVVM？与 MVC 有什么区别？什么又是 MVP ？

---

解题思路：

Alice: 什么是 MVVM MVC 什么又是 MVP 呢？
Bob: 我知道 MVVM 分别是指 Model（数据）, View（视图），ViewModel（VM）; MVC 分别是 Model (数据), View（视图）, Controller（控制器）；MVP 分别是 Model(数据)，View(视图)，Presenter（表示器）。
Alice: 然后嘞，这些Model啊，View啊是干什么的呢 ？这三个东西算是什么呢 ？
Bob: 应该算是三种软件架构设计模式吧，软件架构设计模式就是一种写代码的套路。不同的模式，也就是不同的套路能够解决多种多样的问题。
Alice: 那 MVVM MVC MVP 这三种模式在解决什么问题呢 ? 它们解决的是同一个问题吗 ？
Bob: 嗯，这是对同一个问题的三种解决方案，这个问题就是 如何 优化代码结构，提升开发效率。MVC、MVP 和 MVVM 是三种常见的软件架构设计模式，主要通过分离关注点的方式来组织代码结构，优化我们的开发效率。

MVC 通过分离 Model、View 和 Controller 的方式来组织代码结构。其中 View 负责页面的显示逻辑，Model 负责存储页面的业务数据，以及对相应数据的操作。并且 View 和 Model 应用了观察者模式，当 Model 层发生改变的时候它会通知有关 View 层更新页面。Controller 层是 View 层和 Model 层的纽带，它主要负责用户与应用的响应操作，当用户与页面产生交互的时候，Controller 中的事件触发器就开始工作了，通过调用 Model 层，来完成对 Model 的修改，然后 Model 层再去通知 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 还包含了其他的响应逻辑。

MVVM 模式中的 VM，指的是 ViewModel，它和 MVP 的思想其实是相同的，不过它通过双向的数据绑定，将 View 和 Model 的同步更新给自动化了。当 Model 发生变化的时候，ViewModel 就会自动更新；ViewModel 变化了，View 也会更新。这样就将 Presenter 中的工作给自动化了。MVVM的一种实现就是 Vue.js Vue的双向数据绑定的原理就是通过使用数据劫持和发布订阅者模式来实现的这一功能。

Alice: 你讲的太快了，我还不知道什么是 观察者模式呢 ？
Bob: 先举个例子吧，假如你是一个商家，有一群客户想要抢购某款产品。这时候你就需要一种机制，在产品可以发售的时候通知所有的客户。这种情况下观察值模式就很适用，被观察的对象就是 你的产品， 观察者就是所有客户。当你的产品的销售状态从无货到有货的时候就需要通知所有的客户。这就是观察者模式。
Alice: 我看到别的地方是这样写的：

当对象间存在一对多关系时，则使用观察者模式（Observer Pattern）。比如，当一个对象被修改时，则会自动通知它的依赖对象。观察者模式属于行为型模式。

Bob: 就是这个意思，MVC里面 Model 中的数据变化怎么体现到 View 中的呢，靠的就是观察者模式，而 View 中的操作会通过 Controller 处理进而导致 Model 中数据的变化。

Alice: 明白了，而MVP 中的 P 出了要处理 View 中的操作还要 处理 Model 中数据的变化，把变化传递给 View，这样 M 和 V 就完全解耦了，只能通过 P 交流。
Bob: 是的，P 就是个中间商，MVVM 中的 VM 和 P 类似，只是框架 用双向数据绑定把 VM 实现了，我们不用再关注 C 或者 P 了，仅仅关注 V 和 M 就好了。
Alice： 神奇的VM。

---

易错点：

• 空

---

总结：

• 空

---

参考文献：

• 什么是 MVVM？与 MVC 有什么区别？什么又是 MVP ？
  
• 前端开发中的几种设计模式
• 阮一峰-MVP-MVC-MVVM的图示
• 解构MVC-MVP-MVVM
• MVP
• 设计模式
• 观察模式

---