发布者订阅者模式：以更精细的方式实现组件间通信

前端

2023-11-13 12:30:30

组件通信：发布者-订阅者模式详解

在当今复杂的软件开发环境中，组件之间的通信至关重要。例如，当用户点击按钮时，必须通知另一个组件以更新用户界面。传统上，这种通信通过直接调用另一个组件的方法来实现。然而，这种方法存在一些缺点，包括高耦合度、可维护性差和扩展性差。

为了解决这些问题，发布者-订阅者模式 应运而生。这种设计模式允许组件之间进行通信，而无需直接调用彼此的方法。它具有以下主要角色：

发布者： 发布事件的组件。
订阅者： 订阅事件的组件。
事件调度中心： 管理发布者和订阅者之间通信的组件。

发布者-订阅者模式的工作流程

发布者-订阅者模式的工作流程如下：

发布者发布事件： 发布者创建一个事件对象，其中包含有关所发生事件的信息。
事件调度中心转发事件： 事件调度中心将事件转发给所有订阅了该事件的订阅者。
订阅者处理事件： 订阅者收到事件后，执行相应的处理逻辑。

发布者-订阅者模式与观察者模式的比较

发布者-订阅者模式与观察者模式类似，但有一些区别：

在观察者模式中，观察者直接订阅被观察者的状态。当被观察者的状态发生变化时，观察者会收到通知。
在发布者-订阅者模式中，发布者发布事件。订阅者订阅事件。当发布者发布事件时，订阅者会收到通知。

发布者-订阅者模式多了一个事件调度中心层，这使得它比观察者模式更加灵活和可扩展。

ES5 原型实现示例

以下是用 ES5 原型语法编写的发布者-订阅者模式的简单示例：

// 发布者类
function Publisher() {
  this.subscribers = [];
}

// 添加订阅者
Publisher.prototype.addSubscriber = function (subscriber) {
  this.subscribers.push(subscriber);
};

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

// 发布事件
Publisher.prototype.publish = function (event) {
  for (let i = 0; i < this.subscribers.length; i++) {
    this.subscribers[i].notify(event);
  }
};

// 订阅者类
function Subscriber() {}

// 订阅事件
Subscriber.prototype.subscribe = function (publisher) {
  publisher.addSubscriber(this);
};

// 取消订阅事件
Subscriber.prototype.unsubscribe = function (publisher) {
  publisher.removeSubscriber(this);
};

// 事件处理函数
Subscriber.prototype.notify = function (event) {
  console.log('收到事件：', event);
};

// 创建发布者和订阅者对象
const publisher = new Publisher();
const subscriber1 = new Subscriber();
const subscriber2 = new Subscriber();

// 订阅者1订阅事件
subscriber1.subscribe(publisher);

// 订阅者2订阅事件
subscriber2.subscribe(publisher);

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

// 订阅者1收到事件
// 收到事件： Hello world!

// 订阅者2收到事件
// 收到事件： Hello world!

// 订阅者1取消订阅事件
subscriber1.unsubscribe(publisher);

// 发布者再次发布事件
publisher.publish('Goodbye world!');

// 订阅者1不再收到事件
// 订阅者2收到事件
// 收到事件： Goodbye world!