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", "第二次-发布-订阅模式");
相关推荐
古夕1 分钟前
my-first-ai-web_问题记录02:Next.js 15 动态路由参数处理
前端·javascript·react.js
梦里寻码1 分钟前
自行食用 uniapp 多端 手写签名组件
前端·uni-app
Pocker_Spades_A2 分钟前
飞算JavaAI家庭记账系统:从收支记录到财务分析的全流程管理方案
java·开发语言
前端小白19954 分钟前
面试取经:工程化篇-webpack性能优化之热替换
前端·面试·前端工程化
随笔记44 分钟前
使用vite新搭建react项目,都需要配置什么?
前端·react.js·vite
JiangJiang1 小时前
🩸 一次失败的降级迁移尝试 **从 Vite + React 19 到 CRA + React 17 的 IE 兼容血泪史**
前端
moyu841 小时前
静态声明与动态拦截:从Object.defineProperty到Proxy
前端
kuxku1 小时前
下一代前端工具链浅析
前端·架构
清风不问烟雨z1 小时前
不仅仅是 Mock 服务:mock-h3,让前端也能优雅拥有后端能力
前端·javascript·vite
跟橙姐学代码1 小时前
写 Python 函数别再死抠参数了,这招让代码瞬间灵活
前端·python