console.group("---start---");


let target = null;      // target 是每次 data 有更新時要執行的函式
let data = {
  price: 5,
  quantity: 2
};

class Dep {
  constructor() {
    // 所有被訂閱的方法放在這裡
    this.subscribers = [];
  }

  // 如果 target 沒有被訂閱過，則訂閱它
  depend() {
    if (target && !this.subscribers.includes(target)) {
      this.subscribers.push(target);
    }
  }

  // 當資料有變動時，使用 notify 通知執行所有被訂閱的方法
  notify() {
    this.subscribers.forEach(sub => sub());
  }
}

const dep = new Dep();

// 讓所有的 data 屬性在 get 時會訂閱 target 方法；在 set 時會執行 target 方法
Object.keys(data).forEach(key => {
  let internalValue = data[key];
  Object.defineProperty(data, key, {
    get() {
      dep.depend();
      return internalValue;
    },
    set(newVal) {
      internalValue = newVal;
      dep.notify();
    }
  });
});

watcher(() => {
  data.total = data.price * data.quantity;
  console.log('data.total', data.total);
});

// change the data property here and it will call the target function
data.price = 20;
data.quantity = 3;

// watcher 是用來初始化 target 函式
function watcher(myFunc) {
  target = myFunc;
  target();
  target = null;
}


console.groupEnd();