本文分4個(gè)部分介紹
1.什么是觀察者模式
2.觀察者模式的應(yīng)用場景
3.觀察者模式的優(yōu)缺點(diǎn)
4.觀察者模式的簡單實(shí)現(xiàn)

一.什么是觀察者模式
觀察者模式里有兩個(gè)對(duì)象 觀察者 和 發(fā)生的事件。
觀察者對(duì)發(fā)生的事件有興趣。

觀察者模式 解決1對(duì)多的關(guān)系；
其中有一個(gè)比較難的思維點(diǎn) 就是 某人對(duì)某個(gè)事情敢興趣，不是自己一直盯著那個(gè)事情，而是發(fā)生的事件對(duì)象 去通知對(duì)這個(gè)事情敢興趣的人。

二.應(yīng)用場景
多個(gè)業(yè)務(wù)關(guān)心一個(gè)數(shù)據(jù)的的變化時(shí)可以采用這個(gè)模式。

三.優(yōu)缺點(diǎn)
優(yōu)點(diǎn)：很好的組織了觀察者邏輯，以后業(yè)務(wù)邏輯變化，增刪 觀察者就可以；
缺點(diǎn)：觀察者太多，可能執(zhí)行時(shí)間過長，需要對(duì)觀察者做優(yōu)先級(jí)處理

四.簡單實(shí)現(xiàn)

// 觀察者模式 簡單實(shí)現(xiàn)

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

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

// 觀察者 對(duì)發(fā)生的事情敢興趣的人
class Watcher {
//name是觀察者的標(biāo)記名稱 fun是事件發(fā)生時(shí)要干的事情
  constructor(name, fun) {
    this.name = name;
    this.doneFun = fun;
  }

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

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