发布订阅模式与观察者模式

发布订阅模式与观察者模式

发布订阅模式(vue2中的EventBus)

发布订阅模式是一种面向消息的设计模式，其中消息发送者（发布者）不会直接发送消息给特定的接收者（订阅者）。相反，发布者将消息发布到中间组件（如事件总线或消息代理），然后订阅者根据自己的需求订阅相关的消息。这种解耦可以让发布者和订阅者独立地发展，而不必担心相互影响。

// 创建一个简单的事件总线
class EventBus {
  constructor() {
    this.events = {};
  }

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

  publish(eventName, data) {
    if (this.events[eventName]) {
      this.events[eventName].forEach((callback) => {
        callback(data);
      });
    }
  }

  unsubscribe(eventName, callback) {
    if (this.events[eventName]) {
      this.events[eventName] = this.events[eventName].filter(
        (cb) => cb !== callback
      );
    }
  }
}

const eventBus = new EventBus();

// 订阅 "dataUpdated" 事件
eventBus.subscribe("dataUpdated", (data) => {
  console.log("Data updated:", data);
});

// 发布 "dataUpdated" 事件
eventBus.publish("dataUpdated", { id: 1, content: "Hello world!" });

// 取消订阅 "dataUpdated" 事件
eventBus.unsubscribe("dataUpdated");

观察者模式(vue2底层逻辑中的数据劫持与更新)

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

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

  removeObserver(observer) {
    this.observers = this.observers.filter((obs) => obs !== observer);
  }

  notifyObservers(data) {
    this.observers.forEach((observer) => {
      observer.update(data);
    });
  }
}

class Observer {
  constructor(name) {
    this.name = name;
  }

  update(data) {
    console.log(`${this.name} received data:`, data);
  }
}

const observable = new Observable();

const observer1 = new Observer("Observer 1");
const observer2 = new Observer("Observer 2");

observable.addObserver(observer1);
observable.addObserver(observer2);

observable.notifyObservers({ id: 1,content: "Hello world!" });

observable.removeObserver(observer2);

observable.notifyObservers({ id: 2, content: "Hello again!" });

相同点与不同点

相同点

1. 解耦：两者都支持发布者（或被观察者）与订阅者（或观察者）之间的解耦，允许它们独立发展，降低耦合度。
2. 事件驱动：发布订阅模式和观察者模式都是基于事件的，它们在特定事件发生时将信息传递给订阅者或观察者。

不同点

1. 中间组件：发布订阅模式使用中间组件（如事件总线或消息代理）来管理发布者和订阅者之间的通信，而观察者模式中，被观察者直接通知观察者。
2. 通知方式：在发布订阅模式中，订阅者订阅特定类型的事件，当该事件发生时，订阅者被通知。在观察者模式中，观察者订阅被观察者本身，当被观察者状态发生变化时，所有观察者都会被通知。
3. 适用场景：发布订阅模式更适用于大型、分布式系统，因为它可以在多个组件之间传递事件。而观察者模式更适用于较小的系统或模块内部，因为它需要被观察者直接通知观察者。

总结一下，发布订阅模式和观察者模式都是用于在系统中实现事件驱动和解耦的设计模式。尽管它们有许多相似之处，但它们在通信方式和适用场景方面存在一些差异。在选择使用哪种模式时，需要根据具体场景和系统的需求进行权衡。