By

设计模式 MVC & MVVM 区别

一、MVC

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

  • 视图（View）：用户界面。代表了UI组件，像CSS，JQuery，html等。他只负责展示从controller接收到的数据。也就是把model转化成UI。
  • 控制器（Controller）：业务逻辑。负责处理流入的请求。它通过View来接受用户的输入，之后利用Model来处理用户的数据，最后把结果返回给View。Controll就是View和Model之间的一个协调者。
  • 模型（Model）：数据保存。代表了描述业务路逻辑，业务模型、数据操作、数据模型的一系列类的集合。这层也定义了数据修改和操作的业务规则。

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

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

所有通信都是单向的

mvc的缺点

  1. 开发者在代码中大量调用相同的 DOM API, 处理繁琐 ，操作冗余，使得代码难以维护。
  2. 大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。
  3. 当 Model 频繁发生变化，开发者需要主动更新到View ；当用户的操作导致 Model 发生变化，开发者同样需要将变化的数据同步到Model 中，这样的工作不仅繁琐，而且很难维护复杂多变的数据状态。

其实，早期jquery 的出现就是为了前端能更简洁的操作DOM 而设计的，但它只解决了第一个问题，另外两个问题始终伴随着前端一直存在。

二、互动模式

接受用户指令时，MVC 可以分成两种方式。一种是通过 View 接受指令，传递给 Controller

另一种是直接通过controller接受指令

三、MVP

MVP 模式将 Controller 改名为 Presenter，同时改变了通信方向

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

1.Model
Model层代表了描述业务逻辑和数据的一系列类的集合。它也定义了数据修改和操作的业务规则。
2.View
View代表了UI组件，像CSS，JQuery，html等。他只负责展示从Presenter接收到的数据。也就是把模型（非Modle层模型）转化成UI。
3.Presenter
Presenter负责处理View背后所有的UI事件。它通过View接收用户输入，之后利用Model来处理用户的数据，最后把结果返回给View。与View和Controller不同，View和Presenter之间是完全解耦的，他们通过接口来交互。另外，presenter不像controller处理进入的请求

四、MVVM

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

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