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", "第二次-发布-订阅模式");
相关推荐
Run_Teenage29 分钟前
Linux:线程互斥,线程锁
运维·开发语言·jvm
小小de风呀31 分钟前
de风——【从零开始学C++】(四):类和对象(下)
开发语言·c++·算法
覆东流32 分钟前
第10天:python元组
开发语言·后端·python
CSCN新手听安34 分钟前
【Qt】系统相关(一)内容简介,事件概念,事件的处理
开发语言·c++·qt
Hello--_--World35 分钟前
Vue指令:v-if vs v-show、v-if 与 v-for 的优先级冲突、自定义指令
前端·javascript·vue.js
神の愛36 分钟前
ReactHooks
前端·javascript·react.js
蝎子莱莱爱打怪42 分钟前
用好CC,事半功倍!Claude Code 命令大全,黄金命令推荐、多模型配置、实践指南、Hooks 和踩坑记录大全
前端·人工智能·后端
不想写代码的星星1 小时前
重识 std::tuple:一个被低估的编译期异构容器
开发语言·c++
本末倒置1831 小时前
VS Code 这次稳了!CSS Anchor Positioning 彻底终结 WebView 定位卡顿
前端
techdashen1 小时前
用 Rust 写生产级服务要踩多少坑——Cloudflare 把答案做成了一个开源库
开发语言·rust·开源