JS发布订阅模式|极客笔记

JS发布订阅模式

什么是发布订阅模式

发布订阅模式（Pub/Sub）是一种消息范式，其中发送者（发布者）和接收者（订阅者）彼此不知道彼此的存在。发布者通过特定的信道（通常是称为主题或事件的术语）向该信道发送消息，订阅者通过订阅特定信道来接收消息。

在JavaScript中，发布订阅模式通常用于解耦组件之间的通信，使得组件逻辑更加清晰和灵活。

发布订阅模式的优点

解耦性： 发布订阅模式降低了组件之间的耦合度，每个组件只需关心自己感兴趣的事件，而不需要知道其他组件的存在。
灵活性： 发布订阅模式使得组件之间可以轻松地相互通信，不需要直接依赖于彼此的具体实现细节。
可扩展性： 发布订阅模式可以轻松地向现有系统添加新的消息通道，而不会对现有逻辑产生太大影响。
异步通信： 发布订阅模式可以实现异步通信，使得消息的发送与接收可以在异步的情况下进行。

实现发布订阅模式

下面我们来实现一个简单的发布订阅模式：

class PubSub {
  constructor() {
    this.subscribers = {};
  }

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

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

// 创建发布订阅对象
const pubSub = new PubSub();

// 订阅事件
pubSub.subscribe('message', data => {
  console.log('Received message:', data);
});

// 发布事件
pubSub.publish('message', 'Hello, world!');

在上面的代码中，我们创建了一个名为PubSub的类，它具有subscribe和publish方法分别用于订阅事件和发布事件。我们可以多次调用subscribe方法来订阅同一个事件，然后调用publish方法来发布相应事件。

运行上面的代码会输出：

Received message: Hello, world!

使用发布订阅模式实现实时数据更新

在前端开发中，发布订阅模式常用于实现实时数据更新。下面我们来通过一个简单的示例演示如何使用发布订阅模式实现实时数据更新：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Real-time Data Update</title>
</head>
<body>
  <div id="app"></div>

  <script>
    // 创建发布订阅对象
    const pubSub = new PubSub();

    // 更新数据的函数
    function updateData(data) {
      const app = document.getElementById('app');
      app.textContent = data;
    }

    // 订阅事件
    pubSub.subscribe('updateData', updateData);

    // 模拟异步数据获取
    setTimeout(() => {
      // 模拟数据更新
      const newData = 'New data updated at ' + new Date().toLocaleTimeString();
      // 发布事件
      pubSub.publish('updateData', newData);
    }, 2000);
  </script>
</body>
</html>

在上面的示例中，我们创建了一个pubSub对象，并向其订阅了名为updateData的事件。通过setTimeout函数模拟了异步数据获取的过程，在数据获取后发布了updateData事件，从而触发了数据更新的操作。