MVVM响应式数据原理代码

这是我学习的时候找到的最小化 MVVM 的源码
我把我理解的都标注在代码中，共同监督，共同进步，有错的地方，提醒我一下哈！

class Vue{
    constructor(opt){
        this.opt = opt
        this.observe(opt.data)
        let root = document.querySelector(opt.el)
        this.compile(root)
    }
    // 为响应式对象 data 里的每一个 key 绑定一个观察者对象
    observe(data){ 
        Object.keys(data).forEach(key => {
            let obv = new Observer() 
            if(typeof data[key]=='Object') observe(data[key]);//判断是否是引用值，是则递归遍历 observe(data)
            data["_"+key] = data[key]
            // 通过 getter setter 暴露 for 循环中作用域下的 obv，闭包产生
            Object.defineProperty(data, key, {
                get(){
                    Observer.target && obv.addSubNode(Observer.target);//在获取该属性值的时候，若Object.target有值的时候，则将该节点加到key的obv的subNode数组中，代表这个节点使用了该属性值
                    return data['_'+key]
                }, 
                set(newVal){
                    obv.update(newVal)//将使用该key的节点都遍历一遍，并赋予新的值
                    data['_'+key] = newVal
                }
            })
        })
    }
    // 初始化页面，遍历 DOM，收集每一个key变化时，随之调整的位置，以观察者方法存放起来    
    compile(node){
        [].forEach.call(node.childNodes, child =>{
            if(!child.firstElementChild && /\{\{(.*)\}\}/.test(child.innerHTML)){//找到子节点是文本节点的节点
                let key = RegExp.$1.trim();
                child.innerHTML = child.innerHTML.replace(new RegExp('\\{\\{\\s*'+ key +'\\s*\\}\\}', 'gm'),this.opt.data[key]) ;
                Observer.target = child;//将使用key的节点添加到Observer.target
                this.opt.data[key]; //这时候跳到属性选择符的getter，将该节点添加到使用key的数组中
                Observer.target = null;//恢复
            }
            else if (child.firstElementChild) //子节点不是文本节点
            this.compile(child);//进入下一层
        })
    }    
}
// 常规观察者类（每一个属性都自己的观察者，负责收集使用该属性的元素节点，并身具添加节点和更新节点值的方法，观察者订阅了某个属性值，当属性值发生变化，观察者执行update（newVal））
class Observer{
    constructor(){
        this.subNode = []   //用于存储使用某个属性值的节点
    }
    addSubNode(node){
        this.subNode.push(node)
    }
    update(newVal){
        this.subNode.forEach(node=>{
            node.innerHTML = newVal
        })
    }
}

以上MVVM代码思路 ：

• [observe 函数]：首先我们会对需要响应式的 data 对象进行 for 循环遍历，为 data 的每一个 key 映射一个观察者对象

  • 在 ES6 中，for 循环每次执行，都可以形成闭包，因此这个观察者对象就存放在闭包中
  • 闭包形成的本质是 内层作用域中堆地址暴露，这里我们巧妙的用 getter/setter 函数暴露了 for 循环里的观察者

• [compile 函数]：我们从根节点向下遍历 DOM，遇到 mustache 形式的文本，则映射成 data.key 对应的值，同时记录到观察者中

  • 当遍历到 {{xxx}} 形式的文本，我们正则匹配出其中的变量，将它替换成 data 中的值
  • 为了满足后续响应式的更新，将该节点存储在 key 对应的观察者对象中，我们用 getter 函数巧妙的操作了闭包

• 在页面初次渲染之后，后续的 eventLoop 中，如果修改了 key 的值，实际会通过 setter 触发观察者的 update 函数，完成响应式更新

原文