思路

通知

是否指令

调用自身walk方法，递归遍历参数data的每个属性，对其调用defineReactive方法

START

是

3：文本

遍历所有子节点

类定义：MVVM(options:Object):MVVM特点: 1.解析html模板中的指令，{{}}变量，替换数据，注册事件等操作（页面初次显示阶段）2.检测对象变化，自动更新视图(页面运行阶段)

END

1：元素

类定义：Compiler(vm:MVVM):any原型链方法：createFragment、compileElement、compileAttr、compileText→ createFragment(app:HTMLElement):DocumentFragment→ compileElement(node:DocumentFragment):any→ compileAttr(node:Attr):any→ compileText(node:Text):any

订阅发布模式

类定义：Subscriber(handle:fn):any原型链方法：subscribe、update→ subscribe(pub:Publisher):any→ update(data:any):any 在收到来自发布者的消息后，update方法将被调用

defineReactive方法中，利用Object.defineProperty重定义set

input type=\"text\" v-model=\"message\

否

处理#app节点

Observe.js

defineReactive方法中，利用Object.defineProperty重定义get/set

节点类型

订阅者调用update方法，更新dom

Compiler.js

新建订阅者

挂载_data、_el等

遍历所有属性节点

页面初始化new Compiler(vm)

发布者调用notify方法

根据指令类型执行相应操作

思路：1.定义一个数据观察类，负责数据变化检测，一旦传入的data发生了变化，我可以知道，并做些操作→ Observe(data:Object):any2.定义一个编译器类负责解析页面上的指令→ Compiler(vm:MVVM):any

数据是否有变化

找出{{}}并替换成相应的变量

类定义：Publisher():any 内部维护一个订阅者数组(subs) 原型链方法：notify → notify(data:any):any

那么问题来了：订阅者如何收集

MVVM.js

举个例子：用户向10086订阅天气预报业务。伪代码：var center10086 = new Pulisher();var user1 = new Subscriber(function (){ // todo});var user2 = new Subscriber(function (){ // todo});// 10086通知订阅了天气预报的用户center10086.notify('2018-05-10 雨');// 用户1取消了第二天的行程// 用户2...

数据检测new Observe(data)

set：比较新旧值，若发生变化，则通过发布者通知它所有的订阅者

订阅发布模式订阅者：订阅消息（如果发生了变化，请你告诉我） 当接收到消息后，作出反应 发布者：发布消息，并通知到所有的订阅者

Subscriber.js

Publisher.js

{{ message }} {{ message }} {{ message }}

节点值匹配{{}}

set被调用

下一个子节点