什么是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(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);        }    })}

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

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

初始化时，所有调用的节点都会创建成一个订阅者，当数据发生变化后触发相应的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 来处理兼容性一、什么是双向绑定

我们先从单向绑定切入单向绑定非常简单，就是把Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动更新双向绑定就很容易联想到了，在单向绑定的基础上，用户更新了View，Model的数据也自动被更新了，这种情况就是双向绑定举个栗子

当用户填写表单时，View的状态就被更新了，如果此时可以自动更新Model的状态，那就相当于我们把Model和View做了双向绑定关系图如下

二、双向绑定的原理是什么

我们都知道 Vue 是数据双向绑定的框架，双向绑定由三个重要部分构成

数据层（Model）：应用的数据及业务逻辑视图层（View）：应用的展示效果，各类UI组件业务逻辑层（ViewModel）：框架封装的核心，它负责将数据与视图关联起来

而上面的这个分层的架构方案，可以用一个专业术语进行称呼：MVVM这里的控制层的核心功能便是 “数据双向绑定” 。自然，我们只需弄懂它是什么，便可以进一步了解数据绑定的原理

理解ViewModel

它的主要职责就是：

数据变化后更新视图视图变化后更新数据

当然，它还有两个主要部分组成

监听器（Observer）：对所有数据的属性进行监听解析器（Compiler）：对每个元素节点的指令进行扫描跟解析,根据指令模板替换数据,以及绑定相应的更新函数三、实现双向绑定

我们还是以Vue为例，先来看看Vue中的双向绑定流程是什么的

new Vue()首先执行初始化，对data执行响应化处理，这个过程发生Observe中同时对模板执行编译，找到其中动态绑定的数据，从data中获取并初始化视图，这个过程发生在Compile中同时定义⼀个更新函数和Watcher，将来对应数据变化时Watcher会调用更新函数由于data的某个key在⼀个视图中可能出现多次，所以每个key都需要⼀个管家Dep来管理多个Watcher将来data中数据⼀旦发生变化，会首先找到对应的Dep，通知所有Watcher执行更新函数

流程图如下：

实现

先来一个构造函数：执行初始化，对data执行响应化处理

class Vue {    constructor(options) {      this.$options = options;      this.$data = options.data;              // 对data选项做响应式处理      observe(this.$data);              // 代理data到vm上      proxy(this);              // 执行编译      new Compile(options.el, this);    }  }  

对data选项执行响应化具体操作

function observe(obj) {    if (typeof obj !== "object" || obj == null) {      return;    }    new Observer(obj);  }    class Observer {    constructor(value) {      this.value = value;      this.walk(value);    }    walk(obj) {      Object.keys(obj).forEach((key) => {        defineReactive(obj, key, obj[key]);      });    }  }  

编译Compile

对每个元素节点的指令进行扫描跟解析,根据指令模板替换数据,以及绑定相应的更新函数

class Compile {    constructor(el, vm) {      this.$vm = vm;      this.$el = document.querySelector(el);  // 获取dom      if (this.$el) {        this.compile(this.$el);      }    }    compile(el) {      const childNodes = el.childNodes;       Array.from(childNodes).forEach((node) => { // 遍历子元素        if (this.isElement(node)) {   // 判断是否为节点          console.log("编译元素" + node.nodeName);        } else if (this.isInterpolation(node)) {          console.log("编译插值⽂本" + node.textContent);  // 判断是否为插值文本 {{}}        }        if (node.childNodes && node.childNodes.length > 0) {  // 判断是否有子元素          this.compile(node);  // 对子元素进行递归遍历        }      });    }    isElement(node) {      return node.nodeType == 1;    }    isInterpolation(node) {      return node.nodeType == 3 && /\{\{(.*)\}\}/.test(node.textContent);    }  }    

依赖收集

视图中会用到data中某key，这称为依赖。同⼀个key可能出现多次，每次都需要收集出来用⼀个Watcher来维护它们，此过程称为依赖收集多个Watcher需要⼀个Dep来管理，需要更新时由Dep统⼀通知

实现思路

defineReactive时为每⼀个key创建⼀个Dep实例初始化视图时读取某个key，例如name1，创建⼀个watcher1由于触发name1的getter方法，便将watcher1添加到name1对应的Dep中当name1更新，setter触发时，便可通过对应Dep通知其管理所有Watcher更新

// 负责更新视图  class Watcher {    constructor(vm, key, updater) {      this.vm = vm      this.key = key      this.updaterFn = updater        // 创建实例时，把当前实例指定到Dep.target静态属性上      Dep.target = this      // 读一下key，触发get      vm[key]      // 置空      Dep.target = null    }      // 未来执行dom更新函数，由dep调用的    update() {      this.updaterFn.call(this.vm, this.vm[this.key])    }  }  

声明Dep

class Dep {    constructor() {      this.deps = [];  // 依赖管理    }    addDep(dep) {      this.deps.push(dep);    }    notify() {       this.deps.forEach((dep) => dep.update());    }  }  

创建watcher时触发getter

class Watcher {    constructor(vm, key, updateFn) {      Dep.target = this;      this.vm[this.key];      Dep.target = null;    }  }    

依赖收集，创建Dep实例

function defineReactive(obj, key, val) {    this.observe(val);    const dep = new Dep();    Object.defineProperty(obj, key, {      get() {        Dep.target && dep.addDep(Dep.target);// Dep.target也就是Watcher实例        return val;      },      set(newVal) {        if (newVal === val) return;        dep.notify(); // 通知dep执行更新方法      },    });  }