1. 釋出者 ---- 觀察者模式中的【被觀察者】
2. 訂閱者 ---- 觀察者模式中的【訂閱者】
3. 事件中心 ---- 類似公共的一個平臺

/*
釋出者：釋出、註冊xxx事件 or 主題
訂閱者：自己的行為，取消訂閱，訂閱
事件中心：註冊釋出者的某事件、取消註冊釋出者的某事件、註冊訂閱者、取消訂閱者、釋出事件（通知訂閱者）
*/
// 釋出者
class Pulisher {
  constructor (name, evtCenter) {
    this.name = name;
    this.evtCenter = evtCenter;
  }
  // 向事件排程中心-註冊某事件
  register (evtName) {
    this.evtCenter.registerEvt(evtName)
  }
  unregister (evtName) {
    this.evtCenter.unRegisterEvt(evtName)
  }
  // 向事件排程中心-釋出某事件
  publish (evtName, ...params) {
    this.evtCenter.publish(evtName, ...params)
  }
}

// 訂閱者
class Subscriber {
  constructor (name,evtCenter) {
    this.name = name;
    this.evtCenter = evtCenter;
  }
  //訂閱
  subscribe(evtName) {
    this.evtCenter.addSubscribe(evtName, this);
  }
  //取消訂閱
  unSubscribe(evtName) {
    this.evtCenter.unAddSubscribe(evtName, this);
  }
  //接收
  update(params) {
    console.log(`我接收到了，${params}`);
  }
}

// 事件排程中心
class EvtCenter {
  constructor (name) {
    this.name = name;
    this.evtHandle = {}
  }
  // 註冊釋出者要釋出的事件
  registerEvt (evtName) {
    if (!this.evtHandle[evtName]) {
      this.evtHandle[evtName] = []
    }
  }
  // 取消註冊釋出者要釋出的事件
  unRegisterEvt (evtName) {
    delete this.evtHandle[evtName];
  }
  // 增加訂閱者-註冊觀察者
  addSubscribe(evtName, sub) {
    if (this.evtHandle[evtName]) {
      this.evtHandle[evtName].push(sub);
    }
  }
   // 取消訂閱者-移除註冊觀察者
   unAddSubscribe(evtName, sub) {
    this.evtHandle[evtName].forEach((item, index) => {
      if (item === sub) {
        this.evtHandle[evtName].splice(index, 1);
      }
    });
  }

  // 事件排程中心-釋出某事件
  publish (evtName, ...params) {
    this.evtHandle[evtName] && this.evtHandle[evtName].forEach((item) => {
      item.update(...params);
    });
  }
}

// 測試
const evtCenter1 = new EvtCenter('報社排程中心1')

const pulisher1 = new Pulisher('報社1', evtCenter1)

const sub1 = new Subscriber('我是sub1, 我對日報感興趣', evtCenter1)
const sub2 = new Subscriber('我是sub2, 我對日報感興趣', evtCenter1)
const sub3 = new Subscriber('我是sub3, 我對中報感興趣', evtCenter1)
const sub4 = new Subscriber('我是sub4, 我對晚報感興趣', evtCenter1)

// 釋出者-註冊三個事件到事件中心
pulisher1.register('廣州日報')
pulisher1.register('廣州中報')
pulisher1.register('廣州晚報')

// 訂閱者可以自己訂閱，當然也可以直接操作事件中心
sub1.subscribe('廣州日報')
sub2.subscribe('廣州日報')
sub3.subscribe('廣州中報')
sub4.subscribe('廣州晚報')

// 現在開始釋出事件
pulisher1.publish('廣州日報', '廣州日報')
pulisher1.publish('廣州中報', '廣州中報')
pulisher1.publish('廣州晚報', '廣州晚報')

pulisher1.unregister('廣州日報')

// 再一次釋出事件
console.log('再一次釋出事件，這次我取消了日報') // 沒有輸出廣州日報
pulisher1.publish('廣州日報', '廣州日報')
pulisher1.publish('廣州中報', '廣州中報')
pulisher1.publish('廣州晚報', '廣州晚報')

簡單寫法--面向事件排程中心程式設計

// 事件排程中心
class PubSub  {
  constructor () {
    this.evtHandles = {}
  }
  // 訂閱
  subscribe (evtName, callback) {
    if (!this.evtHandles[evtName]) {
      this.evtHandles[evtName] = [callback];
    }
    this.evtHandles[evtName].push(callback);
  }
  // 釋出
  publish(evtName, ...arg) {
    if (this.evtHandles[evtName]) {
      for(let fn of this.evtHandles[evtName]) {
        fn.call(this, ...arg);
      }
    }
  }
  unSubscribe (evtName, fn) {     // 取消訂閱
    let fnList = this.evtHandles[evtName];
    if (!fnList) return false;

    if (!fn) {
      // 不傳入指定取消的訂閱方法，則清空所有key下的訂閱
      this.evtHandles[evtName] = []
    } else {
      fnList.forEach((item, index) => {
        if (item === fn) {
          fnList.splice(index, 1);
        }
      })
    }
  }
}
// 先訂閱在釋出
const pub1 = new PubSub()

// 訂閱三個事件
pub1.subscribe('onWork', time => {
  console.log(`上班了：${time}`);
})
pub1.subscribe('onWork', time => {
  console.log(`上班了:${time}，開始開啟待辦事項`);
})

pub1.subscribe('onOffWork', time => {
  console.log(`下班了：${time}`);
})

pub1.subscribe('onLaunch', time => {
  console.log(`吃飯了：${time}`);
})

// 釋出對應的事件
pub1.publish('onWork', '09:00:00');
pub1.publish('onLaunch', '12:00:00');
pub1.publish('onOffWork', '18:00:00');
// 取消onWork 事件
pub1.unSubscribe('onWork');


// 取消訂閱
pub1.unSubscribe('onWork');
console.log(`取消 onWork`);
pub1.publish('onWork', '09:00:00'); // 不會執行

小結