JavaScript-发布订阅模式与观察者模式

发布订阅模式

有事件中心，事件中心解耦了发布者和订阅者，发布者通过事件中心发布消息，订阅者通过事件中心订阅消息，彼此不知道对方的存在

实现关键:使用一个对象存储不同事件的回调函数(事件处理函数)
核心方法:on,emit,off
on:添加回调
emit:依次执行指定事件的回调函数
off:取消指定事件的指定事件处理函数

// 发布订阅模式, 事件中心
class Event {
  constructor() {
    this.callbacks = {};
  }

  // 监听
  on(eventName, fn) {
    (this.callbacks[eventName] || (this.callbacks[eventName] = [])).push(fn);
  }

  // 触发
  emit(eventName, ...args) {
    let cbs = this.callbacks[eventName];
    if (cbs) {
      cbs.forEach((cb) => {
        cb.apply(this, args);
      });
    }
  }

  // 取消
  off(eventName, cb) {
    let cbs = this.callbacks[eventName];
    if (cbs) {
      let index = cbs.indexOf(cb);
      if (index > -1) {
        cbs.splice(index, 1);
      }
    }
  }
}

const evt = new Event();
evt.on("click", function (e) {
  console.log("click触发了一次::>>", e);
});
evt.on("click", function (e) {
  console.log("click触发了两次::>>", e);
});
const handleClick = function (e) {
  console.log("取消事件处理函数", e);
};
evt.on("click", handleClick);
evt.off("click", handleClick);
evt.emit("click", "我是click事件的事件参数");

//click触发了一次::>> 我是click事件的事件参数
// click触发了两次::>> 我是click事件的事件参数

观察者模式

没有event中心解耦，观察者Observer与主体对象Subject直接耦合，Subject主体保存有所有Observer的引用，在某个时机通过notify()调用Observer的update方法，往update方法传递参数

实现关键：
Subject：this.observers=[]存储所有观察者对象，notify方法遍历this.observers，调用observer.update方法
Observer: this.update方法

// 主体类
class Subject {
  constructor() {
    this.observers = [];
  }

  // 添加观察者
  add(observer) {
    if (this.observers.indexOf(observer) == -1) {
      this.observers.push(observer);
    }
  }

  // 通知所有观察者,主体发生变化,观察者调用update方法更新自己
  notify(message) {
    this.observers.forEach((observer) => {
      observer.update(message);
    });
  }
}

// 观察者类
class Observer {
  constructor(name) {
    this.name = name;
  }
  update() {
    console.log(`我是${this.name},我观察的对象发生变化了`);
  }
}

const s = new Subject();
const o1 = new Observer("小明");
const o2 = new Observer("小红");
s.add(o1);
s.add(o2);
s.notify();

//console.log
// 我是小明,我观察的对象发生变化了
// 我是小红,我观察的对象发生变化了