WHAT - 发布订阅

在前端开发中，发布订阅是一种常见的开发场景，允许一个对象（发布者）发布事件，而多个对象（订阅者）可以订阅并接收这些事件。

发布订阅在设计模式中，可以理解为 观察者模式 / Observer Pattern

一、常见实现方案

以下是一些常见的实现方案：

1.1 使用事件发射器（Event Emitter）

许多 JavaScript 框架和库内置了事件发射器机制，例如 Node.js 的 EventEmitter 类。

const EventEmitter = require('events');
const eventEmitter = new EventEmitter();

// 定义事件
eventEmitter.on('event', (data) => {
  console.log('Event received:', data);
});

// 触发事件
eventEmitter.emit('event', 'Hello World!');

1.2 自定义事件系统（EventBus）

自己实现一个简单的发布订阅系统，可以通过维护一个事件监听器的映射表来实现。

class EventBus {
  constructor() {
    this.listeners = {};
  }

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

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

  off(event, listener) {
    if (this.listeners[event]) {
      this.listeners[event] = this.listeners[event].filter(l => l !== listener);
    }
  }
}

const eventBus = new EventBus();
eventBus.on('message', (data) => console.log('Message received:', data));
eventBus.emit('message', 'Hello EventBus!');

1.3 使用库如 PubSubJS

PubSubJS 是一个轻量级的 JavaScript 发布订阅库。

const PubSub = require('pubsub-js');

// 订阅
const token = PubSub.subscribe('TOPIC', (msg, data) => {
  console.log(msg, data);
});

// 发布
PubSub.publish('TOPIC', 'Hello PubSubJS!');

// 取消订阅
PubSub.unsubscribe(token);

1.4 使用框架内置的状态管理工具

许多现代前端框架如 Vue.js、React 和 Angular 提供了内置的状态管理工具，可以用来实现发布订阅模式。例如：

Vue.js

const EventBus = new Vue();

// 组件A：发布事件
EventBus.$emit('myEvent', 'Hello from Component A');

// 组件B：订阅事件
EventBus.$on('myEvent', (data) => {
  console.log(data);
});

React (使用 Context API 或 Redux)

// 使用 Context API
const MyContext = React.createContext();

// 提供者组件
const MyProvider = ({ children }) => {
  const [state, setState] = useState(null);

  const publish = (data) => {
    setState(data);
  };

  return (
    <MyContext.Provider value={{ state, publish }}>
      {children}
    </MyContext.Provider>
  );
};

// 订阅者组件
const MySubscriber = () => {
  const { state, publish } = useContext(MyContext);
  
  useEffect(() => {
    console.log('State updated:', state);
  }, [state]);

二、先后关系

可以先订阅后发布，那可以先发布后订阅吗？

在发布订阅模式中，先订阅后发布是非常常见的做法，因为这通常是实现实时事件通知的基本方式：订阅者先准备好接收消息，然后发布者发送消息。

然而，某些情况下，也可能需要在没有订阅者存在的情况下发布消息，并且在订阅者稍后订阅时能够收到之前发布的消息。要实现这种“先发布后订阅”的机制，可以采用以下几种方法：

2.1 缓存事件数据

发布者在发布消息时，将消息暂时存储在一个缓存中，当新的订阅者订阅时，可以将缓存中的消息发送给订阅者。

class EventBus {
  constructor() {
    this.listeners = {};
    this.cachedEvents = {};
  }

  on(event, listener) {
    if (!this.listeners[event]) {
      this.listeners[event] = [];
    }
    this.listeners[event].push(listener);
    
    // 如果有缓存的事件，立即触发
    if (this.cachedEvents[event]) {
      listener(this.cachedEvents[event]);
    }
  }

  emit(event, data) {
    if (this.listeners[event]) {
      this.listeners[event].forEach(listener => listener(data));
    }
    // 缓存事件数据
    this.cachedEvents[event] = data;
  }

  off(event, listener) {
    if (this.listeners[event]) {
      this.listeners[event] = this.listeners[event].filter(l => l !== listener);
    }
  }
}

const eventBus = new EventBus();

// 发布事件
eventBus.emit('message', 'This is a cached message');

// 订阅事件
eventBus.on('message', (data) => {
  console.log('Message received:', data); // Output: 'This is a cached message'
});

2.2 使用 Redux 或 Vuex 等状态管理工具

在前端框架中使用状态管理工具，例如 Redux（React）或 Vuex（Vue.js），可以在状态发生变化时订阅并触发相应的处理逻辑。状态管理工具的状态是持久的，订阅者在任何时候都可以获取当前的状态。

Redux 示例

const { createStore } = require('redux');

// 定义 action 类型
const SET_MESSAGE = 'SET_MESSAGE';

// 定义 action 创建函数
const setMessage = (message) => ({
  type: SET_MESSAGE,
  payload: message
});

// 定义 reducer
const messageReducer = (state = null, action) => {
  switch (action.type) {
    case SET_MESSAGE:
      return action.payload;
    default:
      return state;
  }
};

// 创建 Redux store
const store = createStore(messageReducer);

// 订阅 store
const unsubscribe = store.subscribe(() => {
  const state = store.getState();
  console.log('State updated:', state);
});

// 发布 action
store.dispatch(setMessage('This is a Redux message'));

2.3 使用本地存储或 IndexedDB

如果需要跨页面持久化数据，可以使用浏览器的本地存储（LocalStorage）或 IndexedDB。发布者将消息存储到本地存储中，订阅者在订阅时从本地存储中读取数据。

// 发布消息
localStorage.setItem('message', 'This is a persisted message');

// 订阅消息
const cachedMessage = localStorage.getItem('message');
if (cachedMessage) {
  console.log('Message received:', cachedMessage);
}

通过这些方法，可以实现“先发布后订阅”的功能，确保订阅者能够收到之前发布的消息。选择哪种方法可以根据具体需求和技术栈来决定。