设计模式＃3 - 观察者模式

我们将继续探索前端开发者常用的设计模式，继第一篇关于单例模式的文章之后，我们将在第二篇中探讨外观模式。现在，我们将深入探讨观察者模式。

观察者模式

观察者模式是一种易于理解且广泛使用的消息传递设计模式。在这种模式中，一个对象（称为主体）维护着其依赖对象（称为观察者）的列表，并在任何状态变化时自动通知这些依赖对象。这种模式促进了相关对象之间的松散耦合，并允许它们之间进行高效的通信。

真实案例

设想一位顾客和一家商店。顾客想要一款店内尚未发售的新款 iPhone。他们可以每天查看，但大多数情况下，跑一趟都是不必要的。或者，商店可以在新品到货时向所有顾客发送垃圾邮件，这样既可以避免顾客无谓的跑路，又会打扰到其他顾客。这就造成了一个两难的局面：要么顾客浪费时间，要么商店浪费资源。

观察者模式解决方案

在上面的例子中，客户是观察者，而商店是观察主体。客户可以选择接收特定类别产品的更新，也可以不接收，从而可以选择观察哪些产品。

在这种情况下，商店（即主体）知道谁对其更新感兴趣（客户，或观察者），并且可能存在多个客户。不同的客户可以注册同一商店的更新，并且每当有新产品上线时，所有客户都会收到通知。

每次在商店中创建、更新或删除新产品时都会发生这种通信。

在观察者模式中，即使 Store 知道它的 Customer 是谁，它也不关心或知道每个 Customer 会如何处理收到的更新。每个 Customer 完全控制如何处理它们收到的更新。

另一个与观察者非常相似的模式是发布者/订阅者模式，我将在本系列的下一篇文章中介绍。

代码示例

如果您像我一样，想要查看代码，它会使理解变得更简单，因此这里有一个简单的 JavaScript 代码示例来说明观察者模式：

// Define a class for the Provider
class Store {
  constructor() {
    this.observers = [];
  }

  // Add an observer to the list
  add(observer) {
    this.observers.push(observer);
  }

  // Notify all observers about new product
  notify(product) {
    this.observers.forEach(observer => observer.update(product));
  }
}

// Define a class for the Observer
class Customer {
  update(product) {
    console.log(`New product added: ${product}`);
  }
}

// Usage
const store = new Store();
const customer = new Customer();
store.add(customer); // Add a customer to the store's observers
store.notify('iPhone 15'); // Notify all observers about a new product

在上面的代码中，通过创建两个类Store和来举例说明观察者模式Customer。

该类Store代表提供者（有些人可能称之为主题）。它有一个数组，用于存储所有对更新感兴趣的observers观察者（实例） 。它还有一个方法用于添加新的观察者，以及一个方法用于通知所有观察者有关新产品的信息。CustomerStoreaddnotify

虽然Customer该类代表观察者，但它有一个update方法，当它收到更新时会执行一些操作，在这种情况下它会登录控制台。

一切就绪，让我们开始使用它。我们创建一个Store和一个Customer对象。使用方法Customer将 添加到 的观察者中。Storeadd

然后，使用 该方法Store通知所有观察者（在本例中只有一个Customer）有关新产品（“iPhone 15”）的信息notify。该customer.update()方法被调用，并将新产品打印到控制台。

就是这样！现在你的技能库里又多了一个设计模式。请继续关注本系列，了解更多关于不同设计模式的探索，并在评论区告诉我你接下来想看什么设计模式！