观察者模式和发布订阅模式有什么区别？前端哪里用到了它们？

// 观察者模式：被观察者直接持有观察者
class Product {
  #observers = new Set();
  constructor(price) {
    this.price = price;
  }
  subscribe(observer) {
    this.#observers.add(observer);
    return () => this.#observers.delete(observer);
  }
  setPrice(price) {
    this.price = price;
    for (const observer of this.#observers) observer.update(this);
  }
}

// 发布订阅：通过事件中心解耦
class EventBus {
  #handlers = new Map();
  on(event, handler) {
    if (!this.#handlers.has(event)) this.#handlers.set(event, new Set());
    this.#handlers.get(event).add(handler);
    return () => this.#handlers.get(event).delete(handler);
  }
  emit(event, payload) {
    for (const handler of this.#handlers.get(event) ?? []) handler(payload);
  }
}

const logs = [];
const phone = new Product(3000);
const unsubscribe = phone.subscribe({ update: (p) => logs.push(`观察者：${p.price}`) });
phone.setPrice(2800);
unsubscribe();
phone.setPrice(2500);

const bus = new EventBus();
bus.on('price-change', (price) => logs.push(`订阅者：${price}`));
bus.emit('price-change', 2800);
bus.emit('stock-change', 0);

console.log(logs.join('|')); // 观察者：2800|订阅者：2800