一步一步教你用js写一个数据双向绑定的框架
熟悉vue的朋友都知道数据双向绑定，当ui输入的数据改变时，内存中的model数据也改变了，今天带大家一步一步用js实现数据双向绑定
一、原理
Object.defineProperty()方法直接在一个对象上定义一个新属性，或者修改一个已经存在的属性， 并返回这个对象。
vue使用Object.defineProperty() 方法，监控对数据的操作如果get set，从而可以自动触发数据同步。下面是代码
<script type="text/javascript">
var dep = new Dep();
Object.defineProperty(obj, key, {
get: function() {
console.log(Dep.global);
if (Dep.global) {
dep.add(Dep.global);
}
console.log("get了值"+value);
return value;
},
set: function(newValue) {
if (newValue === value) {
return;
}
value = newValue;
console.log("set了最新值"+value);
dep.notify();
}
})
</script>
dom层元素通过event事件进行数据传输，影响到model层，如下面的代码
<script type="text/javascript">
for (var i = 0; i < attr.length; i++) {
if (attr[i].nodeName == 'v-model') {
var name = attr[i].nodeValue;
node.addEventListener('input', function(e) {
vm[name] = e.target.value;
});
node.value = vm[name]; //讲实例中的data数据赋值给节点
node.removeAttribute('v-model');
}
if (attr[i].nodeName == 'v-click') {
var name = attr[i].nodeValue;
node.addEventListener('click', function(e) {
vm[name]();
});
node.removeAttribute('v-click');
}
}
</script>
中间放入一下watcher事件监听传递
<script type="text/javascript">
Watcher.prototype = {
update: function() {
this.get();
switch (this.node.nodeType) {
case 1:
this.node.value = this.value;
break;
case 3:
this.node.nodeValue = this.value;
break;
default: break;
}
},
get: function() {
this.value = this.vm[this.name];
}
}
</script>
二、完整的代码
完整的代码如下，可直接在线运行
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BFWJS DEMO PAGE</title>
</head>
<body>
<div id="mvvm">
...点击查看剩余70%
{{collectdata}}
网友评论0