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 小时前
系统运维(传统/通用运维)面试题
开发语言·php
其实防守也摸鱼1 小时前
个人学习 Pwn 思路:从基础到漏洞利用的进阶路径
大数据·前端·人工智能·chrome·算法·安全·网络安全
今天要早睡_2 小时前
C++01_入门基础复习
开发语言·c++
朱涛的自习室2 小时前
212 个需求、22 万行代码:Agent 接管开源项目的 19 天
android·前端·人工智能
aZhe的全栈知识分享2 小时前
AI 还原 Figma 效果总达不到预期?先别急着让它写代码
前端·后端·面试
review445432 小时前
Codex Hooks 入门实战:生命周期事件、matcher 与5分钟跑通一个钩子
前端·agent·vibecoding
函数小陈2 小时前
阿里云部署DSH与RAM完成运维
前端·后端
用户499335025073 小时前
JS 作用域劫持的死穴:动态 this 穿透,以及 AST 怎么救
前端
黑马程序员毕设3 小时前
基于 Java 的餐饮点餐系统设计与应用报告
java·开发语言
IT_陈寒3 小时前
React的setState真是个演员,你以为它同步其实在装睡
前端·人工智能·后端