简单实现 vue 观察者 模式 和 双向绑定 【coding】

var data = {
  name: "fangtangxiansheng",
  job: "fe",
  power: 0
};
console.log(data);
let target = null;

class willObserver {
  watchList = [];
  // 增加观察者
  addWatch() {
    target && (this.watchList =[... new Set([...this.watchList, target])]);
  }
  watchUpdate() {
    this.watchList.forEach((watch) => {
      watch.update();
    });
  }
  // 通知
  notiy() {
    this.watchUpdate();
  }
}

class Watch {
  constructor(cb) {
    this.cb = cb;
    target = this;
  }
  update() {
    this.cb();
  }
}

const creatWatch = (expCondition, cb) => {
  new Watch(cb);
  expCondition();
};
// 构造 ”数据依赖埋点“
const trasnfromDataToAutoListion = (data) => {
  Object.keys(data).forEach((key) => {
    let cache = data[key];
    let _ob = new willObserver();
    Object.defineProperty(data, key, {
      // 做一下埋点
      set(v) {
        cache = v;
        _ob.notiy();
      },
      // 触发watch 实例更新
      get() {
        _ob.addWatch();
        return cache;
      }
    });
  });
};

trasnfromDataToAutoListion(data);

creatWatch(
  () => {
    console.log("condition", data.name, data.job);
  },
  () => {
    document.querySelector("#html").innerHTML = JSON.stringify(data);
  }
);
document.querySelector("#html").innerHTML = JSON.stringify(data);
setInterval(() => {
  data.power = `${Math.random() * 100}%`;
}, 500);

demo

本文转自网络，版权归原作者所有，原文链接：https://segmentfault.com/a/1190000039922240
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！