基于ES5defineProperty 实现简单的 Mvvm框架

function Mvvm(options = {}) {
    
    /*定义类的$option属性，_data私有属性，并将 私有$option.data的引用复制给私有属性_data和局部变  量data
     */
    this.$options = options;
    let data = this._data = this.$options.data;
    
    /*将data中所有的key设置观察者，增加数据变更的检测*/
    observe(data);
    
    /*将data中的所有的key代理到Mvvm实例上，形成mvvm实例树，方便书写*/
    for (let key in data) {
        Object.defineProperty(this, key, {
            configurable: true,
            get() {
                return this._data[key];
            },
            set(newVal) {
                this._data[key] = newVal;
            }
        })
    }
    
    /*数据如果变更，执行dom渲染*/
    new Compile(this.$options.el, this)
}

function observe(data) {
    if (!data || typeof data !== 'object') return;
    return new Observe(data);
}

function Observe(data) {
    
    /*创建一个消息订阅发布池类，包含一个watcher属性，watcher指向一个Watcher的实例，每个Watcher实例  都是一个订阅者，另一个属性是一个事件池数组events*/    
    let dep = new Dep();
    
    /*data的每一个键值对循环执行observe方法*/
    for (let key in data) {
        let val = data[key]
        observe(val);
        
        /*对data的每一个key进行数据拦截, 设置get，当创建一个Watcher实例的时候，显示触发get，此时将这个Watcher实例（订阅者）添加到消息订阅发布池的事件池中；设置set 当设置新的值时候，触发 set方法， 如果所设值与原来不相等， 则重新监听新的值得变更， 并触发Watcher实例（订阅者）的notify方法，触发 Watcher实例的回调，更新视图数据*/
        Object.defineProperty(data, key, {
            configurable: true,
            get() {
                Dep.watcher && dep.addEvent(Dep.watcher);
                return val;
            },
            set(newVal) {
                if (val === newVal) {
                    return;
                }
                val = newVal;
                observe(newVal);
                dep.notify();
            }
        })
    }
}

function Compile(el, vm) {
    /*获取元素节点*/
    vm.$el = document.querySelector(el);
    
    /*创建文档碎片对象*/
    let fragment = document.createDocumentFragment();
    
    /*当vm.$el.firstChild存在时，将vm.$el.firstChild依次加入到文档碎片中*/
    while (child = vm.$el.firstChild) {
        fragment.appendChild(child);
    }
    
    /*对html文档中的插值表达式等进行替换*/
    function replace(frag) {
        
       
        Array.from(frag.childNodes).forEach(node => {
            
            // 插值表达式
            let txt = node.textContent;
            let reg = /{{(.*?)}}/g；
            if (node.nodeType === 1 && reg.test(txt)) {
                let arr = RegExp.$1.split('.');
                let val = vm;
                arr.forEach(key => {
                    val = val[key]
                });
                // 执行替换
                node.textContent = txt.replace(reg, val).trim();
                
                // 添加监听
                new Watcher(vm, RegExp.$1, (newVal) => {
                    node.textContent = txt.replace(reg, newVal).trim();
                })
            }
            
            // 双向数据绑定
            if(node.nodeType ===1 ) {
                let nodeAttr = node.attributes;
                // console.log(nodeAttr)  Map

                Array.from(nodeAttr).forEach(attr => {
                    let name = attr.name;
                    let value = attr.value;

                    if (name.includes('v-')) {
                        
                        let arr = value.split('.');
                        let val = vm;
                        arr.forEach( key => {
                            val = val[key]
                        })
                        console.log(value)
                        node.value = val
                    }

                    new Watcher(vm, value, (newVal) => {
                        node.value = newVal;
                    });

                    node.addEventListener('input', e => {
                        // 根据传入的绑定值的对象深度值来处理， 如果是单个值，则直接赋值， 如果是多个，则使用eval()函数处理
                        if(value.split('.').length > 1) {  
                            eval("vm."+ value + "= e.target.value");
                        } else {
                            vm[value] = e.target.value
                        }                        
                    })
                })
            }

            if (node.childNodes && node.childNodes.length) {
                replace(node)
            }
        })
    }

    replace(fragment);
    vm.$el.appendChild(fragment);
}