Javascript设计模式之观察者模式的多个实现版本实例

对于“Javascript设计模式之观察者模式的多个实现版本实例”的攻略，我会详细讲解如下。

概述

首先，我们需要了解观察者模式是什么。观察者模式是一种软件设计模式，其中，被称为主题（subject）的对象会维护其依赖项列表，其依赖项即观察者（observer），并在主题对象状态发生更改时自动通知观察者。这种模式非常适合处理多个对象之间的通信，以及实现松散的耦合。

一个观察者模式示例可以被实现为以下几个组件：

• 主题/被观察对象(subject)
• 观察者对象(observer)
• 主题对象必须能够添加和删除观察者
• 观察者对象必须有一个接口，以便主题对象发布更改时可以被通知

下面，我们将提供该模式的多个实现版本实例。

示例1：Basic Observer

下面是一个典型的观察者模式实现。其中，主题(subject)和观察者(observer)都是对象，它们互相通信以在更改发生时更新。

// 主题(subject)
class Subject {
  constructor() {
    this.observers = [];
  }

  addObserver(observer) {
    this.observers.push(observer);
  }

  removeObserver(observer) {
    const index = this.observers.indexOf(observer);
    if (index > -1) {
      this.observers.splice(index, 1);
    }
  }

  notifyObservers() {
    for (let i = 0; i < this.observers.length; i++) {
      const observer = this.observers[i];
      observer.update();
    }
  }
}

// 观察者(observer)
class Observer {
  update() {
    console.log("I'm updated");
  }
}

// 使用
const subject = new Subject();
const observer1 = new Observer();
const observer2 = new Observer();

// 添加观察者
subject.addObserver(observer1);
subject.addObserver(observer2);

// 发布更改
subject.notifyObservers();

在这个示例中，我们首先定义了一个主题类(subject)，该类维护了一个观察者数组。然后，我们定义了一个观察者类(observer)，它有一个update()方法，该方法在主题发布更改时被调用。

接下来，我们创建了一个主题对象(subject)，并创建了两个观察者(observer)对象。然后，我们将这两个观察者添加到主题的观察者列表中，并使用notifyObservers()方法发布主题更改。在这种情况下，由于观察者仅打印消息，因此在控制台上看不到任何更改。

示例2：Observer with data

这个示例与上一个示例类似，但这次我们向观察者传递一些数据。这个示例中，我们不再简单地打印更新消息，而是传递一个数据对象，以便观察者可以根据需要更新其自身状态。

// 主题(subject)
class Subject {
  constructor() {
    this.observers = [];
  }

  addObserver(observer) {
    this.observers.push(observer);
  }

  removeObserver(observer) {
    const index = this.observers.indexOf(observer);
    if (index > -1) {
      this.observers.splice(index, 1);
    }
  }

  notifyObservers(data) {
    for (let i = 0; i < this.observers.length; i++) {
      const observer = this.observers[i];
      observer.update(data);
    }
  }
}

// 观察者(observer)
class Observer {
  update(data) {
    console.log(`I'm updated with data: ${JSON.stringify(data)}`);
  }
}

// 使用
const subject = new Subject();
const observer1 = new Observer();
const observer2 = new Observer();

// 添加观察者
subject.addObserver(observer1);
subject.addObserver(observer2);

// 发布更改
subject.notifyObservers({ message: 'Hello World!' });

在这个示例中，我们首先定义了一样主题类(subject)，该类与前一个示例相同。然后，我们定义了一个观察者类(observer)，但这次我们传递了一个名为"update"的方法，该方法需要一个参数data。在这里，我们使用console.log()输出了更新消息和传递的数据。

接下来，我们创建了一个主题对象(subject)，并创建了两个观察者(observer)对象。然后，我们将这两个观察者添加到主题的观察者列表中，并使用notifyObservers()方法发布主题更改。这次，我们向notifyObservers()方法传递一个包含"strings"消息的数据对象。