JavaScript实现的发布/订阅(Pub/Sub)模式
最近在学习react过程中使用到了pubsub-js插件来实现组件间通信,基本使用方法如下
//发布 import Pubsub from 'pubsub-js' //... Pubsub.publish(eventType, data)
//订阅 import Pubsub from 'pubsub-js' //...
//生命周期中调用 componentDidMount() { const pubsub = Pubsub.subscribe(eventType, (msg, data) => { console.log(msg) // 这里将会输出对应设置的 eventType console.log(data) // 这里将会输出对应设置的参数 }) }
componentWillUnmount() {
/** * 取消指定的订阅 */ Pubsub.unsubscribe(pubsub)
/** * 取消全部订阅 */ PubSub.clearAllSubscriptions()
}
对应上述的发布与订阅模式,自己进行了一个简单的实现
class PubSubJs { constructor() { this.handles = {};//储存事件对象 } //订阅事件 on(eventType, handle) { //将订阅事件保存在handles中 this.handles[eventType] ? this.handles[eventType].push(handle) : (this.handles[eventType] = []).push(handle); } //触发事件 emit(eventType) { const [, ...args] = arguments; //获取第一个参数之后的参数 //匹配对应事件 this.handles[eventType] && this.handles[eventType].forEach((e) => { //循环遍历找到的已经注册的事件,绑定this,如果为null则绑定windows e.apply(null, args); }); } //删除订阅事件 off(eventType, handle) { if (this.handles[eventType]) { this.handles[eventType] = this.handles[eventType].filter((e) => { return e != handle; }); } else { //当前eventType没有订阅事件 } } } const first = function (data) { console.log("我是first,接收到的数据为" + data.a); }; const second = function (data) { console.log("我是second,接收到的数据为" + data.b); }; //创建实例 const mypubsub = new PubSubJs(); //订阅事件 mypubsub.on("A", first); mypubsub.on("A", second); //触发事件 mypubsub.emit("A", { a: 1, b: 2 }); //我是first,接收到的数据为1 我是second,接收到的数据为2 //删除事件 mypubsub.off("A", first); console.log(mypubsub.handles); //{ A: [ [Function: second] ] }
当然还有异步发布和订阅,此处只实现了同步,如有问题,欢迎指出。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」