浅析MVVM模式下的双向数据绑定

什么是MVVM模式

MVVM是由MVC发展而来 ， 在传统的MVC模式中，Model是数据层，View层只负责展示数据，Controller层负责数据解析，但是对于复杂的数据结构，继续按照MVC的设计思路，将数据解析的部分放到了Controller里面，那么Controller就将变得相当臃肿（Controller被设计出来并不是处理数据解析的），为此开发者们专门为数据解析创建出了一个新的类：ViewModel，这就是MVVM模式

当用户操作 View(视图)，ViewModal 感知到变化，然后通知 Modal 发生相应改变；反之当 Modal(数据) 发生改变，ViewModal 也能感知到变化，使 View 作出相应更新。

如何实现MVVM模式

实现mvvm主要包含两个方面，数据变化更新视图，视图变化更新数据：

关键点在于data如何更新view，因为view更新data其实可以通过事件监听即可，比如input标签监听 'input' 事件就可以实现了。所以我们着重来分析下，当数据改变，如何更新视图的。

实现数据双向绑定的方法有很多：

其中比较有名的就是vue的数据劫持方式了； vue3版本之前是采用数据劫持结合发布者-订阅者模式的方式来实现数据的双向绑定;

设计模式--发布订阅

发布订阅模式定义了一种一对多的依赖关系，让多个订阅者对象同时监听某一个主题对象。这个主题对象在自身状态变化时，会通知所有订阅者对象，使它们能够自动更新自己的状态。

数据劫持

所谓数据劫持，指的是在访问或者修改对象的某个属性时，通过一段代码拦截这个行为，进行额外的操作或者修改返回结果。比较典型的是 Object.defineProperty() 和 ES2015 中新增的 Proxy 对象。

Object.defineProperty()

它可以来控制一个对象属性的一些特有操作，比如读写权、是否可以枚举，这里我们主要先来研究下它对应的两个描述属性get和set

var o = {};
var bValue;
Object.defineProperty(o, "b", {
    get : function(){
        console.log('get')
        return bValue;
    },
    set : function(newValue){
        console.log('set')
        bValue = newValue;
    },
    enumerable : true,
    configurable : true
});
o.b = 38; //触发对象o的set
console.log(o.b)//触发对象o的get

api参考：https://developer. mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

基于数据劫持mvvm的双向绑定，必须要实现以下几点：

数据监听器（observer）

对data中的所有数据做监听，通过Object.defineProperty,调用getter和setter方法对数据进行劫持，发生数据调用是触发get方法，发生数据改变时触发set方法；

/**监听数据变化**/
observer(data) {
    Object.keys(data).forEach(key => {
            let value = data[key];
            let dep = new Dep();
            Object.defineProperty(data, key, {
                configurable: true,
                enumerable: true,
                get() {
                        //数据调用触发get，一旦调用数据就会添加到订阅中心
                        if (Dep.target) {
                                dep.addSub(Dep.target);
                        }
                        return value;
                },
                set(newValue) {
                        console.log("set", newValue);
                        if (newValue !== value)
                            value = newValue;
                        //一旦数据改变，通知订阅者
                        dep.notify(newValue);
                    }
            })
    })
}

指令解析器（compile）

获取调用相应数据的节点（文本节点或者是标签节点）并替换最新的数据，例如{{}}；

循环遍历页面所有节点，获取到的所有文本节点或者是标签，判断当前是文本节点还是标签，拿到节点数据创建一个订阅对象；

compile(el) {
    // 获取需要挂载的根节点
    let element = document.querySelector(el);
    this.compileNode(element);
}

