JavaScript /MV*/ 模式

鉴于上篇文章在上周五会议上被问到一些基础性问题时引发了一些碰撞搞得我好尴尬，这篇我尽量写的完备一些，但是我不写示例代码了，这篇文章最低门槛几乎和上一篇一样，是需要小伙伴们知道 JavaScript 是什么，/MV*/ 这个正则表达式能够匹配到什么。

背景

最近为开发新版瑞信通做准备，看 demo 源码时注意到 cache.js 中的一段注释：

// 建议开发者选择mvvm框架来通过数据来驱动UI变化

此篇我和小伙伴们分享的就是 MVVM，但是介绍 MVVM 之前，完备性起见要从 MVC 和 MVP 开始。
因为我手头有 《JavaScript 设计模式》这本书，此篇文章也算是我对这本书做笔记了。

MVC

我觉得 MVC 是 well-known 并不会引起小伙伴们质疑，正文从下述 MVP 简介开始。

MVP

模型-视图-表示器（MVP）是 MVC 设计模式的一种衍生模式，专注于改进表示逻辑。它是在 1990 年代由 Taligent 公司创造的。

Model、View 和 Presenter

MVP 中的 P 代表表示器。这是一个包含用于 View（视图）的用户界面业务逻辑的组建。与 MVC 不同，来自 View（视图）的调用将委托给表示器，表示器是从 View（视图）中解耦，通过接口与它对话。
最后一句话总结一下 MVP 和 MVC 之间的区别：

Model View Presenter 设计模式实际上就是许多开发人员已经熟悉的模型视图控制器的一个最新版本；两者的主要区别是 MVP 真正将 UI 从应用程序的域/服务层中分离。

MVVM

MVVM（模型-视图-视图模型）是一种基于 MVC 和 MVP 的架构模式，它试图更清晰地将用户界面（UI）开发从应用程序的业务逻辑与行为中分离。
Model：和 MV* 家族的其他成员一样，MVVM 中的 Model（模型）表示应用程序将会使用的特定领域数据或信息。

View：与 MVC 一样，View 实际上仅是与用户进行交互的应用程序的一部分。
ViewModel：可以将 ViewModel 作为一个专门的 Controller，充当数据转换器。它将 Model 信息转变为 View 信息，还将命令从 View 传递到 Model。

小结：View 和 ViewModel、ViewModel 和 Model

View 和 ViewModel 之间通过数据绑定和事件进行通信。View 处理自己的用户界面事件，必要是将它们映射到 ViewModel。Model 和 ViewModel 上的属性通过双向数据绑定进行同步和更新。
ViewModel 似乎是完全负责 MVVM 中的 Model，但这种关系中有一些微妙之处值得我们注意。ViewModel 可以为了数据绑定而暴露 Model 或 Model 属性，也可以包含接口，用于获取和操作在 View
中暴露的属性。

MVC、MVP 与 MVVM

MVP 和 MVVM 均是 MVC 的衍生品。MVC 与其衍生品之间的主要区别是每一层对其他层的依赖，以及它们是如何紧密地互相绑定的。

在 MVC 中，View 位于架构之上，与 Controller（控制器）相邻。Model 位于 Controller（控制器）之下，因此 View 了解 Controller（控制器），Controller（控制器）了解 Model。在这里，View 能够直接访问 Model。但是，向 View 暴露完整的 Model 可能会带来安全性和性能成本，这取决与应用程序的复杂性。MVVM 试图避免这些问题。
在 MVP 中，Controller（控制器）的作用被 Presenter 所替代。表示器与 View（视图）位于同一位置，监听 View 和 Model 的事件，并调解它们之间的行动。与 MVVM 不同，它没有使用将 View 绑定至 ViewModel 的机制，因此我们转而依赖每个 View 来实现用于让 Presenter 与 View 进行交互的接口。
因此，MVVM 允许我们创建 Model 的特定于 View 的子集，它们可以包含状态和逻辑信息，无需向 View 暴露整个 Model。与 MVP 的 Presenter 不同，引用 View 时不需要 ViewModel。View 可以绑定到 ViewModel 上的属性，而属性会将 Model 所包含的数据暴露给 View。如前所述，View 的抽象意味着它背后的代码所要求的逻辑更少了。