一个易用的消息订阅发布系统-Pubsub.js

春哥大春

本文作者系360奇舞团前端开发工程师简介随着软件架构越来越复杂，如何有效地解决各个模块之间的通信问题变得尤为重要。一种常见的解决方案就是采用消息订阅发布机制。在这种模式下，每个模块只需要关注自己要发送或接收的消息，而不必关心其他模块的内部实现。今天要介绍的 pubsub.js 就是一个非常实用的消息订阅发布库。它具有使用简单、性能高效、支持多平台等优点，可以很好地满足各种需求。基本使用首先，让我们来看看如何使用 pubsub.js 进行消息的发送与接收。首先，我们需要引入库：importPubSubfrom"pubsub-js";然后，在需要发送消息的地方，我们可以使用 publish 方法：//发布一个名为'testEvent'的事件，并带上数据letdata={name:'JohnDoe'}ubSub.publish('testEvent',data);而在需要接收消息的地方，我们需要先使用 subscribe 方法进行订阅：//订阅名为'testEvent'的事件letsubscription=PubSub.subscribe('testEvent',function(message,data){console.log("Receiveddata:",data.name);});//当不再需要接收消息时，记得取消订阅PubSub.unsubscribe(subscription);以上就是一个简单的消息订阅发布流程。一些使用场景比如：状态。//可以外部变更组件内状态pubsub.publish(STATE_UPDATED_EVENT,newState);//在其他组件中订阅该事件以获得新状态pubsub.subscribe(STATE_UPDATED_EVENT,(newState)=>{this.setState(newState);});事务处理。//当异步操作完成时发布事件functionsubscribeTransaction(){varsubscription=PubSub.subscribe("transaction_start",asyncfunction(message,data){try{//处理事务...awaitsomeAsyncOperation();awaitsomeOtherAsyncOperation();resolve(true);}catch(e){reject(e);}});可以设置主题。importReact,{useState,useEffect}from'react';importPubSubfrom'pubsub-js';functionApp(){const[theme,setTheme]=useState('default');consthandleThemeChange=(nextTheme)=>{setTheme(nextTheme);};useEffect(()=>{constsubscription=PubSub.subscribe('theme-change',handleThemeChange);return()=>{PubSub.unsubscribe(subscription);};},[]);return( Currenttheme:{theme} {/*主题切换按钮*/}PubSub.publish('theme-change','dark')}>Switchtodarkmode{/*这个组件会随着主题改变而变*/});}functionThemedFunctionComponent({theme}){useEffect(()=>{console.log('Themechangedto:',theme);},[theme]);return(Thisisthethemedcomponent.);}exportdefaultApp;React 的小伙伴还可以封装一个自定义 Hooks 来更简洁的使用它。订阅完之后，别忘了取消订阅。取消特定订阅varmySubscriber=function(msg,data){console.log(msg,data);};vartoken=PubSub.subscribe('MYTOPIC',mySubscriber)ubSub.unsubscribe(token);取消某个函数的所有订阅varmySubscriber=function(msg,data){console.log(msg,data);}ubSub.unsubscribe(mySubscriber);取消某个主题的订阅PubSub.subscribe('a',myFunc1)ubSub.subscribe('a.b',myFunc2)ubSub.subscribe('a.b.c',myFunc3)ubSub.unsubscribe('a.b');//'a.b'和'a.b.c'会被取消订阅//`a`的通知仍然会被发布清楚所有订阅PubSub.clearAllSubscriptions();//所有订阅都被删除订阅计数PubSub.countSubscriptions('token')ubSub.js 通过发布/订阅模式实现实现组件间的解耦合，可以减少代码的复杂度和维护成本，使代码设计更人性化。-END-关于奇舞团奇舞团是 360 集团最大的大前端团队，代表集团参与 W3C 和 ECMA 会员（TC39）工作。奇舞团非常重视人才培养，有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择，并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。