实现单向数据绑定

在实现双向数据绑定的之前，先来实现单向数据绑定，首先，我们的HTML结构如下图所示。

    

    

{{msg}}

    

        

• 1

        

• {{msg}}

        

• {{test}}

    

接下来就是在JS里面实现单向数据绑定了，不管怎么样，我们就像Vue一样，直接来创建个Vue实例化对象。

new Vue({

    el:"app",

    data:{

        msg:"hello world",

        test:"单向绑定"

    }

});

而此时根本就没有Vue这个类，所以下一步直接来创建这个类，在这个类当中，我们将传递过来的el属性值赋值给id（该例中以id为例），并且也用一个data来保存传递过来的data信息。

function Vue(options){

    this.id=options.el;

    this.data=options.data;

}

好了，那么下一步的问题就是如何实现单向数据绑定的问题了，在Vue当中，我们可以通过v-model这样的属性名或者{{}}的形式来进行绑值操作，很显然，我们是需要依次获取到整个id为app标签下的所有node节点，当其是元素节点的时候，就要查看其属性名是否含有v-model，如果有，根据其设置的value值对应的去Vue实例化对象的data属性中查找并赋值；当其是文本节点的时候，就需要匹配{{}}里面的内容，然后同上操作。

为了讲解方便，就先来实现根据节点所属类别来进行赋值操作的方法，该方法需要两个参数，一个参数为当前的节点，一个为实例化的Vue对象。

function compile(node,vm){

    //当node节点为元素节点时

    if(node.nodeType === 1){

        var attr=node.attributes;

        //遍历当前节点的所有属性

        for(let [i,v] of [].entries.call(attr)){

            if(v.nodeName=="v-model"){

                var name=v.nodeValue;

                node.value=vm.data[name];

                node.removeAttribute(v.nodeName);

              }    

       }

    }

    //当node节点为文本节点时

    if(node.nodeType === 3){

            var reg=/\{\{(.*)\}\}/;

            if(reg.test(node.nodeValue.trim())){

                    var name=RegExp.$1;

                     node.nodeValue=vm.data[name];

             }

    }

}

然后很重要的一步就是获取到id为app元素节点下的所有节点，调用刚刚封装好了的compile方法即可，那么如何来获取到这所谓的所有节点呢？小伙伴们可能一下子就想到了节点属性上有一个childNodes，然后循环这里的每一项，如果该项存在着子节点的话，可以递归调用该方法，emm，听起来很有道理的感觉，代码如下图所示。

但是这么运行起来的时候结果并没有达到预期的效果，问题出现在哪了呢？说实话，我也踩了一下这个坑，思考了一下才反应过来，这主要是由于DOM映射导致的，我们可以试着打印出循环的结果，可以发现只打印出了4次，而并没有将里面的7项都给输出，至于DOM映射机制在本篇文章当中就不进行过多的介绍，详情可百度或参考我的个人博客。

既然知道了是DOM映射导致的问题，那么又该如何去解决呢，其实很简单，在存在DOM映射的情况下，每一次node.childNodes的长度都会减一，并且去除的这一个正好是之前数组的第一项，故而我们只需要每一次拿到node.childNodes的第一项就可以了。

那么除了for循环实现方式以外，有没有其它更好的实现方式呢，答案是有的，还是类似的逻辑，我们可以用while来代替for循环，只要我们的node存在第一个子节点（firstChild）就可以了。

好了，到此为止，咱们就实现了单向数据绑定的操作，下一篇咱们再深入去实现双向数据绑定的骚操作吧！