class Depend {
  constructor() {
    //set不允許重復(fù)
    this.reactiveFns = new Set();
  }
  //添加對(duì)應(yīng)的依賴(lài)
  addDepend(fn) {
    if (fn) {
      this.reactiveFns.add(fn);
    }
  }
  depend() {
    if (reactiveFn) {
      this.reactiveFns.add(reactiveFn);
    }
  }
  //通知數(shù)據(jù)發(fā)生變化混蔼，收集依賴(lài)
  notify() {
    this.reactiveFns.forEach((fn) => {
      fn();
    });
  }
}

//定義一個(gè)函數(shù)锨天，專(zhuān)門(mén)執(zhí)行響應(yīng)式函數(shù)

//形成閉包
let reactiveFn = null;

function watchFn(fn) {
  //一旦執(zhí)行函數(shù)，將值賦值給reactiveFn
  reactiveFn = fn;
  fn();
  //函數(shù)保存起來(lái)炫七，默認(rèn)執(zhí)行一次
  //類(lèi)似于wachEeffct()配喳，自動(dòng)收集依賴(lài)杂靶，立即執(zhí)行執(zhí)行一次

  reactiveFn = null;
  //執(zhí)行完操作之后惫东，賦值為空衰琐，有可能對(duì)后續(xù)操作造成影響
}

//封裝一個(gè)函數(shù)揩局，來(lái)獲取對(duì)應(yīng)的depend對(duì)象
//利用weakMap,弱引用毫玖，即使obj為null，也不能對(duì)后續(xù)造成影響凌盯，
const objMap = new WeakMap();
function getDepend(obj, key) {
  //根據(jù)對(duì)象obj付枫，找到對(duì)應(yīng)的map對(duì)象
  let map = objMap.get(obj);
  if (!map) {
    //weakMap的key必須要是對(duì)象，所以這里用Map()
    //如果拿不到驰怎，我們就new一個(gè)
    map = new Map();
    objMap.set(obj, map);
  }
  //根據(jù)key,找到對(duì)應(yīng)的depend對(duì)象
  let dep = map.get(key);
  if (!dep) {
    dep = new Depend();
    map.set(key, dep);
  }
  //所以一定可以返回拿到一個(gè)dep對(duì)象
  return dep;
}

//方案一阐滩。Object.defineProperty() -> Vue2
//對(duì)obj里面的數(shù)據(jù)進(jìn)行遍歷
function reactive(obj) {
  Object.keys(obj).forEach((key) => {
    let value = obj[key];
    //對(duì)每個(gè)key和set操作進(jìn)行對(duì)應(yīng)劫持
    Object.defineProperty(obj, key, {
      set: function (newValue) {
        //保存value值
        value = newValue;
        const dep = getDepend(obj, key);
        //去通知更新
        dep.notify();
      },
      get: function () {
        // 拿到obj -> key
        // 找到對(duì)應(yīng)的obj對(duì)象的key對(duì)應(yīng)的dep對(duì)象
        const dep = getDepend(obj, key);
        //間接的把函數(shù)添加進(jìn)去
        dep.depend();

        return value;
      },
    });
  });
  return obj;
}

//----------------------
const obj = reactive({
  name: "james",
  age: 38,
});
//凡是傳進(jìn)watchFn函數(shù)里面就是響應(yīng)式的
watchFn(function foo() {
  console.log("foo name is", obj.name);
  console.log("foo age is ", obj.age);
  console.log("foo age is ", obj.age);
});

const user = reactive({
  height: 188,
  name: "peter",
});
watchFn(function bar() {
  console.log("user height", user.height);
  console.log("user name", user.name);
});

console.log("監(jiān)聽(tīng)obj-age發(fā)生變化~~~~~~~~");
obj.age += 100;
console.log("監(jiān)聽(tīng)name發(fā)生變化~~~~~~~~");
user.name += "123";