mvc模式与mvvm模式

川长思鸟来 2021-09-20 12:20 542阅读 0赞

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

## MVVM中的View是主动而不是被动的。   被动View只输出显示并不接受任何用户输入。   而MVVM中的View和ViewModel之间通过数据绑定和事件进行通信。     ##

# #

## **优点** ##

MVVM使得UI和为UI提供驱动的行为模块的并行开发变得更容易。  
    MVVM使View抽象化，从而减少代码背后所需的业务逻辑量。  
    ViewModel在单元测试中的使用更容易

## **缺点** ##

对于简单的UI来说，使用MVVM有些大材小用  
    数据绑定难以调试

Vue是典型的MVVM框架，它实现双向数据绑定的技术是数据劫持。 也就是通过ES5提供的 Object.defineProperty() 方法来劫持（监控）各属性的 getter 、setter ，并在数据（对象）发生变动时通知订阅者，触发相应的监听回调。