一文读懂观察者模式：通俗易懂的JS例子帮你理解

你好，欢迎来到《码上花甲》，我是小甲。

今天，我们要分享的是一种被广泛使用在各种编程语言和框架中的设计模式：观察者模式。

依照惯例，我们先看下最终的效果：

接下来，让我们正式开始吧~

一、观察者模式的基础知识

你是否曾经这样做过：你关注了某个公众号（比如「码上花甲」），每当公众号发布新的内容，你就会收到通知。这，就是观察者模式的一个生活化的例子。

观察者模式，也被称作发布-订阅模式，这种模式形成了一种一对多的依赖关系，使得许多观察者可以同时关注一个主题对象。当这个主题对象的状态发生改变时，所有的观察者都会得到通知。

二、观察者模式的超能力

观察者模式不仅仅是一个设计模式，它更像是一种强大的超能力，让我们一起来看看它的神奇之处：

1. 广播大师： 在观察者模式中，一个主题对象（发布者）可以拥有众多的观察者（订阅者）。当主题对象有所变动，所有的观察者都能得到通知。
2. “松”绑： 主题对象和观察者之间是松散耦合的。他们不需要知道对方的具体实现，只需要知道对方遵循了规定的接口。
3. 关系可变： 在运行过程中，我们可以随时添加或删除观察者，这意味着我们可以动态地改变主题对象和观察者之间的关系。

三、以 JS 为例，看看观察者模式如何实现

理论说的差不多了，让我们用一个简单的 JavaScript 示例来更直观地理解观察者模式。我们要创建的，是一个简单的邮件订阅系统。

class Subject {
  private observers: Observer[] = [];

  // 订阅
  subscribe(observer: Observer): void {
    this.observers.push(observer); // 添加观察者到观察者数组
  }

  // 取消订阅
  unsubscribe(observer: Observer): void {
    const index = this.observers.indexOf(observer); // 查找观察者在观察者数组中的索引
    if (index > -1) {
      this.observers.splice(index, 1); // 从观察者数组中移除观察者
    }
  }

  // 通知
  notify(data: string): void {
    this.observers.forEach((observer) => observer.update(data)); // 遍历观察者数组，调用每个观察者的 update 方法
  }
}

class Observer {
  constructor(private name: string) {}

  // 更新
  update(data: string): void {
    console.log(`[${this.name}] received ${data}`); // 输出接收到的数据和观察者的名称
  }
}

const subject = new Subject();

const observer1 = new Observer('Observer 1');
const observer2 = new Observer('Observer 2');

subject.subscribe(observer1);
subject.subscribe(observer2);

subject.notify('New issue of "Code on Hexagenarian" is out!');

在这个例子中，Subject 扮演的是主题对象（发布者）的角色，它有三个主要的方法： subscribe() 让观察者订阅自己，unsubscribe() 让观察者取消订阅，notify() 则是通知所有的观察者。Observer 就是我们的观察者，它有一个 update() 方法，当主题对象的状态发生变化时，这个方法就会被调用。

我们创建了两个观察者，observer1 和 observer2，并让他们订阅了 subject。当我们调用 subject.notify('New issue of "Code on Hexagenarian" is out!') 时，所有的观察者都会收到通知。

四、小结

到这里，我们已经对观察者模式有了一定的了解，包括其定义、概念以及优点，并通过 JS 示例更深入地理解了它。观察者模式是一种非常有效的设计模式，它能帮助我们构建松散耦合的代码，使我们的程序更加灵活，更易于维护和扩展。

如果你对这篇文章感兴趣，那就赶快关注我们的公众号「码上花甲」吧！我们将在接下来的文章中，深入探讨观察者模式的更多内容，记得点赞和分享哦！

感谢阅读，如有不妥之处还请留言斧正，我们下期再见 :-)