这篇仿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...。