JavaScript观察者模式(经典)

JavaScript观察者模式是一种常见的软件设计模式，被广泛应用于JavaScript代码中。其核心思想是，当某个对象（主题对象）发生变化时，能够通知订阅了它的观察者对象，并且观察者对象能够得到主题对象的变化信息并进行相应的处理。

简单来说，观察者模式可以使多个对象之间产生松耦合关系，让代码具备更好的可维护性和可扩展性。

以下是详细的攻略：

观察者模式的基本概念

在观察者模式中，主题对象负责维护一组观察者对象，并在自身发生变化时通知这些观察者对象。

具体来说，主题对象应该具备以下几个基本方法：

• attach(observer)：向主题对象添加一个观察者对象。
• detach(observer)：从主题对象中移除一个观察者对象。
• notify()：通知所有已注册的观察者对象。

观察者对象应该具备以下一个方法：

• update(subject, args)：在主题对象发生变化时被调用，传入的参数包括主题对象本身以及额外的变化信息。

基本实现方式

观察者模式的实现方式可以有多种，以下是一种经典的基本实现方式：

// 定义主题对象
class Subject {
  constructor() {
    this.observers = [];
  }

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

  detach(observer) {
    const idx = this.observers.indexOf(observer);
    if (idx >= 0) {
      this.observers.splice(idx, 1);
    }
  }

  notify(args) {
    for (const observer of this.observers) {
      observer.update(this, args);
    }
  }
}

// 定义观察者对象
class Observer {
  update(subject, args) {
    // 处理主题对象变化的逻辑
  }
}

// 示例代码
const subject = new Subject();
const observer1 = new Observer();
const observer2 = new Observer();

subject.attach(observer1);
subject.attach(observer2);

subject.notify('something happened'); // 通知所有的观察者

在上面的示例中，我们定义了一个主题对象和一个观察者对象，并用 attach 和 detach 方法来注册和移除观察者对象，在 notify 方法中通知所有已注册的观察者对象。

同时，观察者对象通过 update 方法来处理主题对象的变化。在 update 方法中，我们可以获取主题对象本身以及额外的变化信息，完成相应的处理。

观察者模式的其他实现方式

除上述经典实现方式外，还有以下几种常见的观察者模式的实现方式：

• 利用回调函数：在主题对象中定义回调函数，在变化发生后直接调用回调函数通知观察者，比较简单易懂。
• 利用发布/订阅模式：将观察者对象和主题对象解耦，让主题对象成为一个事件发射器（发布者），观察者对象作为事件监听器（订阅者），通过事件订阅和发布机制来实现通信。

示例代码

以下是一个基于回调函数的观察者模式的示例代码：

class Subject {
  constructor() {
    this.callbacks = [];
  }

  registerCallback(callback) {
    this.callbacks.push(callback);
  }

  unregisterCallback(callback) {
    const idx = this.callbacks.indexOf(callback);
    if (idx >= 0) {
      this.callbacks.splice(idx, 1);
    }
  }

  update(args) {
    for (const callback of this.callbacks) {
      callback(args);
    }
  }
}

class Observer {
  constructor() {
    this.id = Math.random();
  }

  handleUpdate(args) {
    console.log(`Observer ${this.id} received update: ${args}`);
  }
}

const subject = new Subject();
const observer1 = new Observer();
const observer2 = new Observer();

subject.registerCallback(observer1.handleUpdate.bind(observer1));
subject.registerCallback(observer2.handleUpdate.bind(observer2));

subject.update('something happened'); // 通知所有注册的回调函数

在上面的示例中，我们用回调函数的方式实现了观察者模式。主题对象维护一个回调函数列表，观察者对象注册自己的回调函数，主题对象在变化发生后直接调用所有已注册的回调函数。观察者对象通过回调函数来处理主题对象的变化。

另外，我们可以通过利用闭包来简化上述示例代码中 bind 的操作，具体实现方法可以参考相关教程。