pubSub-js观察者模式订阅触发实现原理
先上实现代码:
function PubSub() { this.handlers = {}; } PubSub.prototype = { // 订阅事件(定义的key值,绑定的函数) on: function(eventType, handler){ var self = this; if(!(eventType in self.handlers)) { self.handlers[eventType] = []; } self.handlers[eventType].push(handler); return this; }, // 触发事件(定义的key值) 后一个参数建议传递对象 emit: function(eventType){ var self = this; var handlerArgs = Array.prototype.slice.call(arguments,1);//触发传递的数据 for(var i = 0; i < self.handlers[eventType].length; i++) { self.handlers[eventType][i].apply(self,handlerArgs);//将传过来的对象绑定于函数中 apply立即执行 } return self; }, // 删除订阅事件(定义的key值,绑定的函数(一般传个函数变量)) off: function(eventType, handler){ var currentEvent = this.handlers[eventType];//返回PubSub被绑定的函数 var len = 0; if (currentEvent) { len = currentEvent.length; for (var i = len - 1; i >= 0; i--){ if (currentEvent[i] === handler){ currentEvent.splice(i, 1);//PubSub对象中的函数被删除 splice用于删除项目 } } } return this; } }
on订阅事件,可将事件传入到PubSub对象的handlers对象中。
emit触发事件,将传入的对象绑定到订阅的函数中,apply改变传入的参数的指向为指定函数,并立即执行。
off删除订阅,将PubSub对象的指定key的事件删除。
使用方法:
var pubsub = new PubSub(); //订阅事件A // pubsub.on('A', function(data){ // console.log(1, data); // }); pubsub.on('A', a2=function(data){ console.log(2 , data); }); //触发事件A pubsub.emit('A', {a:2}); //删除事件A的订阅源a2 pubsub.off('A', a2);
博客园作者:herry菌朋友,看到这里,关注作者的公众号吧,不漏掉更新哦
![]()
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· 周边上新:园子的第一款马克杯温暖上架
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· 使用C#创建一个MCP客户端
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!