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

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

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

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

观察者模式的奥秘

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

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

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

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

观察者模式涉及角色

• 主题(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 设计模式之【状态模式】