compileNode(element) {
    // 模板解析
    let childNodes = element.childNodes;
    // console.log(childNodes);
    Array.from(childNodes).forEach(node => {
        //如果是 文本节点
        if (node.nodeType == 3) {
            //文本
            // console.log(node);
            let nodeContent = node.textContent;
            // console.log(nodeContent);
            let reg = /\{\{\s*(\S*)\s*\}\}/;
            if (reg.test(nodeContent)) {
                // console.log("("+RegExp.$1+")");
                node.textContent = this._data[RegExp.$1];
                // 创建一个订阅者
                new Watcher(this, RegExp.$1, newValue => {
                    node.textContent = newValue;
                });
            }
        } 
        else if (node.nodeType == 1) {
            // 如果是标签
            let attrs = node.attributes;
            // console.log(attrs);
            Array.from(attrs).forEach(attr => {
                // console.log(attr);
                let attrName = attr.name;
                let attrValue = attr.value;
                // console.log(attrName);
                if (attrName.indexOf("k-") == 0) {
                    attrName = attrName.substr(2);
                    console.log(attrName);
                    if (attrName == "model") {
                        node.value = this._data[attrValue];
                    }
                    node.addEventListener("input", e => {
                        // console.log(e.target.value);
                        this._data[attrValue] = e.target.value;
                    })
                    // 创建一个订阅者
                    new Watcher(this, attrValue, newValue => {
                        node.value = newValue;
                    });
                }
            })
        }
        if (node.childNodes.length > 0) {
            this.compileNode(node);
        }
    })
}

数据订阅中心（Dep）

功能是添加订阅者和通知订阅者，具有存储和分发功能，发布者和订阅者都需要依赖订阅中心，任何发生调用的数据都会被添加到订阅中间，并且通知相应的订阅者；

//订阅中心，功能是添加订阅者和通知订阅者
class Dep {
    constructor() {
        this.subs = [];
    }
    addSub(sub) {
        this.subs.push(sub);
    }
    notify(newValue) {
        this.subs.forEach(v => {
            v.update(newValue);
        })
    }
}

订阅者（Watcher）

初始化时，所有调用的节点都会创建成一个订阅者，当数据发生变化后触发相应的update更新回调函数；

//初始化new出n多个watcher对象，并传入对应的回调
//订阅者
class Watcher {
    constructor(vm, exp, cb) {
        //缓存自己 避免重复调用重复添加
        Dep.target = this;
        vm._data[exp];
        this.cb = cb;
        Dep.target = null
    }
    update(newValue) {
        console.log("更新了", newValue);
        this.cb(newValue);
    }
}

整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果

Proxy数据代理

Proxy 在 ES2015 规范中被正式加入，在数据劫持这个问题上，Proxy 可以被认为是 Object.defineProperty() 的升级版。外界对某个对象的访问，都必须经过这层拦截。因此它可以劫持整个对象，并返回一个新对象，而不是 对象的某个属性，所以也就不需要对 keys 进行遍历。但是依旧不支持对象嵌套，支持数组的push，pop，shift

proxy的构造函数：

var proxy = new Proxy(target, handler);

其中有两个参数：

target是用Proxy包装的被代理对象(可以是任何类型的对象，包括原生数组，函数，甚至另一个代理)。

handler是一个对象，其声明了代理target 的一些操作，其属性是当执行一个操作时定义代理的行为的函数。

var arr = [1,2,3]
var handle = {
    //target目标对象 key属性名 receiver实际接受的对象
    get(target,key,receiver) {
        console.log(`get ${key}`)
        // Reflect相当于映射到目标对象上
        return Reflect.get(target,key,receiver)
    },
    set(target,key,value,receiver) {
        console.log(`set ${key}`)
        return Reflect.set(target,key,value,receiver)
    }
}
//arr要拦截的对象，handle定义拦截行为
var proxy = new Proxy(arr,handle)
proxy.push(4) 

但新标准同样也有劣势，那就是：

• Proxy 的兼容性不如 Object.defineProperty() (caniuse 的数据表明，QQ 浏览器和百度浏览器并不支持 Proxy，这对国内移动开发来说估计无法接受，但两者都支持 Object.defineProperty())
• 不能使用 polyfill 来处理兼容性

小结

数据绑定只是MVVM模型中的冰山一角，比如在代码实现过程中订阅者更新数据是直接修改DOM的，是否可以将高性能消耗的DOM操作合并在一起处理来提升效率，这就引出了一系列我们常常听到的Virtual-DOM(虚拟DOM树)、 diff 操作等等，如果对三大框架的底层原理感兴趣，也可以继续探索。