从 Object.defineProperty 到双向绑定

2016.08.29

近日读了 Vue.js 一部分源代码,倒也是感到道阻且长。其中最核心的一点就是数据绑定。

相比于 Angular.js 的脏值检查与 React.js 的虚拟 DOM,Vue.js 运用了 Object.defineProperty 来追踪数值的变化和依赖,相当于对数据的读取进行了“劫持”。

依据这个原理,我写了一个非常基本的利用 Object.defineProperty 来实现数据的双向绑定的例子。

其中主要引用的 MVVM.js 代码没超过 50 行,超级短是不是。

下面是用来展示的 index.html:

index.html

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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<label for="input"> 输入:</label>
<input type="text" id="input" model="someStr">
<br>
<span> 输出:</span>
<span id="output"></span>
<script src="MVVM.js"></script>
<script>
new MVVM({
input:document.getElementById('input'),
output:document.getElementById('output'),
data:{
someStr:'hello world'
}
})
</script>
</body>
</html>

MVVM 构造函数(类)接收三个参数,分别是输入元素输出元素和 data 对象。

注意到其中 id 为 input 的元素,其中有一个指令 model,值为 someStr,这个值将会被绑定到 data 对象中的 someStr 上。

MVVM.js

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
class MVVM {
constructor(options) {
this.input = options.input
this.output = options.output
let data = this.data = options.data
let key = null
// 解析节点,找到节点的 model 属性
Array.from(this.input.attributes).forEach((attr) => {
if (attr.name == 'model') {
key = attr.value
}
})
if (key && data[key]) {
let value = data[key]
this.input.value = value
this.output.textContent = value
// 开始绑定
this.defineReactive(data, key, value)
}
}
defineReactive(data, key, val) {
// 对节点的值监听
this.input.addEventListener('input', (e) => {
this.data[key] = e.target.value
}, false)
// 将 data 对象中的值转换为 getter 和 setter
Object.defineProperty(data, key, {
enumerable: true,
configurable: false,
get: () => val,
set: (newVal) => {
if (newVal === val) {
return
}
val = newVal
// 通知视图更新
this.notify(newVal)
}
})
}
notify(val) {
this.output.textContent = val
}
}

MVVM.js 返回一个类,对传入的数据进行绑定。不过这个实在是再简单不过了,因为绑定的只只有一个,属性也只有 model,甚至如果其中 someStr 不是数值而是对象也不能进行深层的绑定。

嘿不过用于演示 Object.defineProperty 的数据绑定最基本用法已经足够啦。

接下来如果有时间(呜呜快开学了),我想写一点读 Vue.js 核心代码的体会,看一看在 Vue.js 源码里 Object.defineProperty 的用法,那才是复杂的不像话。。。