JS发布订阅模式：以协奏交响传达数据

2023-11-18 06:48:54

当多个组件需要共享数据或互相通信时，发布订阅模式就派上用场了。在JavaScript中，我们可以通过发布者和订阅者的概念来实现这种模式。

发布者负责将数据或事件广播给订阅者，而订阅者则负责接收这些数据或事件并做出相应的反应。这种模式可以帮助我们解耦组件之间的依赖关系，使代码更具可维护性和可扩展性。

就如交响乐队的指挥家通过手势将音乐传递给乐团，发布者通过发布事件来传递数据，而订阅者则像乐手一样，根据事件做出响应，协同合作，奏出美妙的乐章。

// 定义发布者
class Publisher {
  constructor() {
    this.subscribers = [];
  }

  // 添加订阅者
  subscribe(subscriber) {
    this.subscribers.push(subscriber);
  }

  // 移除订阅者
  unsubscribe(subscriber) {
    const index = this.subscribers.indexOf(subscriber);
    if (index > -1) {
      this.subscribers.splice(index, 1);
    }
  }

  // 发布事件
  publish(data) {
    this.subscribers.forEach((subscriber) => {
      subscriber.update(data);
    });
  }
}

// 定义订阅者
class Subscriber {
  constructor(name) {
    this.name = name;
  }

  // 更新数据
  update(data) {
    console.log(`${this.name} received data: ${data}`);
  }
}

// 创建发布者
const publisher = new Publisher();

// 创建订阅者
const subscriber1 = new Subscriber("Subscriber 1");
const subscriber2 = new Subscriber("Subscriber 2");

// 订阅者订阅发布者
publisher.subscribe(subscriber1);
publisher.subscribe(subscriber2);

// 发布者发布事件
publisher.publish("Hello world!");