Hoey

外观

UI 架构模式

约 1194 字大约 4 分钟

2026-03-11

思考

  1. 什么是MVC模式？

  2. 什么是MVVM模式？

  3. 什么是MVP模式？

在前端开发中，MVC、MVVM 和 MVP 是三种常见的 UI 架构设计模式，它们帮助开发者更高效地组织代码，提升代码的可维护性、可扩展性和可测试性。

MVC

概念

MVC 模式将应用程序分为三个主要部分：模型（Model）、视图（View）和控制器（Controller），各部分之间的职责明确且相互协作。

  • 模型（Model）：负责处理应用程序的数据逻辑和业务规则，例如数据的存储、获取、更新和验证等操作。模型是独立于用户界面的，它可以被多个视图复用。
  • 视图（View）：负责将模型中的数据以可视化的方式呈现给用户，通常是 HTML、CSS 和 JavaScript 构建的用户界面。视图只负责展示数据，不处理业务逻辑。
  • 控制器（Controller）：作为模型和视图之间的桥梁，接收用户的输入（如点击事件、表单提交等），根据用户输入调用模型的相应方法进行数据处理，然后根据处理结果更新视图。

工作流程

  1. 用户与视图进行交互，触发相应的事件。
  2. 视图将事件传递给控制器。
  3. 控制器根据事件调用模型的方法进行数据处理。
  4. 模型处理完数据后，将结果返回给控制器。
  5. 控制器根据模型的结果更新视图。

优缺点

  • 优点：职责分离，便于代码的维护和扩展；模型和视图可以独立开发和测试。
  • 缺点：控制器可能会变得过于庞大，包含过多的业务逻辑；视图和模型之间的耦合度较高，修改视图可能会影响到模型，反之亦然。
  • 应用：传统后端框架（如 Spring MVC）。

MVVM

概念

MVVM 模式是在 MVC 模式的基础上发展而来的，它引入了视图模型（ViewModel）的概念，通过数据绑定和视图模型来实现视图和模型的分离。

  • 模型（Model）：与 MVC 中的模型类似，负责处理数据和业务逻辑。
  • 视图（View）：负责用户界面的展示，通常由 HTML 和 CSS 构建。
  • 视图模型（ViewModel）：是视图和模型之间的桥梁，它包含了视图的状态和行为，并通过数据绑定机制将视图和模型连接起来。视图模型负责处理视图的交互逻辑，同时将视图的变化反映到模型中，反之亦然。

工作流程

  1. 视图模型通过数据绑定机制将模型的数据绑定到视图上，实现数据的自动更新。
  2. 用户与视图进行交互，触发视图的事件。
  3. 视图模型监听视图的事件，并根据事件更新模型的数据。
  4. 模型的数据更新后，通过数据绑定机制自动更新视图。

优缺点

  • 优点：通过数据绑定和视图模型实现了视图和模型的解耦，降低了代码的耦合度，提高了代码的可维护性和可测试性；开发人员可以专注于业务逻辑的实现，而不需要手动操作 DOM。
  • 缺点：数据绑定的实现可能会增加一定的性能开销；对于简单的应用程序，使用 MVVM 模式可能会显得过于复杂。
  • 应用：现代前端框架（如 Vue、Angular、React + 状态管理）。

MVP

概念

MVP 模式也是从 MVC 模式演变而来的，它将控制器替换为了 Presenter，进一步强调了视图和模型的分离。

  • 模型（Model）：同样负责数据和业务逻辑的处理。
  • 视图（View）：负责用户界面的展示，只负责显示数据和接收用户的输入，不包含任何业务逻辑。
  • Presenter：作为视图和模型之间的中介，负责处理视图的交互逻辑和业务逻辑。Presenter 接收视图的事件，调用模型的方法进行数据处理，然后根据处理结果更新视图。

工作流程

  1. 用户与视图进行交互，触发视图的事件。
  2. 视图将事件传递给 Presenter。
  3. Presenter 根据事件调用模型的方法进行数据处理。
  4. 模型处理完数据后，将结果返回给Presenter。
  5. Presenter 根据模型的结果更新视图。

优缺点

  • 优点：视图和模型之间的耦合度较低，便于代码的维护和测试；Presenter 可以独立于视图和模型进行开发和测试。