前端面试不用愁：发布-订阅和观察者模式的区别

发布-订阅模式和观察者模式是两种常用的设计模式，它们在概念上非常相似，但在实现细节和用途上有一些区别。

观察者模式：
观察者模式是一种对象行为型模式，它定义了对象之间的一对多依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知并自动更新。在这种模式中，通常有两个主要角色：主题（Subject）和观察者（Observer）。主题维护一个观察者列表，当主题状态发生变化时，它会遍历这个列表并通知每个观察者。

发布-订阅模式：
发布-订阅模式是观察者模式的一种变体，它允许对象（称为订阅者）向另一个对象（称为发布者）订阅事件，并在事件发生时接收通知。与观察者模式不同，发布-订阅模式中的发布者和订阅者之间不直接交互，而是通过一个中介（通常是一个事件通道或消息队列）来进行通信。发布者将事件发送到中介，而订阅者则监听这些事件并做出相应的处理。

以下是一个简单的代码示例，展示了观察者模式和发布-订阅模式的区别：

观察者模式的代码示例：

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

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

  removeObserver(observer) {
    const index = this.observers.indexOf(observer);
    if (index > -1) {
      this.observers.splice(index, 1);
    }
  }

  notifyObservers(message) {
    for (let observer of this.observers) {
      observer.update(message);
    }
  }
}

class Observer {
  update(message) {
    console.log('Observer received message:', message);
  }
}

const subject = new Subject();
const observer = new Observer();
subject.addObserver(observer);

// 当主题状态发生变化时，通知观察者
subject.notifyObservers('Hello, observer!');

发布-订阅模式的代码示例：

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

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

  off(event, listener) {
    const index = this.events[event] ? this.events[event].indexOf(listener) : -1;
    if (index > -1) {
      this.events[event].splice(index, 1);
    }
  }

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

const eventEmitter = new EventEmitter();
const subscriber = (message) => console.log('Subscriber received message:', message);

eventEmitter.on('greeting', subscriber);

// 发布事件，通知订阅者
eventEmitter.emit('greeting', 'Hello, subscriber!');

总结：

• 观察者模式中，主题直接管理观察者的列表，并在状态变化时通知它们。
• 发布-订阅模式中，发布者和订阅者之间通过一个中介（如事件通道）进行解耦，使得它们不需要直接交互。
• 
  前私信【学习】即可获取更多前端资料！！！

————————————————

                        版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

原文链接：https://blog.csdn.net/weixin_44714345/article/details/138155456