TypeScript 设计模式之【观察者模式】

发布于:2024-10-09 ⋅ 阅读:(26) ⋅ 点赞:(0)

在这里插入图片描述

观察者模式:构建灵活响应的事件通知系统

每当有订阅热点事件发生时,你都会立即收到通知。这个过程中,你就像一个"观察者",而热点事件应用则是"被观察者"。这种实时更新的机制,正是观察者模式的生动体现。

软件开发中,我们经常需要处理对象之间的一对多依赖关系,一个对象状态改变时,所有依赖于它的对象都能得到通知并自动更新。观察者模式类似一个智能的通知系统,能够在保持对象之间松耦合的同时,灵活处理事件!

观察者模式的奥秘

观察者模式定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象。这个主题对象在状态发生变化时,会通知所有观察者对象,使它们能够自动更新自己。

观察者模式有什么利与弊?

观察者模式的优点是它支持广播通信,增加了灵活性和可扩展性。它遵循开闭原则,使得我们可以在不修改现有代码的情况下添加新的观察者。缺点是如果处理不当,会引起性能问题和循环依赖。

如何使用观察者模式来优化你的系统

观察者模式涉及角色

  • 主题(Subject): 定义添加、删除和通知观察者的接口
  • 具体主题(ConcreteSubject): 实现主题接口,维护观察者列表,发生变化时通知观察者
  • 观察者(Observer): 定义一个更新接口,使在主题状态变化时得到通知
  • 具体观察者(ConcreteObserver): 实现观察者更新接口,以便在得到通知时进行自我更新

观察者模式步骤

  1. 创建一个主题接口,定义添加、删除和通知观察者的方法
  2. 创建一个观察者接口,定义更新方法
  3. 实现具体主题类,维护观察者列表,实现通知逻辑
  4. 实现具体观察者类,定义在收到通知时的具体行为
  5. 在主题状态改变时,通知所有注册的观察者

选择合适的观察者模式,你就能轻松地实现对象之间的解耦,让系统变得更加灵活和可扩展!

代码实现案例

// 观察者接口
interface Observer {
  update(message: string): void;
}

// 主题接口
interface Subject {
  // 附加
  attach(observer: Observer): void;
  // 脱离
  detach(observer: Observer): void;
  // 通知
  notify(message: string): void;
}

// 具体主题:新闻发布者
class NewsPublisher implements Subject {
  private observers: Observer[] = [];

  attach(observer: Observer): void {
    const isExist = this.observers.includes(observer);
    if (isExist) {
      return console.log("观察者已经存在,无需重复添加");
    }
    this.observers.push(observer);
    console.log("观察者已添加");
  }

  detach(observer: Observer): void {
    const observerIndex = this.observers.indexOf(observer);
    if (observerIndex === -1) {
      return console.log("未找到要删除的观察者");
    }
    this.observers.splice(observerIndex, 1);
    console.log("观察者已被移除");
  }

  notify(message: string): void {
    console.log("通知所有观察者");
    for (const observer of this.observers) {
      observer.update(message);
    }
  }

  publishNews(news: string): void {
    console.log(`发布新闻: ${news}`);
    this.notify(news);
  }
}

// 具体观察者:新闻订阅者
class NewsSubscriber implements Observer {
  private name: string;

  constructor(name: string) {
    this.name = name;
  }

  update(message: string): void {
    console.log(`${this.name} 收到新闻: ${message}`);
  }
}
// 客户端代码
const publisher = new NewsPublisher();

const subscriber1 = new NewsSubscriber("张三");
const subscriber2 = new NewsSubscriber("李四");
const subscriber3 = new NewsSubscriber("王五");

publisher.attach(subscriber1);
publisher.attach(subscriber2);
publisher.attach(subscriber3);

publisher.publishNews("中国成功发射神舟十八号载人飞船!");

publisher.detach(subscriber2); // 李四通知被移除

publisher.publishNews("2023年高考开始了!");

// 输出
// 观察者已添加
// 观察者已添加
// 观察者已添加
// 发布新闻: 中国成功发射神舟十八号载人飞船!
// 通知所有观察者
// 张三 收到新闻: 中国成功发射神舟十八号载人飞船!
// 李四 收到新闻: 中国成功发射神舟十八号载人飞船!
// 王五 收到新闻: 中国成功发射神舟十八号载人飞船!
// 观察者已被移除
// 发布新闻: 2023年高考开始了!
// 通知所有观察者
// 张三 收到新闻: 2023年高考开始了!
// 王五 收到新闻: 2023年高考开始了!

在这里插入图片描述

观察者模式的主要优点

  1. 松耦合: 主题和观察者之间是松散耦合的,它们依然可以独立地改变
  2. 支持广播通信: 主题无需知道观察者的具体类,只需通知所有观察者
  3. 灵活性和可扩展性: 可以动态地增加或删除观察者,无需修改主题
  4. 符合开闭原则: 无需修改主题就可以引入新的观察者类

观察者模式的主要缺点

  1. 引起性能问题: 如果观察者数量太多,通知所有观察者会花费较多时间
  2. 导致循环依赖: 观察者和主题之间可能出现循环依赖
  3. 通知次序不可控: 不保证通知顺序,可能导致不一致的状态
  4. 意外的更新: 如果观察者之间有依赖关系,可能导致意外的更新

观察者模式的适用场景

  1. 当一个抽象模型有两个方面,其中一个方面依赖于另一个方面时
  2. 当对一个对象的改变需要同时改变其他对象,而不知道具体有多少对象待改变时
  3. 当一个对象必须通知其他对象,而它又不能假定其他对象是谁时
  4. 需要在系统中创建一个触发链时

总结

观察者模式是一种行为型设计模式,它定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象。当主题对象的状态发生变化时,所有依赖于它的观察者都会得到通知并自动更新。观察者模式通过解耦主题和观察者,提高了系统的灵活性和可扩展性。合理使用观察者模式,可以让你的代码更加模块化,更易于维护和扩展。

喜欢的话就点个赞 ❤️,关注一下吧,有问题也欢迎讨论指教。感谢大家!!!

下期预告: TypeScript 设计模式之【状态模式】