深入解析JavaScript发布订阅模式：原理、与观察者模式区别及实战场景

// 消息代理
class MessageBroker {
  constructor() {
    this.subscriptions = {};
  }

  subscribe(topic, callback) {
    if (!this.subscriptions[topic]) {
      this.subscriptions[topic] = [];
    }
    this.subscriptions[topic].push(callback);
  }

  publish(topic, data) {
    if (!this.subscriptions[topic]) {
      return;
    }
    this.subscriptions[topic].forEach((callback) => {
      callback(data);
    });
  }
}

// 发布者
class Publisher {
  constructor(broker) {
    this.broker = broker;
  }

  publishMessage(topic, message) {
    this.broker.publish(topic, message);
  }
}

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

  subscribeToTopic(topic) {
    this.broker.subscribe(topic, (data) => {
      console.log(`Subscriber ${this.name} received message: ${data}`);
    });
  }
}

// 使用示例
const broker = new MessageBroker();
const publisher = new Publisher(broker);

const subscriber1 = new Subscriber(broker, 'Alice');
const subscriber2 = new Subscriber(broker, 'Bob');

subscriber1.subscribeToTopic('news');
subscriber2.subscribeToTopic('weather');

publisher.publishMessage('news', 'Breaking news: the sky is blue');
publisher.publishMessage('weather', 'It will be sunny tomorrow');

// 消息代理
class MessageBroker {
  constructor() {
    this.subscriptions = {};
  }

  subscribe(topic, callback) {
    if (!this.subscriptions[topic]) {
      this.subscriptions[topic] = [];
    }
    this.subscriptions[topic].push(callback);
  }

  publish(topic, data) {
    if (!this.subscriptions[topic]) {
      return;
    }
    this.subscriptions[topic].forEach((callback) => {
      callback(data);
    });
  }
}

// 商品类
class Product {
  constructor(name, price, stock) {
    this.name = name;
    this.price = price;
    this.stock = stock;
  }

  setPrice(newPrice) {
    this.price = newPrice;
    this.broker.publish(`product/${this.name}/price`, this.price);
  }

  setStock(newStock) {
    this.stock = newStock;
    this.broker.publish(`product/${this.name}/stock`, this.stock);
  }

  setBroker(broker) {
    this.broker = broker;
  }
}

// 客户端类
class Client {
  constructor(name) {
    this.name = name;
  }

  subscribeToProduct(product) {
    product.broker.subscribe(`product/${product.name}/price`, (data) => {
      console.log(`Client ${this.name} received new price for ${product.name}: ${data}`);
    });
    product.broker.subscribe(`product/${product.name}/stock`, (data) => {
      console.log(`Client ${this.name} received new stock for ${product.name}: ${data}`);
    });
  }
}

// 使用示例
const broker = new MessageBroker();

const product1 = new Product('Product 1', 100, 10);
const product2 = new Product('Product 2', 200, 20);

product1.setBroker(broker);
product2.setBroker(broker);

const client1 = new Client('Alice');
const client2 = new Client('Bob');

client1.subscribeToProduct(product1);
client2.subscribeToProduct(product2);

product1.setPrice(120);
product1.setStock(5);

product2.setPrice(180);
product2.setStock(10);

class MessageQueue {
  constructor() {
    this.subscriptions = {};
    this.queue = [];
  }

  subscribe(topic, callback) {
    if (!this.subscriptions[topic]) {
      this.subscriptions[topic] = [];
    }
    this.subscriptions[topic].push(callback);
  }

  publish(topic, data) {
    if (!this.subscriptions[topic]) {
      return;
    }
    this.subscriptions[topic].forEach((callback) => {
      callback(data);
    });
  }

  enqueue(message) {
    this.queue.push(message);
  }

  dequeue() {
    return this.queue.shift();
  }

  process() {
    const message = this.dequeue();
    if (message) {
      this.publish(message.topic, message.data);
    }
  }
}

// 生产者
const producer = (queue) => {
  setInterval(() => {
    const message = { topic: 'test', data: new Date().toISOString() };
    queue.enqueue(message);
    console.log(`Produced message: ${JSON.stringify(message)}`);
  }, 1000);
};

// 消费者
const consumer = (queue) => {
  setInterval(() => {
    queue.process();
  }, 500);
};

// 使用示例
const queue = new MessageQueue();

queue.subscribe('test', (data) => {
  console.log(`Consumed message: ${data}`);
});

producer(queue);
consumer(queue);

class EventEmitter {
  constructor() {
    this.events = {};
  }

  on(event, listener) {
    if (!this.events[event]) {
      this.events[event] = [];
    }
    this.events[event].push(listener);
  }

  off(event, listener) {
    if (!this.events[event]) {
      return;
    }
    const index = this.events[event].indexOf(listener);
    if (index >= 0) {
      this.events[event].splice(index, 1);
    }
  }

  emit(event, ...args) {
    if (!this.events[event]) {
      return;
    }
    this.events[event].forEach((listener) => {
      listener.apply(this, args);
    });
  }
}

// 使用示例
const emitter = new EventEmitter();

const listener1 = (msg) => {
  console.log(`Listener 1 received: ${msg}`);
};

const listener2 = (msg) => {
  console.log(`Listener 2 received: ${msg}`);
};

emitter.on('test', listener1);
emitter.on('test', listener2);

emitter.emit('test', 'test message 1');
// Output:
// Listener 1 received: test message 1
// Listener 2 received: test message 1

emitter.off('test', listener1);

emitter.emit('test', 'test message 2');
// Output:
// Listener 2 received: test message 2