1.观察者模式

Observer Design Pattern：
Define a one-to-many dependency between objects so that when one object changes state, all its dependents are notified and updated automatically.
翻译成中文就是：在对象之间定义一个一对多的依赖，当一个对象状态改变的时候，所有依赖的对象都会自动收到通知，并自动更新。

  1. // 目标对象类
  2. class Subject {
  3.     constructor(){
  4.     this.observers = [];
  5.   }
  7.   // 添加观察者
  8.   add(o){
  9.       this.observers.push(o);
  10.   }
  12.   // 移除观察者
  13.   remove(o){
  14.       const index = this.observers.find(f=>f===o);
  15.     if(index !== -1){
  16.       this.observers.splice(index,1);
  17.     }
  18.   }
  20.   // 通知
  21.   notify(...args){
  22.       this.observers.forEach(observer=>{
  23.         observer.update(...args);
  24.     })
  25.   }
  26. }
  28. // 观察者类
  29. class Observer {
  30.   // 更新
  31.     update(...args){
  32.       console.log('目标对象的状态变化了，我需要更新',args)
  33.   }
  34. }
  36. const subject = new Subject();
  37. const observer1 = new Observer();
  38. const observer2 = new Observer();
  39. subject.add(observer1);
  40. subject.add(observer2);
  41. subject.notify('new state');

2.发布订阅模式

object/array方式实现

  1. // 全局事件总线 EventEmitter
  2. // 推荐阅读FaceBook推出的通用EventEmiiter库的源码（https://github.com/facebookarchive/emitter）
  3. class EventEmitter {
  4.   constructor() {
  5.     // handlers是一个map，用于存储事件名与回调之间的对应关系
  6.     this.handlers = {};
  7.   }
  9.   // 用于安装事件监听器，它接受事件名和回调函数作为参数
  10.   on(eventName, cb) {
  11.     if (!this.handlers[eventName]) {
  12.       this.handlers[eventName] = [];
  13.     }
  14.     this.handlers[eventName].push(cb);
  15.   }
  17.   // 用于移除某个事件回调队列里的指定回调函数
  18.   off(eventName, cb) {
  19.     if (!this.handlers[eventName]) {
  20.       return;
  21.     }
  22.     const index = this.handlers[eventName].findIndex(f => f === cb);
  23.     this.handlers[eventName].splice(index, 1);
  24.   }
  26.   // 用于触发目标事件，它接受事件名和监听函数入参作为参数
  27.   emit(eventName, ...args) {
  28.     if (!this.handlers[eventName]) {
  29.       return;
  30.     }
  31.     this.handlers[eventName].forEach((cb) => {
  32.       cb(...args);
  33.     });
  34.   }
  36.   // 为事件注册单次监听器
  37.   once(eventName, cb) {
  38.     // 对回调函数进行包装，使其执行完毕后自动被移除
  39.     const wrapper = (...args) => {
  40.       cb.apply(null, args);
  41.       this.off(eventName, wrapper);
  42.     };
  43.     this.on(eventName, wrapper);
  44.   }
  45. }

map/set方式实现

  1. class EventEmitter {
  2.   constructor() {
  3.     // handlers是一个map，用于存储事件名与回调之间的对应关系
  4.     this.handlers = new Map();
  5.   }
  7.   // 用于安装事件监听器，它接受事件名和回调函数作为参数
  8.   on(eventName, cb) {
  9.     if (!this.handlers.has(eventName)) {
  10.       this.handlers.set(eventName, new Set());
  11.     }
  12.     this.handlers.get(eventName).add(cb);
  13.   }
  15.   // 用于移除某个事件回调队列里的指定回调函数
  16.   off(eventName, cb) {
  17.     if (!this.handlers.has(eventName)) {
  18.       return;
  19.     }
  20.     this.handlers.get(eventName).delete(cb);
  21.   }
  23.   // 用于触发目标事件，它接受事件名和监听函数入参作为参数
  24.   emit(eventName, ...args) {
  25.     if (!this.handlers.has(eventName)) {
  26.       return;
  27.     }
  28.     this.handlers.get(eventName).forEach((cb) => {
  29.       cb(...args);
  30.     });
  31.   }
  33.   // 为事件注册单次监听器
  34.   once(eventName, cb) {
  35.     // 对回调函数进行包装，使其执行完毕后自动被移除
  36.     const wrapper = (...args) => {
  37.       cb.call(null, ...args);
  38.       this.off(eventName, wrapper);
  39.     };
  40.     this.on(eventName, wrapper);
  41.   }
  42. }

案例

在公众号消息卡片跳转小程序的某个详情页的时候，比如此时认证信息过期或者用户没有登录过，获取详情数据的接口调用失败，此时会重定向到登录页，登录成功后，在跳转回详情页，但是详情页已经加载完成，因此不会再重新发请求获取详情信息，如何解决？
我们的解决方案是在详情页初始化时，订阅一个登录成功的事件，对应的回调函数是获取详情页数据，然后在登录成功的时候，触发登录成功的事件。

3.两者区别

  • 对于观察者模式，一定是有两个角色（即目标对象类和观察者类），目标对象和观察者是直接产生联系的，因为观察者就在目标对象的数组里，这样才能保证当目标对象的状态发生变化时，能够调用所有观察者的update方法。目标对象和观察者耦合在了一起。
  • 而发布订阅模式，只有一个角色（即第三方），已经没有发布者和订阅者了，完全由这个第三方完成所有的功能，它是事件名和回调函数之间的对应关系。