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);
复制代码

 

posted @   herry菌  阅读(694)  评论(1编辑  收藏  举报
编辑推荐:
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
阅读排行:
· 周边上新:园子的第一款马克杯温暖上架
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· 使用C#创建一个MCP客户端
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
点击右上角即可分享
微信分享提示