vue 源码分析 双向数据binding的方法
2017-03-12 本文已影响68人
梁同桌
我们的目的是：更新数据->自动更新ui
1.首要检测数据有没有变化
2.更新ui
根据 vue 的思想, es5 提供我们一个方法，为一个对象某一个属性设置监听方法。
var data = {
a: 5;
}
//我们设置了 data对象的a属性的监听
Object.defineProperty(data, a, {
set: function(newVal) {
console.log(newVal,'为data.a设置了新值');
},
get: function() {
console.log('获取data.a');
return variable;
}
)
data.a = 10;//会调用set方法
//打印：10为data.a设置了新值。
var c = data.a;//会调用gat方法
//打印：获取data.a
-
吐槽一下，这个Swift语法一模一样啊，
但是 Swift 除了 set 和 gat 方法以外还有 willSet 即将改变和 didSet 改变后的方法。 -
这是 vue 官方的源码地址
https://github.com/vuejs/vue/blob/871ed9126639c9128c18bb2f19e6afd42c0c5ad9/explorations%2Fgetset.html
我把源码稍微修改了（基本没动），添加了一些注释。 Chrome 可以直接粘贴运行。
- 先用正则把{{}}这里面的数据找到。 以属性为“data-element-binding”绑定到DOM树上
- 根据DOM树上“data-element-binding”，找到当前的DOM。
- 根据DOM里的参数与data里的属性，通过defineProperty绑定。
- 更新data数据，然后DOM自动更新了。
<!DOCTYPE html>
<html>
<head>
<title>ideal</title>
<meta charset="utf-8">
</head>
<body>
<div id="test">
<p>{{msg}}</p>
<p>{{msg}}</p>
<p>{{msg}}</p>
<p>{{what}}</p>
<p>{{hey}}</p>
</div>
<script>
var bindingMark = 'data-element-binding'
function Element(id, initData) {
var el = document.getElementById(id)
var bindings = {} //内部暂存绑定数据及dom
var data = {} //存储bingding数据并实现监控
var content = el.innerHTML.replace(/\{\{(.*)\}\}/g, markToken) //让{{msg}} 换成 <span data-element-binding="msg"></span>
el.innerHTML = content //复制回去
for (var variable in bindings) {
bind(variable); //将每个数据的名称比如'msg'绑定到data
}
if (initData) {
for (var variable in initData) {
data[variable] = initData[variable]
}
}
function markToken(match, variable) { //遍历 match {{msg}} variable 'msg'
bindings[variable] = {} //bindings里存储了数据来源的字段比如bindings['msg']
return '<span ' + bindingMark + '="' + variable + '"></span>'
}
function bind(variable) {
bindings[variable].els = el.querySelectorAll('[' + bindingMark + '="' + variable + '"]'); //bindings里再存储msg绑定的元素
[].forEach.call(bindings[variable].els, function(e) { //删除data-element-binding属性
e.removeAttribute(bindingMark);
})
Object.defineProperty(data, variable, { //es5观察属性
set: function(newVal) {
console.log(variable);
[].forEach.call(bindings[variable].els, function(e) {
bindings[variable].value = newVal; //=>这里才是实现的绑定,更新内部暂存数据， 为了以后取
e.textContent = newVal; //更新数据到dom
})
},
get: function() {
return bindings[variable].value; //取数据仅仅是内部暂存的数据
}
})
}
}
var app = new Element('test', {
msg: 'hello',
what: 'hi'
})
</script>
</body>
</html>
个人博客： www.liangtongzhuo.com
