js中的观察者模式/发布订阅模式

看了几篇文章，读起来令人头大，明明就是很好理解的东西

上代码，观察者模式：

class Observer {
  notice(msg) {
    console.log("收到一条massage", msg);
  }
}
class Subject {
  constructor() {
    this.observers = [];
  }
  addObserver(...ob) {
    this.observers.push(...ob);
    return this;
  }
  sendMessage(msg) {
    this.observers.forEach((observer) => observer.notice(msg));
  }
}
let sub = new Subject();
let obs1 = new Observer();
let obs2 = new Observer();
let obs3 = new Observer();
sub.addObserver(obs1, obs2, obs3)
sub.sendMessage('随便发布一个消息')

如上，一个简单的观察者模式的内容就是一个subject 好多个observer，在subject中维护一个observer队列，就结束了。可以发现subject和obserbver是耦合到一起的

然后是发布订阅模式，常见手写题，发布订阅要麻烦一点，先看代码

class Emitter {
  constructor() {
    this.list = {};
  }
  // 注册事件
  on(event, callback) {
    if (!this.list.hasOwnProperty(event)) {
      this.list[event] = [callback];
    }
    else this.list[event].push(callback);
  }
  // 取消注册
  off(event, callback) {
    this.list[event] &&
      (this.list[event] = this.list[event].filter(fn => fn != callback));
    // 函数可以直接判断相等吗，试一下？
  }
  // 发布事件
  emit(event, ...args) {
    if (this.list[event]) {
      this.list[event].map(fn => fn(...args));
    }
  }
}

//**********测试*************
let fn1 = function (msg) {
  console.log('fn1收到发布的消息', msg);
}
const fn2 = (msg) => {
  console.log('fn2收到发布的消息', msg);
}
const emitter = new Emitter();
emitter.on('111', fn1);
emitter.on('111', fn2);
emitter.emit('111', '我发了');
emitter.off('111', fn2);
emitter.emit('111', '我又发了哦')

我们需要实现的，不再是发布者和订阅者，而是一个管理发布订阅的对象，通过这个对象把事件和订阅这个事件的回调联系到一起，实现的是一个多对多的关系

我们所必须实现的内容有，管理一个存储订阅的对象list，以及两个函数：注册 & 发布

以上，over