自己手动实现简单的双向数据绑定 mvvm

数据绑定

　　数据绑定一般就是指的 将数据 展示到 视图上。目前前端的框架都是使用的mvvm模式实现双绑的。大体上有以下几种方式：

1. 　发布订阅
2.    ng的脏检查
3.    数据劫持

　　vue的话采用的是数据劫持和发布订阅相结合的方式。 而数据劫持用的是Object.defineProperty来实现的， 可以通过绑定get和set来在获取和设置数据的时候触发相应的函数。

实现

　　所以我们需要一个监听器Observe来监听数据的变化。在数据发生变化时，我们需要一个Watcher订阅者来更新视图，我们还需要一个指令的解析器compile来解析指令和初始化视图。

• • Observe 监听器： 监听数据的变化， 通知订阅者
  • Watcher 订阅者： 收到数据的变化， 更新视图
  • Compile 解析器： 解析指令，初始化模板，绑定订阅者

　　Observe

　　　　监听数据的每一个属性， 由于可能会有多个watcher，所以需要一个容器来存储。

    function Sub() {
        this.subs = [];
    }
    Sub.prototype = {
        add(sub) {
            this.subs.push(sub);
        },
        trigger() {
            this.subs.forEach(sub => {
                sub.update();
            })
        }
    };
    Sub.target = null;

    function observe(data) {
        if (typeof data !== 'object' || !data) return;
        Object.keys(data).forEach(item => {
            let val = data[item];
            let sub = new Sub();
            Object.defineProperty(data, item, {
                enumerable: true,
                configurable: false,
                get() {
                    if (Sub.target) {
                        sub.add(Sub.target);
                    }
                    return val;
                },
                set(newVal) {
                    val = newVal;
                    sub.trigger();
                }
            })
        })
    }

View Code