这篇仿Vue数据绑定的简单实现,是我看了一些文章之后,把他们的代码研究懂了之后写出来的。当然,这个是简单版本的,复杂版本的就...
如果只是简单实现一下Vue的数据绑定还是很简单的,只要将思路理清楚就可以。写的时候考虑的问题就是2点。
问题:
1)如何实现将数据层的数据显示到视图上
2)如何在视图上的数据改变后,通知数据层相应的数据发生了变化
3)如何让两者联系起来,当一个数据改变时,视图上的所有数据层的数据进行更新
思路:
第一个问题要将数据层的数据显示到视图上,很明显这个需要使用DOM操作,先判断 el 下的子元素上的属性是否有关键字(如: v-model、v-bind),如果有就将其与 data 中的key来进行对比,然后data里的值渲染到页面上。这里需要用到递归,从而使el下的每个层级的元素属性都进行一次筛选。
第二个问题可以通过在相应的元素(input)上进行事件监听,当视图上的数据发生了变化就改变相对应的数据成数据。这两者之间需要一个监听器,从而使当一个改变时,另外一个也跟着改变。
第三个问题实现需要利用发布订阅模式和ES5的Object.defineProperty()。首先要创建一个订阅者,里面有一个方法,使视图层上的值等于数据层的数据。在进行DOM筛选时,将对应的数据、key、元素传入订阅者,在将这个订阅者放在一个对象中,这个对象的key就是data的key。然后通过ES5的Object.defineProperty()来对data里的数据进行数据劫持,当data里的数据被重新设置,会触发set函数,然后触发监听者。
具体代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<div id="app">
<input type="text" v-model="name">
<div>{{name}}</div>
</div>
<body>
<script>
window.onload = () => {
new MyVue({
el: '#app',
data: {
name: 123
}
})
}
function MyVue(option={}) {
this.$el = document.querySelector(option.el);
this.$data = option.data;
this._watchTpl = {};
this._observer(this.$data);
this._compile(this.$el);
}
MyVue.prototype._observer = function (data) {
let _this = this;
Object.keys(data).forEach( (item, index) => {
let value = data[item];
this._watchTpl[item] = [];
Object.defineProperty( data, item, {
enumerable: true,
configurable: true,
get() {
return value;
},
set(newVal) {
if(newVal !== value) {
value= newVal;
_this._watchTpl[item].forEach((item) => {
item.update();
})
}
}
} )
} )
}
MyVue.prototype._compile = function (el) {
let nodeList = el.children;
nodeList = Array.prototype.slice.call(nodeList);
nodeList.forEach( (node, index) => {
if(node.children) {
this._compile(node);
}
if (node.getAttribute('v-model')) {
let key = node.getAttribute('v-model');
if(!this._watchTpl[key].length) {
this._watchTpl[key] = [];
}
this._watchTpl[key].push(new Watcher(node, key, this, 'value'))
node.addEventListener('input', () => {
this.$data[key] = node.value;
} )
}
let reg = /\{\{\s*([^}]+\S)\s*\}\}/g;
//该正则表达式的含义:\s匹配任何空白字符,\S匹配任何非空白字符,*匹配任何包含零个或多个前导字符串,+匹配任何至少包含一个前导字符串
//总的含义就是匹配以{{为开头，后面跟着零或多个空白符,}前面有至少一个非空白字符的以}为结尾的字符串
let content = node.textContent;
if (reg.test(content)) {
// 这篇文章介绍了replace怎么用,我以前没怎么研究过replace这个语法。
// https://blog.csdn.net/linbilin_/article/details/57094602
content.replace(reg, (matched, placeholder) => {
if(!this._watchTpl[placeholder].length) {
this._watchTpl[placeholder] = [];
}
this._watchTpl[placeholder].push(new Watcher(node, placeholder, this, 'innerHTML'))
})
}
} )
}
function Watcher (node, key, vm, type) {
this.node = node;
this.key = key;
this.vm = vm;
this.type = type;
this.update();
}
Watcher.prototype.update = function () {
this.node[this.type] = this.vm.$data[this.key];
}
</script>
</body>
</html>这篇文章主要是参考于https://segmentfault.com/a/11... ,高难度的那个是https://www.cnblogs.com/canfo...。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。