简易的MVVM双向数据绑定原理

//数据源
let data = {
  message: "hello word",
  info: {
    job: "web It",
    level: "p8"
  }
};
//对数据源劫持拦截
class Observer {
  constructor(data) {
    //需要观察劫持的对象
    this.data = data;
    //给对象设置get,set
    this.observer(this.data);
  }
  observer(data) {
    //对数据源所有的属性添加get，set
    Object.keys(data).forEach(key => {
      this.defineReactive(data, key, data[key]);
      //如果data[key]还是一个对象
      if (data[key] instanceof Object) {
        this.observer(data[key]);
      }
    });
  }
  defineReactive(data, key, value) {
    let dep = new Dep();
    Object.defineProperty(data, key, {
      enumerable: true,
      configurable: true,
      get() {
        Dep.target && dep.add(Dep.target);
        return value;
      },
      set(newValue) {
        //如果新旧值变化
        if (value !== newValue) {
          value = newValue;
          dep.notify();
        }
      }
    });
  }
}
//定义一个监听watcher
class Watcher {
  constructor(data, key, callback) {
    //保存数据源
    this.data = data;
    //保存取值key
    this.key = key;
    //保存回调
    this.callback = callback;
    //保存老值
    this.oldValue = this.get(this.data, this.key);
  }
  getExpressionValue(data, expr) {
    let expression = expr.split("."),
      [length] = expression;
    return expression.reduce((prev, next, index) => {
      if (index === length - 1) {
        return prev[expression[1]];
      }
      return prev[next];
    }, data);
  }
  //触发获取值的操作
  get(data, key) {
    //当每一次去数据源获取值的时候把watcher自身赋值给Dep订阅类上
    Dep.target = this;
    let val = this.getExpressionValue(data, key);
    Dep.target = null;
    return val;
  }
  update() {
    //取出设置完的值就行新旧比对
    let newValue = this.getExpressionValue(this.data, this.key);
    newValue !== this.oldValue && this.callback(newValue);
  }
}
//创建订阅发布
class Dep {
  constructor() {
    //订阅者列表
    this.subscribeLists = new Set();
  }
  add(watcher) {
    //添加订阅
    this.subscribeLists.add(watcher);
  }
  notify() {
    this.subscribeLists.forEach(watcher => watcher.update());
  }
}

function getExpressionValue(data, expr) {
  let expression = expr.split("."),
    [length] = expression;
  return expression.reduce((prev, next, index) => {
    if (index === length - 1) {
      return prev[expression[1]];
    }
    return prev[next];
  }, data);
}

//取值
function getVal(key) {
  new Watcher(data, key, newValue => {
    text.innerHTML = newValue;
  });
  return getExpressionValue(data, key);
}
//对数据源进行劫持
const observer = new Observer(data);

let text = document.querySelector("#text");
text.innerHTML = getVal("info.level");
document.querySelector("#input").addEventListener("input", e => {
    data.info.level = e.target.value
});