mvvm简图
Model: 服务器上的逻辑
view: 页面展示
ViewModel: 比如vue.js，做为view和model的中间处理
双向绑定简图
设计模式简图
Observe: 监听data数据变化
Dep: 维护观察者列表，列表留存了数据key|value以及改变数据的回调
Watcher: 在compile中调用添加观察者列表(是observe和compile的中间者)
设计模式骨骼代码
html
1 | <!DOCTYPE html> |
入口index.js
此处将data属性代理到vm上，可以通过get|set触发到data属性的get|set
触发observe递归遍历data对象属性1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30function Vue (options) {
var self = this;
this.data = options.data;
this.methods = options.methods;
Object.keys(this.data).forEach(function (key) {
// 将data属性代理到vm上
self.proxyKeys(key);
});
observe(this.data);
new Compile(options.el, this);
options.mounted.call(this); // 所有事情处理好后执行mounted函数
}
Vue.prototype = {
proxyKeys: function (key) {
var self = this;
Object.defineProperty(this, key, {
enumerable: false,
configurable: true,
get: function () {
return self.data[key];
},
set: function (newVal) {
self.data[key] = newVal;
},
});
},
};
observe.js
递归使用Object.defineProperty()设置创建每个对象属性的getter|setter
getter中返回value外，做新增Dep观察者列表的调用触发
setter中设置newValue外，告知Dep观察列表遍历更新处理1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56function Observer (data) {
this.data = data;
this.walk(data);
}
Observer.prototype = {
walk: function (data) {
var self = this;
Object.keys(data).forEach(function (key) {
self.defineReactive(data, key, data[key]);
});
},
defineReactive: function (data, key, val) {
var dep = new Dep();
var childObj = observe(val);
Object.defineProperty(data, key, {
enumerable: true,
configurable: true,
get: function getter () {
if (Dep.target) {
dep.addSub(Dep.target);
}
return val;
},
set: function setter (newVal) {
if (newVal === val) {
return;
}
val = newVal;
dep.notify();
},
});
},
};
function observe (value, vm) {
if (!value || typeof value !== 'object') {
return;
}
return new Observer(value);
}
function Dep () {
this.subs = [];
}
Dep.prototype = {
addSub: function (sub) {
this.subs.push(sub);
},
notify: function () {
this.subs.forEach(function (sub) {
sub.update();
});
},
};
Dep.target = null;
watcher.js
通过Dep.target缓存自己，触发访问data的getter来追加观察者列表，观察者列表存的是Watcher实例（实例对象包含vm、属性名、属性值、回调）
data值改变则通过Observe设置的属性setter回调通知到Dep遍历所有观察者去做更新，触发Watcher实例的回调1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27function Watcher (vm, exp, cb) {
this.cb = cb;
this.vm = vm;
this.exp = exp;
this.value = this.get(); // 将自己添加到订阅器的操作
}
Watcher.prototype = {
update: function () {
this.run();
},
run: function () {
var value = this.vm.data[this.exp];
var oldVal = this.value;
// data值(new)与dep列表值(old)对比，更新dep列表&callback
if (value !== oldVal) {
this.value = value;
this.cb.call(this.vm, value, oldVal);
}
},
get: function () {
Dep.target = this; // 缓存自己
var value = this.vm.data[this.exp]; // 强制执行监听器里的get函数
Dep.target = null; // 释放自己
return value;
},
};
compile.js
编译解析指令，事件指令则给node添加事件绑定methods中事件，v-model或者是textNode则创建Watcher实例来追加观察者列表
Dom操作采用fragment提高页面性能
1 | function Compile (el, vm) { |