不错实验室c4d和平面构成设计课程资源百度云分享

// 判断一个变量是否是对象
function isObject(obj) {
  return obj.constructor === Object
}
class Observer {
  constructor(value) {
    this.value = value;
    if (!arr.isArray(value)) {
      this.walk(value);
    }
  }
  walk(obj) {
    const keys = Object.keys(obj);
    // 循环将obj中的每一个属性转换成getter/setter进行变化追踪
    for (let i = 0; i < keys.length; i++) {
      defineReactive(obj, keys[i], obj[keys[i]]);
    }
  }
}
function defineReactive(data, key, val) {
  if (isObject(val)) {
    new Observer(val); // 进行递归调用
  }
  let dep = new Dep();
  Object.defineProperty(data, key, {
    configurable: true,
    enumerable: true,
    get: function () {
      dep.depend();
      return val;
    },
    set: function (newVal) {
      if (val === newVal) return
      // 如果赋值的新值也是一个对象 也需要进行侦测
      if (isObject(newVal)) {
        new Observer(val); // 进行递归调用
      }
      val = newVal;
      dep.notify(); // 通知所有的订阅者，数据要被修改了，做出相应的行为(也就是执行对应的回调函数)
    }
  })
}
class Dep {
  constructor() {
    this.subs = [] // 这个里面存放的是Watch实例对象
  }
  addSub(sub) {
    this.subs.push(sub); // 在这个地方收集订阅者
  }
  removeSub(sub) {
    remove(this.subs, sub);
  }
  depend() {
    if (window.target) {
      this.addSub(window.target); // 在这个地方触发depend方法，进行收集订阅者
    }
  }
  notify() {
    const subs = this.subs.slice();
    for (let i = 0; i < subs.length; i++) {
      subs[i].update(); // 在这个地方执行回调函数