Diseño de implementación de TypeScript patrón patrón-observador

El patrón de observador es un patrón de diseño de comportamiento que permite que un objeto notifique a otros objetos de cambios en su estado.

El patrón de observador proporciona un mecanismo para cualquier objeto que implemente la interfaz del suscriptor para suscribirse y darse de baja de sus eventos.

Fuente de la imagen: https://refactoringguru.cn/design-patterns/observer

El modo observador es un patrón de diseño que se usa ampliamente en el campo frontal, especialmente en los componentes de la interfaz gráfica. Si personaliza un componente de botón, entonces probablemente necesite usar el modo observador.

Hay dos miembros principales del patrón de observador, uno es la clase Asunto como editor del evento y el otro es la clase Observador como receptor del evento.

Sección temática

La parte común de la clase Asunto es administrar los suscriptores y publicar mensajes para todos los suscriptores, y la lógica de negocios del Asunto específico debe ubicarse en la clase Asunto respectiva.

Interfaz de sujeto

interface Subject {
  // 添加观察者
  attach(observer: Observer): void;
  // 移除观察者
  detach(observer: Observer): void;
  // 通知所有观察者
  notify(): void;
}

Clase de asignatura específica

class ConcreteSubject implements Subject {
  // 发布者状态，测试使用
  public state: number;

  // 订阅者名单
  public observers: Array<Observer> = [];

  // 管理订阅方法
  public attach(observer: Observer): void {
    const observerIndex = this.observers.indexOf(observer);
    if (observerIndex !== -1) {
      return console.log('已订阅');
    }

    this.observers.push(observer);
    console.log('订阅成功');
  }

  public detach(observer: Observer): void {
    const observerIndex = this.observers.indexOf(observer);
    if (observerIndex === -1) {
      return console.log('订阅者未订阅');
    }

    this.observers.splice(observerIndex, 1);
    console.log('订阅者已移除');
  }

  public notify(): void {
    console.log('通知所有订阅者');
    for (const observer of this.observers) {
      observer.update(this);
    }
  }
    
  // 订阅管理以外的逻辑
  public someLogic() {
    this.state = Math.floor(Math.random() * 10 + 1);

    console.log(`我更改了我的状态：state=${this.state}`);
    this.notify();
  }
}

Sección de observadores

Los observadores solo necesitan juzgar si necesitan responder en función de los mensajes enviados por el editor.

Interfaz de observador

interface Observer {
  // 对发布者发出的更新消息作出回应
  update(subject: Subject): void;
}

Clase de observador específico

//具体观察者A
class ConcreteObserverA implements Observer {
  public update(subject: ConcreteSubject) {
    if (subject.state <= 5) {
      console.log('观察者A作出回应');
    }
  }
}

// 具体观察者B
class ConcreteObserverB implements Observer {
  public update(subject: ConcreteSubject) {
    if (subject.state > 5) {
      console.log('观察者B作出回应');
    }
  }
}

Código de prueba

Debido a que es un número aleatorio, es posible que no obtenga el resultado deseado, puede intentarlo varias veces más

const subject = new ConcreteSubject();

const observerA = new ConcreteObserverA();
subject.attach(observerA);

const observerB = new ConcreteObserverB();
subject.attach(observerB);

subject.someLogic();

subject.detach(observerB);

subject.someLogic();