mvc模式与mvvm模式

最新推荐文章于 2025-02-16 22:14:57 发布

原创最新推荐文章于 2025-02-16 22:14:57 发布 · 325 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#mvvm #mv #c

设计模式专栏收录该内容

5 篇文章

订阅专栏

本文深入解析MVC、MVP与MVVM三种设计模式，探讨其架构原理与应用场景，对比不同模式下视图、模型及控制器的角色与通信方式，阐述各自优势与局限，特别聚焦MVVM模式在现代前端开发中的应用实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

MVC模式的意思是，软件可以分成三个部分：

    视图（View）：用户界面。
    控制器（Controller）：业务逻辑
    模型（Model）：数据保存

各部分之间的通信方式如下：

这里写图片描述

    View 传送指令到 Controller
    Controller 完成业务逻辑后，要求 Model 改变状态
    Model 将新的数据发送到 View，用户得到反馈

所有通信都是单向的。

Backbone.js

对于框架Backbone.js，它包含Model和View，但它实际上没有真正的Controller，Backbone.View和Backbone.Router一起承担Controller的责任。

这里写图片描述

    用户可以向 View 发送指令（DOM 事件），再由 View 直接要求 Model 改变状态。
    用户也可以直接向 Controller 发送指令（改变 URL 触发 hashChange 事件），再由 Controller 发送给 View。
    Controller 非常薄，只起到路由的作用，而 View 非常厚，业务逻辑都部署在 View。所以，Backbone 索性取消了 Controller，只保留一个 Router（路由器）。

MVC这种关注点分离有利于进一步简化应用程序功能的模块化，并能够实现：

    整体维护更容易。
    解耦Model和View，意味着它能够更直接地编写业务逻辑的单元测试
    这种模块性可以让负责核心逻辑的开发人员和负责用户界面的开发人员同时工作。

MVP

MVP是MVC的一种衍生模式，专注于改进表示逻辑。

MVP中的P代表表示器。这是一个包含用于View的用户界面业务逻辑的组件。

这里写图片描述

    各部分之间的通信，都是双向的。
    View 与 Model 不发生联系，都通过 Presenter 传递。
    View 非常薄，不部署任何业务逻辑，称为”被动视图”（Passive View），即没有任何主动性，而 Presenter非常厚，所有逻辑都部署在那里。

MVP与MVC

MVP适用于有非常复杂的View和大量用户交互的应用程序。
这样的程序如果用MVC的话意味这要极度依赖于多个控制器。而在MVP中，所有这些复杂的逻辑可以封装在一个表示器中，大大简化维护工作。
MVVM

MVVM 模式将 Presenter 改名为 ViewModel，基本上与 MVP 模式完全一致。

唯一的区别是，它采用双向绑定（data-binding）：View的变动，自动反映在 ViewModel，反之亦然。

MVVM 由 Model,View,ViewModel 三部分构成：

    Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；
    View 代表UI 组件，它负责将数据模型转化成UI 展现出来
    ViewModel 是一个同步View 和 Model的对象视图模型层。

在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的，因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。

ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。
View与ViewModel