重构之JavaScript设计模式实践——发布-订阅模式

前端

2023-11-10 14:00:10

JavaScript设计模式实践之发布-订阅模式

引言

最近在阅读《JavaScript设计模式与开发实践》，恰逢手头上的工作任务是项目重构，便产生了将两者结合的想法。本系列文章就是对本次学习实战的记录和总结。

认识发布-订阅模式

发布-订阅模式又称观察者模式，它定义了对象间的一种一对多关系，当一个对象的状态发生变化时，所有依赖于它的对象都将得到通知。

现实生活中的例子

举个现实生活中的例子，比如说，你想创建一个天气预报应用程序，其中包含一个负责获取天气信息的模块，以及多个负责显示天气信息的组件，如文本标签、图表和地图等。

使用发布-订阅模式，当天气信息模块获取到新的天气信息时，它会将这些信息发布出去，而所有的组件都会订阅这些信息，并根据最新信息更新自己的显示内容。

JavaScript中的实现

在JavaScript中，我们可以使用以下代码来实现发布-订阅模式：

// 创建一个发布者对象
const publisher = {
  subscribers: [],
  // 订阅发布者的更新
  subscribe: function(subscriber) {
    this.subscribers.push(subscriber);
  },
  // 发布更新
  publish: function(data) {
    this.subscribers.forEach((subscriber) => {
      subscriber(data);
    });
  }
};

// 创建一个订阅者对象
const subscriber1 = {
  // 订阅者接收更新时的处理函数
  update: function(data) {
    console.log(`Subscriber 1 received: ${data}`);
  }
};

// 创建另一个订阅者对象
const subscriber2 = {
  update: function(data) {
    console.log(`Subscriber 2 received: ${data}`);
  }
};

// 订阅发布者的更新
publisher.subscribe(subscriber1);
publisher.subscribe(subscriber2);

// 发布更新
publisher.publish('Hello, world!');