从零单排系列之写一个类vue框架二

昨天写了一下节点绑定 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 的文档。毕竟还在正式学习期。