js 觀察者模式

觀察者模式 解決1對多的關係，其中有一個比較難的思維點 就是 某人對某個事情敢興趣，不是自己一直盯着那個事情，而是發生那個事情的主人去通知對這個事情敢興趣的人。所以首先事情的主人就要收集搞清楚哪些人對這個事情敢興趣，當事情發生了 逐一通知他們。

所以這裏就有兩個重要的對象 收集者Dep(收集對某個事情敢興趣的)，觀察者Watcher(對事情敢興趣的人).
重點 發生的什麼事情不重要，事情在代碼裏沒有主題對象

// 觀察者模式 簡單實現

// 收集對發生的事情有興趣的人
class Dep {
  constructor() {
//存儲對事情敢興趣的人
    this.watchers = [];
  }
//收集對事情敢興趣的人
  addDep(watcher) {
    this.watchers.push(watcher);
  }

  // 事件發生時通知所有人
  notifys() {
    this.watchers.forEach((item) => {
      item.notify();
    });
  }
}

// 觀察者 對發生的事情敢興趣的人
class Watcher {
//name是觀察者的標記名稱 fun是事件發生時要乾的事情
  constructor(name, fun) {
    this.name = name;
    this.doneFun = fun;
  }

  notify() {
    console.log('我是-' + this.name + '-觀察者');
    if (typeof this.doneFun === 'function') {
      this.doneFun();
    }
  }
}

//這裏是舉例執行
//假設有個對象 a={name:''},有3個觀察者 好奇1,2,3號對a對象是否改變了name有興趣，代碼就可以這樣寫
const a={name:'牛大爺'}
const Deps = new Dep();
Deps.addDep(new Watcher('好奇者1號'));
Deps.addDep(new Watcher('好奇者2號'));
Deps.addDep(new Watcher('好奇者3號'));
//牛大爺下面決定改名稱了 
a.name='你大爺'；
//這樣好奇者 1,2,3號就都知道牛大爺改名字了
Deps.notifys();