WHAT - 发布订阅

在前端开辟中，发布订阅是一种常见的开辟场景，允许一个对象（发布者）发布变乱，而多个对象（订阅者）可以订阅并吸取这些变乱。
发布订阅在设计模式中，可以理解为 观察者模式 / Observer Pattern
一、常见实现方案

以下是一些常见的实现方案：
1.1 使用变乱发射器（Event Emitter）

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

1. const EventEmitter = require('events');
2. const eventEmitter = new EventEmitter();
4. // 定义事件
5. eventEmitter.on('event', (data) => {
6.   console.log('Event received:', data);
7. });
9. // 触发事件
10. eventEmitter.emit('event', 'Hello World!');

复制代码

1.2 自定义变乱系统（EventBus）

本身实现一个简单的发布订阅系统，可以通过维护一个变乱监听器的映射表来实现。

1. class EventBus {
2.   constructor() {
3.     this.listeners = {};
4.   }
6.   on(event, listener) {
7.     if (!this.listeners[event]) {
8.       this.listeners[event] = [];
9.     }
10.     this.listeners[event].push(listener);
11.   }
13.   emit(event, data) {
14.     if (this.listeners[event]) {
15.       this.listeners[event].forEach(listener => listener(data));
16.     }
17.   }
19.   off(event, listener) {
20.     if (this.listeners[event]) {
21.       this.listeners[event] = this.listeners[event].filter(l => l !== listener);
22.     }
23.   }
24. }
26. const eventBus = new EventBus();
27. eventBus.on('message', (data) => console.log('Message received:', data));
28. eventBus.emit('message', 'Hello EventBus!');

复制代码

1.3 使用库如 PubSubJS

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

1. const PubSub = require('pubsub-js');
3. // 订阅
4. const token = PubSub.subscribe('TOPIC', (msg, data) => {
5.   console.log(msg, data);
6. });
8. // 发布
9. PubSub.publish('TOPIC', 'Hello PubSubJS!');
11. // 取消订阅
12. PubSub.unsubscribe(token);

复制代码

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

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

1. const EventBus = new Vue();
3. // 组件A：发布事件
4. EventBus.$emit('myEvent', 'Hello from Component A');
6. // 组件B：订阅事件
7. EventBus.$on('myEvent', (data) => {
8.   console.log(data);
9. });

复制代码

React (使用 Context API 或 Redux)

1. // 使用 Context API
2. const MyContext = React.createContext();
4. // 提供者组件
5. const MyProvider = ({ children }) => {
6.   const [state, setState] = useState(null);
8.   const publish = (data) => {
9.     setState(data);
10.   };
12.   return (
13.     <MyContext.Provider value={{ state, publish }}>
14.       {children}
15.     </MyContext.Provider>
16.   );
17. };
19. // 订阅者组件
20. const MySubscriber = () => {
21.   const { state, publish } = useContext(MyContext);
22.   
23.   useEffect(() => {
24.     console.log('State updated:', state);
25.   }, [state]);

复制代码

二、先后关系

可以先订阅后发布，那可以先发布后订阅吗？
在发布订阅模式中，先订阅后发布是非经常见的做法，因为这通常是实实际时变乱通知的根本方式：订阅者先准备好吸取消息，然后发布者发送消息。
然而，某些情况下，也大概需要在没有订阅者存在的情况下发布消息，并且在订阅者稍后订阅时能够收到之前发布的消息。要实现这种“先发布后订阅”的机制，可以采用以下几种方法：
2.1 缓存变乱数据

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

1. class EventBus {
2.   constructor() {
3.     this.listeners = {};
4.     this.cachedEvents = {};
5.   }
7.   on(event, listener) {
8.     if (!this.listeners[event]) {
9.       this.listeners[event] = [];
10.     }
11.     this.listeners[event].push(listener);
12.    
13.     // 如果有缓存的事件，立即触发
14.     if (this.cachedEvents[event]) {
15.       listener(this.cachedEvents[event]);
16.     }
17.   }
19.   emit(event, data) {
20.     if (this.listeners[event]) {
21.       this.listeners[event].forEach(listener => listener(data));
22.     }
23.     // 缓存事件数据
24.     this.cachedEvents[event] = data;
25.   }
27.   off(event, listener) {
28.     if (this.listeners[event]) {
29.       this.listeners[event] = this.listeners[event].filter(l => l !== listener);
30.     }
31.   }
32. }
34. const eventBus = new EventBus();
36. // 发布事件
37. eventBus.emit('message', 'This is a cached message');
39. // 订阅事件
40. eventBus.on('message', (data) => {
41.   console.log('Message received:', data); // Output: 'This is a cached message'
42. });

复制代码

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

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

1. const { createStore } = require('redux');
3. // 定义 action 类型
4. const SET_MESSAGE = 'SET_MESSAGE';
6. // 定义 action 创建函数
7. const setMessage = (message) => ({
8.   type: SET_MESSAGE,
9.   payload: message
10. });
12. // 定义 reducer
13. const messageReducer = (state = null, action) => {
14.   switch (action.type) {
15.     case SET_MESSAGE:
16.       return action.payload;
17.     default:
18.       return state;
19.   }
20. };
22. // 创建 Redux store
23. const store = createStore(messageReducer);
25. // 订阅 store
26. const unsubscribe = store.subscribe(() => {
27.   const state = store.getState();
28.   console.log('State updated:', state);
29. });
31. // 发布 action
32. store.dispatch(setMessage('This is a Redux message'));

复制代码

2.3 使用本地存储或 IndexedDB

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

1. // 发布消息
2. localStorage.setItem('message', 'This is a persisted message');
4. // 订阅消息
5. const cachedMessage = localStorage.getItem('message');
6. if (cachedMessage) {
7.   console.log('Message received:', cachedMessage);
8. }

复制代码

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。