简易实现vue双向数据绑定

前言

我觉得还是设置为“转载”比较合适。
毕竟，这位大神写的这篇文章是我看过的同类文章中最清晰详细流畅的。
[原文链接](https://www.cnblogs.com/kidney/p/6052935.html)
[更深入看这篇](https://github.com/DDFE/DDFE-blog/issues/7)

此处，记录下我对Vue数据绑定的个人小结。
后续会继续学习Vue，持续补充。
最后贴上我的练手源码，亲测chrome运行OK。

正文

网上讲Vue数据绑定的文档数不胜数，大多无非是提一下defineProperty。然后，你根本不知道具体如何将数据变化映射到页面上，更不明白Vue是如何实现这一步的。总之，云里雾里。
诚然，对于熟手来说，JS基本功扎实，对MVVM熟知，又用过React，可能几笔带过就已明了。但是，对于初涉前端的人来说，这类文章太不友好了。它们告诉你一个不清不楚的原理，你根本不知道怎么应用这个原理到实际。甚至很多文章作者是否自己都没有搞清楚来龙去脉也未可知。
上面那篇文章很好的一点是循序渐进，一步步提出问题，再一个个解决问题，阅读体验真的很友好。所以，我也就不拾人牙慧了。就记录下自己的小结吧。

小结

数据双向绑定，一个是监听页面的数据变化，一个是将数据变化映射到页面。
前者实现很简单(以我目前的了解来说)，问题是后者--如何映射。
Vue为了实现这点，所作的工作可以归纳为：观察数据&编译模版。
观察数据的核心手段就是Object.defineProperty，没有它一切无从谈起。
模版编译为数据和页面建立起关系。

要明白Watcher&Dep的概念。
每个需被观察的数据都有一个Dep，用于收集Watcher。
每个Watcher对应一处需被映射的显示node。
上述文章中的源码完全参照Vue的实现。

其余，都不如自己敲一遍代码，用自己的方式去理解源码。毕竟，对于大多数人来说，我们不追求写教科书式的教程，我们只要自己理解并可交流就可以了，每个人的理解方式不一样，最直接暴力的方法就是：在了解基础知识&大体框架后直接看源码。

<div id="app">
    <input type="text" v-model="text" id="a">
    <span id="b">{{text}}</span>
    {{text1}}
</div>

<script type="text/javascript">
    // let dom = nodeToFragment(document.getElementById('app'));
    // console.log(dom);

    function nodeToFragment(node, vm) {
        let flag = document.createDocumentFragment();
        let child;
        while (child = node.firstChild) {
            compile(child, vm);
            flag.appendChild(child);//能结束循环的是这句
        }
        return flag;
    }

    function compile(node, vm) {
        if (node.nodeType === 1) {
            if (node.childNodes.length > 0) {
                for (let i = 0; i < node.childNodes.length; i++) {
                    compile(node.childNodes[i], vm);
                }
            }

            let attrs = node.attributes;
            for (let i = 0; i < attrs.length; i++) {
                if (attrs[i].nodeName !== 'v-model') {
                    continue;
                }
                let name = attrs[i].nodeValue;
                node.addEventListener('input', function(e) {
                    vm[name] = e.target.value;
                })
                node.value = vm[name];
                node.removeAttribute('v-model');
            }
        }

        let reg = /\{\{(.*)\}\}/;
        if (node.nodeType === 3) {
            if (reg.test(node.nodeValue)) {
                let name = RegExp.$1;
                name = name.trim();
                node.nodeValue = vm.data[name];

                new Watcher(vm, node, name);
            }
        }
    }

    function defineReactive(obj, key, val) {
        var dep = new Dep();

        Object.defineProperty(obj, key, {
            set: function(newVal) {
                if (newVal === val) {
                    return;
                }
                val = newVal;
                dep.notify();
            },
            get: function () {
                if (Dep.target) {
                    dep.addSub(Dep.target);
                }
                return val;
            }
        });
    }
    function observe(obj, vm) {
        Object.keys(obj).forEach(function (key) {
            defineReactive(vm, key, obj[key]);
        })
    }

    function Dep() {
        this.subs = [];
    }
    Dep.prototype = {
        addSub: function(watcher) {
            this.subs.push(watcher);
        },
        notify: function () {
            this.subs.forEach(function (sub) {
                sub.update();
            });
        }
    };

    function Watcher(vm, node, name) {
        Dep.target = this;
        this.name = name;
        this.node = node;
        this.vm = vm;
        this.update();
        Dep.target = null;
    }
    Watcher.prototype = {
        update: function () {
            this.get();
            this.node.nodeValue = this.value;
        },
        get: function () {
            this.value = this.vm[this.name];
        }
    };

    function Vue(options) {
        this.data = options.data;
        observe(options.data, this);

        let id = options.el;
        let dom = nodeToFragment(document.getElementById(id), this);
        document.getElementById(id).appendChild(dom);
    }

    let vm = new Vue({
        el: 'app',
        data: {
            text: 'hello, world!',
            text1: 'haha'
        }
    });
</script>