JavaScript 设计模式 - 发布－订阅模式

发布-订阅模式（Publish-Subscribe Pattern，又称观察者模式）是一种编程模式，它创建了一种解耦的方式，让对象之间的依赖基于事件的发布和订阅来建立，而不是通过直接调用。这有助于实现松耦合的系统，使得组件可以更容易地复用和维护。

核心概念

• 发布者(Publisher): 负责发布事件的对象，不关心谁会接收这些事件。
• 订阅者(Subscriber): 对事件感兴趣的对象，注册对特定事件的兴趣，并提供处理该事件的方法。
• 调度中心(Event Channel/Event Bus): 中介角色，负责接收发布者的事件，并将这些事件通知给所有订阅了该事件的订阅者。

JavaScript 实现示例

下面是一个简单的发布-订阅模式实现：

class PubSub {
  constructor() {
    this.events = {}; // 用于存储事件类型及对应的订阅者列表
  }

  // 订阅事件
  subscribe(eventType, callback) {
    if (!this.events[eventType]) {
      this.events[eventType] = [];
    }
    this.events[eventType].push(callback);
  }

  // 发布事件
  publish(eventType, data) {
    const callbacks = this.events[eventType];
    if (callbacks) {
      callbacks.forEach(callback => callback(data));
    }
  }

  // 取消订阅
  unsubscribe(eventType, callback) {
    if (this.events[eventType]) {
      this.events[eventType] = this.events[eventType].filter(cb => cb !== callback);
    }
  }
}

// 使用示例
const pubsub = new PubSub();

// 订阅者1
function subscriber1(data) {
  console.log("Subscriber 1 received:", data);
}

// 订阅者2
function subscriber2(data) {
  console.log("Subscriber 2 received:", data);
}

// 订阅事件
pubsub.subscribe("news", subscriber1);
pubsub.subscribe("news", subscriber2);

// 发布事件
pubsub.publish("news", { title: "New Article", content: "Check out the latest article!" });

// 输出:
// Subscriber 1 received: { title: 'New Article', content: 'Check out the latest article!' }
// Subscriber 2 received: { title: 'New Article', content: 'Check out the latest article!' }

// 取消订阅
pubsub.unsubscribe("news", subscriber1);

// 再次发布事件，只有subscriber2会收到通知
pubsub.publish("news", { title: "Another Update", content: "More news to read." });

// 输出:
// Subscriber 2 received: { title: 'Another Update', content: 'More news to read.' }

在这个例子中，PubSub类扮演了调度中心的角色，提供了订阅、发布和取消订阅的方法。订阅者通过subscribe方法注册自己对特定事件的兴趣，发布者通过publish方法发布事件，调度中心则确保所有对该事件感兴趣的订阅者都能收到通知。通过这种方式，发布者和订阅者之间没有直接的依赖，增加了系统的灵活性和可维护性。