昨天写了一下节点绑定model的替换，已经如何检测model 的方法
今天优化一下，勉强实现一个双向绑定
看下昨天的代码
<script> function Vue(obj) { var app = document.querySelector(obj.el); for(let i in obj.data) { this[i] = obj.data[i]; } var html = app.childNodes; var that = this; html.forEach(function(data) { if(data.nodeName == '#text') { data.data = data.data.replace(/\{\{([\s\S]+)\}\}/g, function(a, b){return that[b]}) } }) }</script><div id='app'> 这里是{{title}}</div><script> var app = new Vue({ el: '#app', data: { title: 'Hello World' } })</script>在实现双向绑定之前，先普及一个set 和 get 的知识。我说点大白话，反正也不是专业的。
一个对象的key在被赋值 value 的时候，被拦截，触发set方法，set的参数就是那个 value
但是这个赋值就会被拦截了，所以需要给一个新的key一个值。然后把value赋值到新的值上面去。如果强行给之前的key赋值，就会发生无限set 的情况。
稍微加工了一下
<script> function Vue(obj) { this.app = document.querySelector(obj.el); // 获取函数作用域 this.data = obj.data; //获取data值 this.getData(this.data); //设置钩子函数 this.getWatcher(this.app.childNodes); // 获得包含Model的节点 } Vue.prototype.getData = function(data) { for(var i in data) { // 遍历 data 里面的数据 Object.defineProperty(this, i, { // 在this里面 设置同名key,比如，data里面有title, 那么就去设置一个this.title set: function(e) { this.data[i] = e; // 当this.title 被设置 value 的时候，将 this.data.title = value this.digest(i); // 更新包含这个model 的 dom }.bind(this), get: function() { return this.data[i]; // 想获取this.title 的话，就去调取 this.data.title 返回 } }) } } Vue.prototype.getWatcher = function(inner) { // 这个代码昨天写过，就是去检测节点中包不包含model this.watcher = {}; var that = this; inner.forEach(function(data) { if(data.nodeName == '#text') { data.data = data.data.replace(/\{\{([\s\S]+)\}\}/g, function(a, b){ data.realData = data.data; //自定义一个属性realData，把原始内容保存一下，方便复用 dom.realData = 这里是{{title}} if(!that.watcher[b]) that.watcher[b] = []; that.watcher[b].push(data); //把这个节点添加到被监听对象中去 {title:[dom]} return that[b]; // 先把{{title}}替换成 helloworld }) } }) } Vue.prototype.digest = function(e) { var that = this; this.watcher[e].forEach(function(node) { node.data = node.realData.replace(/\{\{([\s\S]+)\}\}/g, function(a, b) {return that[b]}); // 把title那个节点改成新的数值 }) }</script><div id='app'> 这里是{{title}}</div><script> var app = new Vue({ el: '#app', data: { title: 'Hello World' } }) setTimeout(function(){app.title = 5;}, 1000) setTimeout(function(){app.title = 10;}, 2000)</script>代码有些粗劣，但是功能是实现了。1.首先 先读取 new Vue传入对象时候，data 里面的数据， 然后对其进行遍历，给 实例化对象添加 同名属性， 这个同名属性主要就是用来被监听set,get（双向绑定实现的基本原理）。 也就是 vue.prototype.getData
2.然后呢，去递归dom树（这个以后再写，先简单就一层，不然写的内容会增多很多），然后用正则过滤出里面 {{}}类型的节点，将 这个节点的原始内容（比如{{title}}保存到这个节点的一个自定义属性里，我写的是realData），并将这个节点添加到watcher里面去。 也就是vue.prototype.watcher
3.然后呢，在同名属性被设置的时候呢，就触发钩子函数，将这个同名属性所涉及到的节点的data给更新。 也就是vue.prototype.digest
如果上面的内容没有看的太明白的话，可以参考一下代码注释。。。我下线看看怎么优化代码或者优化思路，晚上或者明天更新。我还得看看vue的文档。毕竟还在正式学习期。