一、MVC

什么是MVC

  • MVC是一种模式，它将应用分为3个部分：数据（模型）、表现层（视图）、用户交互层（控制器）
  • 一个事件的处理大概是这样
    • 用户和应用产生交互
    • 控制器的事件处理器被触发
    • 控制器从模型中请求数据，并将其交给视图
    • 视图将数据呈现给用户

模型（数据保存）

  • 模型用来存放用户的所有数据对象。比如有一个user模型，用来存放用户列表、他们的属性以及所有和模型有关的逻辑
  • 模型不必知晓视图和控制器的细节，模型只需包含数据以及直接和这些数据相关的逻辑

视图（用户界面）

  • 视图是呈现给用户的，用户与之产生交互。在JavaScript应用中，视图大都是由HTML、css、JavaScript模板组成的

控制器（业务逻辑）

  • 控制器是模型和视图之间的纽带。控制器从视图获得事件和输入，对它们进行进行处理，并相应的更新视图。
  • 当页面加载时，控制器会给视图添加事件监听，比如监听表单提交或按钮点击。然后当用户和你的应用产生交互时，控制器中的事件触发器就开始工作了

总结一下：

  • Controller 监听 Model 变化，Model 一变，Controller 就会去更新View。

  • Controller 监听用户交互，用户点了提交或修改按钮，Controller 就要去更新 Model

  • View 传送指令到 Controller

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

各部分之间的通信方式

互动模式

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

二、MVP

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

三、MVVM

  • MVVM 模式将 Presenter 改名为 ViewModel，基本上与 MVP 模式完全一致
  • 唯一的区别是，它采用双向绑定（data-binding）：View的变动，自动反映在 ViewModel，反之亦然