MVVM 模式是 MV* 模式的一个变种。

相对MVP模式，它采用双向绑定（data-binding）：View发生变动，自动反映在 ViewModel上，反之亦然。当下流行的Vue就是采用的这种模式。

2. MVVM具体实现

MVVM框架最常见的特性之一就是数据的双向绑定，效果如下：

代码如下：

常见的数据绑定方式有如下3种：

l 发布者-订阅者模式（Backbone.js） -- 监听

l 脏值检查（Angualr.js）        -- 周期循环检查

l 数据劫持（Vue.js）            -- 数据劫持结合发布者-订阅者模式

2.1. 实现MVVM结构

在原型上提供代理方法，采用Object.defineProperty来胁持值的获取和设值操作：

2.2. 实现属性劫持

创建一个observer.js完成模型数据的胁持。

首先定义一个observe方法，接受模型数据。

定义一个defineReactive方法来完成模型属性的胁持：

2.3. 实现模板解析

首先接MVVM中调用模板解析器。

接下来创建一个templateCompiler.js.

大概思路：

Ø 准备需要的目标模板盒子和vm对象。

Ø 把模板提取到内存fragment中，方便做批量编译

Ø 执行初始化编译方法，逐行对fragment中的节点进行编译。

目前主要针对文本节点。例如:{{message}}

元素节点上的指令。例如：v-model

Ø 最后把结果内容放回到页面。

在原型中实现方法：

使用documentFragment来创建内存代码片段，提高解析效率

初始化方法，逐行提取出模板盒子中每一个节点，根据类型做不同解析

提供2种解析方法，分别把“表达式”内容当成文本指令解析，和元素节点的“指令属性”解析。

提供指令解析对象。

根据不同指令，提供对应的更新规则。

OK，做到这一步，我们初步实现了对模板的解析，实现了初次模型渲染到视图。

但是目前还无法在对一次渲染之后的操作进行相应。所以，我们还需要一个“观察者”，对将来发生的变化进行响应！！

2.4.
实现变化监听

创建观察者构造，收集观察所需信息。

在原型上扩展观察者的获取和更新方法

联通订阅体系，首先回到observer.js中，定义发布对象。

在observe逻辑中

一切准备就绪，去为我们的表达式或者指令关注的属性，添加观察者。

图片22.png (77.62 KB, 下载次数: 82)

下载附件

2018-4-11 17:39 上传

一切就绪，双向绑定实现。