什么是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的setconsole.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 操作等等，如果对三大框架的底层原理感兴趣，也能够持续摸索。