js 实现订阅发布

  1. 事件中心,包括事件回调存储,订阅事件方法,发布事件方法,解除订阅方法
javascript 复制代码
  let eventEmitter = {
    //事件
    events: {},
    //订阅事件
    on: function (event, listener) {
    //不存在回调事件,初始化
      if (!this.events[event]) {
        this.events[event] = [];
      }
      //存储回调事件
      this.events[event].push(listener);
    },
    //发布事件,...args,剩余参数
    emit: function (event, ...args) {
    //没有订阅事件
      if (!this.events[event]) {
        return;
      }
      //循环执行订阅事件的回调函数
      this.events[event].forEach((listener) => {
        listener(...args);
      });
    },
    //取消订阅
    off: function (event, listener) {
    //没有订阅事件
      if (!this.events[event]) {
        return;
      }
      //移除订阅事件回调函数中listener
      this.events[event] = this.events[event].filter((item) => {
        return item != listener;
      });
    },
  };
  1. 实际调用举例
javascript 复制代码
//定义回调函数
 function user1(message) {
    console.log("user1:", message);
  }
 function user2(message) {
    console.log("user2:", message);
  }
  //订阅事件
  eventEmitter.on("chat", user1);
  eventEmitter.on("chat", user2);
  //发布事件
  eventEmitter.emit("chat", "第一次-发布-订阅模式");
  //解绑订阅
   eventEmitter.off("chat", user2);
    //发布事件,只有user1收到消息(只调用user1)
  eventEmitter.emit("chat", "第二次-发布-订阅模式");
相关推荐
weixin_4482902532 分钟前
书庐开发实战教学
javascript·css·html
默_笙38 分钟前
🛴 从散件到整机:DeepAgents 与 Agent 身上预留的那些"插槽"(前置介绍)
前端·javascript
zhangzeyuaaa1 小时前
深入理解 Ruby 运算符:本质、分类、坑点与重载实战
开发语言·前端·ruby
一木 之林1 小时前
DeepSeek Agent 开发(一)
开发语言·前端·javascript
朔北之忘 Clancy1 小时前
青少年软编等考七级题解目录
开发语言·c++·青少年编程·gesp·csp·信奥赛·noi
ss2731 小时前
AI全栈实战 | 3.2-01 Python 基础:四大数据容器怎么选,推导式为什么是 Pythonic 的灵魂
开发语言·人工智能·python
Mr_Macallon1 小时前
C++回顾(基础)(01)
c语言·开发语言·c++·学习
未来之窗软件服务2 小时前
Go 利器 GoReSym:剥离符号恢复 Go 二进制元数据—东方仙盟
开发语言·golang·仙盟创梦ide·东方仙盟
树下水月2 小时前
Typora破解
linux·服务器·前端
朝朝辞暮i2 小时前
C++ 第 32 课:main()、rclcpp::init()、spin()、shutdown()
开发语言·c++·算法