概念

The observer pattern defines a one-to-many relationship. When one object updates, it notifies many other objects that it has been updated.

  • subject – This is the object that will send out a notification to all of the ‘observers’ who want/need to know that the subject was updated.
  • observers – These are the objects that want to know when the subject has changed.

    设计模式要干的就是解耦。 创建型模式是将创建和使用代码解耦，结构型是将不同功能代码解耦，行为型模式是将不同代码解耦 具体到观察者就是将观察者和被观察者代码解耦

代码实现

  1. /**
  2.  * The Subject interface declares a set of methods for managing subscribers.
  3.  */
  4. interface Subject {
  5.     // Attach an observer to the subject.
  6.     attach(observer: Observer): void;
  8.     // Detach an observer from the subject.
  9.     detach(observer: Observer): void;
  11.     // Notify all observers about an event.
  12.     notify(): void;
  13. }
  15. /**
  16.  * The Subject owns some important state and notifies observers when the state
  17.  * changes.
  18.  */
  19. class ConcreteSubject implements Subject {
  20.     /**
  21.      * @type {number} For the sake of simplicity, the Subject's state, essential
  22.      * to all subscribers, is stored in this variable.
  23.      */
  24.     public state: number;
  26.     /**
  27.      * @type {Observer[]} List of subscribers. In real life, the list of
  28.      * subscribers can be stored more comprehensively (categorized by event
  29.      * type, etc.).
  30.      */
  31.     private observers: Observer[] = [];
  33.     /**
  34.      * The subscription management methods.
  35.      */
  36.     public attach(observer: Observer): void {
  37.         const isExist = this.observers.includes(observer);
  38.         if (isExist) {
  39.             return console.log('Subject: Observer has been attached already.');
  40.         }
  42.         console.log('Subject: Attached an observer.');
  43.         this.observers.push(observer);
  44.     }
  46.     public detach(observer: Observer): void {
  47.         const observerIndex = this.observers.indexOf(observer);
  48.         if (observerIndex === -1) {
  49.             return console.log('Subject: Nonexistent observer.');
  50.         }
  52.         this.observers.splice(observerIndex, 1);
  53.         console.log('Subject: Detached an observer.');
  54.     }
  56.     /**
  57.      * Trigger an update in each subscriber.
  58.      */
  59.     public notify(): void {
  60.         console.log('Subject: Notifying observers...');
  61.         for (const observer of this.observers) {
  62.             observer.update(this);
  63.         }
  64.     }
  66.     /**
  67.      * Usually, the subscription logic is only a fraction of what a Subject can
  68.      * really do. Subjects commonly hold some important business logic, that
  69.      * triggers a notification method whenever something important is about to
  70.      * happen (or after it).
  71.      */
  72.     public someBusinessLogic(): void {
  73.         console.log('\nSubject: I\'m doing something important.');
  74.         this.state = Math.floor(Math.random() * (10 + 1));
  76.         console.log(`Subject: My state has just changed to: ${this.state}`);
  77.         this.notify();
  78.     }
  79. }
  81. /**
  82.  * The Observer interface declares the update method, used by subjects.
  83.  */
  84. interface Observer {
  85.     // Receive update from subject.
  86.     update(subject: Subject): void;
  87. }
  89. /**
  90.  * Concrete Observers react to the updates issued by the Subject they had been
  91.  * attached to.
  92.  */
  93. class ConcreteObserverA implements Observer {
  94.     public update(subject: Subject): void {
  95.         if (subject instanceof ConcreteSubject && subject.state < 3) {
  96.             console.log('ConcreteObserverA: Reacted to the event.');
  97.         }
  98.     }
  99. }
  101. class ConcreteObserverB implements Observer {
  102.     public update(subject: Subject): void {
  103.         if (subject instanceof ConcreteSubject && (subject.state === 0 || subject.state >= 2)) {
  104.             console.log('ConcreteObserverB: Reacted to the event.');
  105.         }
  106.     }
  107. }
  109. /**
  110.  * The client code.
  111.  */
  113. const subject = new ConcreteSubject();
  115. const observer1 = new ConcreteObserverA();
  116. subject.attach(observer1);
  118. const observer2 = new ConcreteObserverB();
  119. subject.attach(observer2);
  121. subject.someBusinessLogic();
  122. subject.someBusinessLogic();
  124. subject.detach(observer2);
  126. subject.someBusinessLogic();

Event Bus/ Event Emitter

  1. class EventEmitter {
  2.   constructor() {
  3.     // handlers是一个map，用于存储事件与回调之间的对应关系
  4.     this.handlers = {}
  5.   }
  7.   // on方法用于安装事件监听器，它接受目标事件名和回调函数作为参数
  8.   on(eventName, cb) {
  9.     // 先检查一下目标事件名有没有对应的监听函数队列
  10.     if (!this.handlers[eventName]) {
  11.       // 如果没有，那么首先初始化一个监听函数队列
  12.       this.handlers[eventName] = []
  13.     }
  15.     // 把回调函数推入目标事件的监听函数队列里去
  16.     this.handlers[eventName].push(cb)
  17.   }
  19.   // emit方法用于触发目标事件，它接受事件名和监听函数入参作为参数
  20.   emit(eventName, ...args) {
  21.     // 检查目标事件是否有监听函数队列
  22.     if (this.handlers[eventName]) {
  23.       // 这里需要对 this.handlers[eventName] 做一次浅拷贝，主要目的是为了避免通过 once 安装的监听器在移除的过程中出现顺序问题
  24.       const handlers = this.handlers[eventName].slice()
  25.       // 如果有，则逐个调用队列里的回调函数
  26.       handlers.forEach((callback) => {
  27.         callback(...args)
  28.       })
  29.     }
  30.   }
  32.   // 移除某个事件回调队列里的指定回调函数
  33.   off(eventName, cb) {
  34.     const callbacks = this.handlers[eventName]
  35.     const index = callbacks.indexOf(cb)
  36.     if (index !== -1) {
  37.       callbacks.splice(index, 1)
  38.     }
  39.   }
  41.   // 为事件注册单次监听器
  42.   once(eventName, cb) {
  43.     // 对回调函数进行包装，使其执行完毕自动被移除
  44.     const wrapper = (...args) => {
  45.       cb(...args)
  46.       this.off(eventName, wrapper)
  47.     }
  48.     this.on(eventName, wrapper)
  49.   }
  50. }

参考资料

  1. 观察者模式
  2. How to Use the Observable Pattern in JavaScript
  3. 56 | 观察者模式（上）：详解各种应用场景下观察者模式的不同实现方式
  4. React Architecture: The React Provider Pattern
  5. 观察者模式 —- 修言