更多文章参见： https://github.com/elevenbeans/elevenbeans.github.io

前言

本系列可以看作是我个人对于 Addy Osmani 的著作《Learning JavaScript Design Patterns》中内容的提炼，类似阅读笔记，目的是为了简单快速、又不失全面地了解设计模式的相关概念、特点、分类及其在 Javascript 中的实际产出。

分为五篇：

  1. 概述
  2. 创建型
  3. 结构型
  4. 行为型
  5. MV*（本篇）

MV*

MV*: 也称 MVW/MVWhatever，包括 MVC、MVP、MVVM 等。

1. MVC

MVC 是一种架构设计模式，他强制将业务数据（Model）、用户界面（View）隔离，第三个组件（Controller）管理逻辑和用户输入。

详细的说明：

  • Model 代表特定数据，不了解用户界面（view）和 Controller（控制器）。当一个 Model 改变的时候，他会通知他的观察者（view）。
  • View 是对于 Model 的可视化描绘。观察者模式用于让 View 了解 Model 什么时候更新或者修改。
  • Controller 在这个 View-controller 对中的作用是处理用户交互（如按键和点击等动作），为 View 做决定。

不用惊讶，早前几篇文章提到的 Observer（观察者）模式 or Publish/Subscribe（发布/订阅）在多年以前就是 MVC 架构的一部分 =，=

Javascript 中的 MVC

特点是：单向流动、事件驱动。

  • 模型

模型用于封装与应用程序的业务逻辑相关的数据以及对数据处理的方法。总之，业务逻辑核心应该体现在这里。

  • 视图

视图层最主要的是监听（订阅）模型层上的数据改变，并且实时的更新 HTML 页面。当然也包括一些事件的注册或者 AJAX 请求操作(发布事件), 都是放在视图层来完成。（这里提一点，模型与视图的耦合，显然是违反 MVC 架构原则，但往往我们有时候却因为业务关系而无法完全解耦。）

  • 控制器

控制器最主要是接受/订阅从视图层发布的用户事件，然后调用模型去完成业务逻辑相关的数据以及对处理。

一个完整的过程：

  1. 页面初始化，模型 -> 视图单向流动；
  2. 当页面上触发一个事件，首先，视图层发布事件；
  3. 然后，控制器接受/订阅从视图层发布的用户事件，不输出任何东西及对页面做任何处理，只是接收请求并决定调用模型中的哪个方法去处理，处理完成，模型更新。
  4. 最后，视图层再通过监听（订阅）模型层上的数据改变，调用对应的方法来显示返回的数据。

2. MVP

P 即为 Presenter，表示器。和 MVC 不同，MVP 中将 View 层的调用委托给了表示器。而表示器的最大作用就是将 Model 有效的绑定至 View。

着重谈一下 MVP 和 MVC 的区别。

在 MVC 模型里，更关注的 Model 的不变，而同时有多个对 Model 的不同显示，即就是多个 View 对一个 Model，Model 并不依赖于 View，但是 View 是依赖于 Model 的。

如此，经常有一些差异化的业务逻辑在 View 里实现了，导致后续要更改 View 比较困难，至少那些业务逻辑难以重用。

此外，我们总是顺手在 View 的事件响应函数里完成了 Controller 的代码，让我们很难把 View 和 Controller 分开。

而在 MVP 里，View 只应该有最最简单的 Set/Get 方法，用户用户输入和设置界面显示的内容，除此就不应该有更多的内容。绝不容许直接直接访问 Model！ – 这就是与 MVC 很大的不同之处。

Presenter 完全把 Model 和 View 进行了分离，主要的程序逻辑在 Presenter 里实现。而且，Presenter 与具体的 View 是没有直接关联的，而是通过定义好的接口进行交互，从而使得在变更 View 时候可以 保持 Presenter 的不变，即重用。

3. MVVM

VM 即为 ViewModel，视图模型。和 MVC 不同，MVVM 中将 ViewModel 作为一个专门的 Controller。

ViewModel 是在 View 和 Model 之间充当中间人角色。

它可以将在 Model 中保存的原始数据（如时间戳 1333832407）转变成实际 View 层需要展示的格式（如 04/07/2012 @ 5:00pm）。这个角度来讲，他更类偏向 Model。

另一方面，ViewModel 还有可能暴露一些方法，用于保持 View 的状态，基于 View 上的操作来更新 Model， 并触发 View 上的事件。这个角度蕾酱，他更偏向于 View。

总之，VM 位于 View 层之后，从 Model 获取并暴露了 View 所需数据。并集成了更新View 的状态操作。

优点：UI 抽象化，View 层变和业务逻辑解耦、UI 单测友好

Javascript 中的 MVVM

说到 MVVM 就不得不提 Vue.js 。她可以说是MVVM 架构的最佳实践，专注于 MVVM 中的 ViewModel，不仅做到了数据双向绑定，而且也是一款相对比较轻量级的 JS 库，API 简洁，很容易上手。

看过的比较全面且清楚明了的 MVVM 文章在这里： https://segmentfault.com/a/1190000006599500

Referrence

https://blog.csdn.net/xu_mengmeng/article/details/50587132
https://www.cnblogs.com/LIUYANZUO/p/7231703.html?utm_source=tuicool&utm_medium=referral
https://segmentfault.com/a/1190000006599500

设计模式系列介绍到此结束，持续关注请 Star and Watch This github repo， 谢谢 ：）