TypeScript实现设计模式——观察者模式

前端开发 作者: 2024-08-20 06:35:01
观察者模式是一种行为设计模式,允许一个对象将其状态的改变通知其他对象。 观察者模式提供了一种作用于任何实现了订阅者接口的对象的机制, 可对其事件进行订阅和取消订阅。

Subject部分

interface Subject {
  // 添加观察者
  attach(observer: Observer): void;
  // 移除观察者
  detach(observer: Observer): void;
  // 通知所有观察者
  notify(): void;
}
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();
  }
}

Observer部分

interface Observer {
  // 对发布者发出的更新消息作出回应
  update(subject: Subject): void;
}
//具体观察者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作出回应');
    }
  }
}

测试代码

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();
原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_65372.html