实现最简单的观察者模式和发布订阅者模式

观察者模式：定义了对象间一种一对多的依赖关系，当目标对象 Subject 的状态发生改变时，所有依赖它的对象 Observer 都会得到通知。

//观察者模式
//被观察者
class Subject{
  constructor() {
    this.stack = [];
  }
   push = function (name) {
    this.stack.push(name)
  }
  remove = function (name) {
    this.stack = this.stack.filter(i=>i === name)
  }
   notice = function (msg) {
    this.stack.forEach(item=>{
      item.say(msg)
    })
  }
}
//观察者
class Observer{
  constructor(name) {
    this.name = name
  }
   say = function (msg) {
    console.log(this.name + msg);
  }
}
let watch1 = new Subject ();
let observer1 = new Observer("a");
let observer2 = new Observer("b");
watch1.push(observer1)
watch1.push(observer2)
watch1.notice("被刀了")

// 发布订阅者模式
// 发布订阅模式与观察者模式的不同，“第三者” （事件中心）出现。
// 目标对象并不直接通知观察者，而是通过事件中心来派发通知。

// 控制中心//
class Subject {
  constructor() {
    this.stack = {};
  }
  push = function (name,fn) {
    this.stack[name]?this.stack[name].push(fn):this.stack[name] = [fn]
  }
  remove = function (name,fn) {
    // 判断fn是否存在,不存在则清空
    if(fn){
      this.stack[name] = this.stack[name].filter(item=>item === fn)
    }else{
      delete this.stack[name]
    }
  }
  public = function (name,msg) {
      this.stack[name].forEach(item=>{
      item(msg)
    })
  }
}

let subject = new Subject();
subject.push("observer1",function (msg) {
  console.log('observer1 第一次' + msg);
})
subject.push("observer1",function (msg) {
  console.log('observer1 第二次' + msg);
})
subject.public('observer1',"被刀了")

其实，严格来讲 DOM 的事件监听是“发布订阅模式”：

document.querySelector('.top').addEventListener('click', function(){console.log(1)});
document.querySelector('.top').addEventListener('click', function(){console.log(2)});

点击top容器
输出 1 2