CLAYYA

乌贼馋辣鱼的博客

首页面经React前端

MVC、MVP、MVVC

2024-11-26

MVC、MVP、MVVC

都是常见的软件架构模式

MVC（Model-View-Controller）架构模式中，将应用程序分为三个主要部分：模型（Model）、视图（View）和控制器（Controller）。Controller负责处理用户交互和调度业务逻辑，View负责显示数据，Model负责数据的存储和逻辑处理。用于实现用户界面的分离关注点，以提高应用程序的组织性、可维护性和可扩展性

MVP（Model-View-Presenter）架构模式，是对经典MVC的改进，但将View和Model的交互逻辑抽象到了Presenter中。在MVP中，View负责展示数据和接收用户输入，Presenter负责处理用户输入并更新View和Model。

MVVM（Model-View-ViewModel）架构模式，是将View和ViewModel关联起来，通过双向数据绑定实现View和ViewModel的同步更新。View负责展示数据和用户交互，ViewModel负责处理数据和业务逻辑，Model负责存储数据。MVVM的优点是能够降低View和ViewModel之间的耦合，使得代码更加可维护和可测试。

MVC

  1. 模型（Model）：

    • 负责管理数据和业务逻辑
    • 通常包括数据结构、数据库访问代码以及对数据的操作（如CRUD操作：创建、读取、更新、删除）
    • 模型是应用程序中与数据直接交互的部分，它不依赖于用户界面

  2. 视图（View）：

    • 负责显示数据（即模型）和接收用户输入
    • 视图不包含业务逻辑；它只是数据的展示层
    • 视图可以是HTML页面、图形用户界面(GUI)组件或者任何其他形式的用户界面元素

  3. 控制器（Controller）：

    • 作为模型和视图之间的中介，接收用户的输入并调用模型和视图去完成用户请求
    • 控制器不直接与视图交互，而是通过调用模型来修改数据，然后通知视图更新显示

工作流程：

​image​

  1. 用户通过视图界面进行交互，比如点击按钮或提交表单
  2. 视图将用户的输入发送到控制器
  3. 控制器处理输入，然后调用相应的模型来处理业务逻辑
  4. 模型执行业务逻辑，然后可能更新数据
  5. 控制器通知模型数据已经改变
  6. 控制器选择合适的视图来展示模型的新数据
  7. 视图将更新后的数据展示给用户

MVC模式的一个关键优势是它允许多个视图可以共享同一个模型，这意味着你可以在不同的设备或平台上使用相同的业务逻辑，而只需要为每个平台创建不同的用户界面。此外，MVC也促进了团队协作，因为设计师可以专注于视图层，而开发者可以专注于模型和控制器层，从而提高了开发效率。

MVP

呈现器（Presenter）：作为Model和View之间的桥梁，它从Model获取数据并将其格式化后提供给View显示。同时，它也接收View的用户操作事件，将这些事件转化为对Model的调用

​image​

优点：

  • 分离关注点：MVP通过Presenter实现了数据和视图之间的交互，完全隔离了View层与Model层，二者互不干涉
  • 降低耦合度：模型与视图完全分离，我们可以修改视图而不影响模型
  • 提高可测试性：我们可以将一个Presenter用于多个视图，而不需要改变Presenter的逻辑。这个特性非常有助于单元测试
  • 可重用性：Presenter与具体的View没有直接关联，而是通过定义好的接口进行交互，从而使得在变更View时可以保持Presenter的不变，这样就可以重用

MVP与MVC区别：

  1. 控制器（Controller）与呈现器（Presenter）：

    • MVC：控制器（Controller）是接收用户输入并调用模型（Model）和视图（View）的组件。控制器直接与视图进行交互，负责从视图接收输入并将模型的数据传递给视图。
    • MVP：呈现器（Presenter）是连接模型（Model）和视图（View）的中间层。与控制器不同，呈现器不直接与视图交互，而是通过回调接口与视图通信。视图通常是被动的，只负责显示数据，而业务逻辑和数据获取则由呈现器处理。

  2. 视图（View）的角色：

    • MVC：视图是用户界面的一部分，负责显示数据和接收用户输入。在MVC中，视图可以包含一些业务逻辑，因为它直接与控制器交互。
    • MVP：视图更加“瘦”，只负责显示数据和传递用户事件到呈现器。所有的业务逻辑和数据获取都由呈现器处理，视图不包含任何业务逻辑。

  3. 数据流：

    • MVC：数据流通常是双向的，视图可以直接更新模型，也可以通过控制器更新模型。
    • MVP：数据流通常是单向的，视图不直接更新模型，而是通过呈现器来更新模型。这有助于保持视图的简单性和专注于显示。

MVVC

MVVM模式通过数据绑定机制将ViewModel中的数据直接绑定到视图上，实现了视图和数据的自动同步。

  1. 视图（View）：用户界面的可视化部分，负责显示数据并与用户进行交互。视图的主要职责是展示数据，不涉及业务逻辑
  2. 视图模型（ViewModel）：这是MVVC与MVC的主要区别，ViewModel作为连接模型和视图的中间层，充当数据绑定的桥梁。它负责从模型中获取数据，并将其转换为视图所需的格式，同时提供与视图交互的方法和命令
  3. 数据绑定（Data Binding）：MVVC架构中的一个重要概念是数据绑定，它允许模型和视图模型之间的数据自动同步。当模型数据发生变化时，视图模型会自动更新视图，而当用户与视图进行交互时，视图模型会自动更新模型数据

​image​

数据绑定技术确保视图的内容与模型数据保持同步，提高了开发效率。

MVP与MVVC区别：

  1. Presenter 和 ViewModel：

    • MVP：在MVP模式中，Presenter负责业务逻辑和与Model的交互，同时处理用户界面（View）的更新。Presenter直接与View通信，通常通过回调方法。
    • MVVC：在MVVC模式中，ViewModel是View的数据代理，它负责处理业务逻辑和与Model的交互，并将数据转换为View可以显示的格式。ViewModel不直接与View通信，而是通过数据绑定机制

  2. 视图的角色：

    • MVP：在MVP中，View通常是被动的，它不包含任何业务逻辑，只负责显示数据和传递用户事件到Presenter
    • MVVC：在MVVC中，View可以是主动的，因为它可以直接绑定到ViewModel中的数据，而不需要显式地请求数据

‍