MVC、MVP、MVVM 模式详解

MVC

定义：

• Model：模型，负责保存应用数据，与后端数据进行同步。
• View：视图，负责视图展示，将 Model 中的数据可视化出来。
• Controller：负责业务逻辑，根据用户行为对 Model 数据进行修改。

以上三者形成了一个如图所示的模型：

优点：

• 低耦合
• 重用性高
• 生命周期成本低
• 部署快
• 可维护性高
• 有利软件工程化管理

缺点：

这样的模型，在理论上是可行的。但往往在实际开发中，并不会这样操作，因为开发过程不够灵活。例如：一个小小的事件操作，都必须经过这样的一个流程，那么开发就不再便捷了。

MVP

定义：

MVP 与 MVC 很接近，P 指的是 Presenter ，它可以理解为一个中间人，负责 View 和 Model 之间的数据流动，防止 View 和 Model 之间直接交流，如图所示：

优点：

• 模型与视图完全分离，我们可以修改视图而不影响模型
• 可以更高效地使用模型，因为所有的交互都发生在一个地方—— Presenter 内部
• 我们可以将一个 Presenter 用于多个视图，而不需要改变 Presenter 的逻辑。这个特性非常的有用，因为视图的变化总是比模型的变化频繁。
• 如果我们把逻辑放在 Presenter 中，那么我们就可以脱离用户接口来测试这些逻辑（单元测试）

缺点：

尽管 MVP 分离了 View 和 Model ，但是应用逐渐变大之后，导致 Presenter 的体积增大，难以维护。

MVVM

定义：

• Model
• View
• ViewModel：视图模型，可以理解为 Presenter 的进阶版

ViewModel 通过实现一套数据响应式机制，自动响应 Model 中的数据变化，同时 ViewModel 会实现一套更新策略，自动将数据变化转换为视图更新。

通过事件监听响应 View 中用户交互以修改 Model 中的数据。这样在 ViewModel 中就减少了大量 DOM 操作代码。

优点：

MVVM 在保持 View 和 Model 松耦合的同时，还减少了维护它们关系的代码，使用户专注于业务逻辑，兼顾开发效率和可维护性。

总结

• 这三者都是框架模式，它们设计的目标都是为了解决 Model 和 View 的耦合问题。
• MVC 模式出现较早，主要应用在后端，如 Spring MVC、ASP.NET MVC 等，在前端领域的早期也有应用，如 Backbnode.js 。它的优点是分层清晰，缺点是数据流混乱，灵活性带来的维护性问题。
• MVP 模式是 MVC 的进化形式，Presenter 作为中间层负责 Model 和 View 的通信，解决了两者的耦合问题，缺点是 Presenter 层过于臃肿会导致维护问题。
• MVVM 模式在前端领域有广泛应用，它不仅解决 Model 和 View 的耦合问题，还同时解决了维护两者映射关系的大量繁杂代码和 DOM 操作代码，在提高开发效率、可读性的同时还保持了优越的性能表现。