发布订阅和观察者模式

目的

• 实现发布订阅和观察者模式

发布订阅

• 核心就是创造一个事件处理中心，将订阅的任务在任务完成是发布出去，这样说很模糊，代码比较直观

//发布订阅
let events = {
  _events: [],
  //收集要处理的任务
  on(fn) {
    this._events.push(fn);
  },
  //发布执行已收集的任务（方法）
  emit(data) {
    this._events.forEach((event) => {
      event(data);
    });
  },
};
setTimeout(() => {
  //发布
  events.emit("第一次舔");
}, 1000);
setTimeout(() => {
  //发布
  events.emit("第二次舔");
}, 2000);
//订阅
events.on((data) => {
  arr.push(data);
  console.log(data);
});
let arr = [];
events.on(() => {
  if (arr.length === 2) {
    console.log("老子不舔了");
  }
});

观察者模式

• 存在一个观察者，一个被观察者，当被观察者变化时通知观察者，
• 要实现上面的功能就需要被观察者将所有的观察者收集起来
• 代码如下

class Subject {
  constructor(name) {
    this.name = name;
    this.state = "非常开心";
    this.observers = [];
  }
  attach(o) {
    this.observers.push(o);
  }
  setState(newState) {
    this.state = newState;
    this.observers.forEach((o) => {
      o.update(this.name, newState);
    });
  }
}

class Observer {
  constructor(name) {
    this.name = name;
  }
  update(s, state) {
    console.log(this.name, s + "当前" + state);
  }
}
let s = new Subject("小宝宝");
let o1 = new Observer("爸爸");
let o2 = new Observer("妈妈");
s.attach(o1);
s.attach(o2);
s.setState("不开心了");
s.setState("开心了");

最重要的就是被观察者里的attach要将观察者收集起来，状态改变时setState方法要调用观察者的update方法进行通知