关于javascript:浅析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 参考：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 操作等等，如果对三大框架的底层原理感兴趣，也能够持续摸索。