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", "第二次-发布-订阅模式");
相关推荐
a1117761 分钟前
3D 建筑编辑器 Pascal Editor THreeJS 开源
前端·3d·html
jason_yang4 分钟前
写给女儿的英语App
前端·人工智能
誰能久伴不乏10 分钟前
深入理解 C++ 多态:对象模型与底层机制解析
开发语言·c++·架构
思码梁田12 分钟前
CSS 定位详解:从相对到固定,掌握网页布局的核心
前端·javascript·css
Wang's Blog14 分钟前
Go-Zero项目开发30: 微服务配置中心的设计与实现
开发语言·微服务·golang·go-zero
勇往直前plus15 分钟前
Vite :从双击 HTML 到现代前端开发
前端·html
muddjsv16 分钟前
CSS 高级选择器精讲:伪类、伪元素、逻辑伪类与选择器解耦规范
前端·css
HH‘HH18 分钟前
前端应用的离线暂停更新策略:原理、实现与最佳实践
开发语言·前端·php
软件开发技术深度爱好者23 分钟前
HTML5实现数学函数画图器
前端·javascript·html5
我命由我1234527 分钟前
Android 在构建过程中,发现有两个依赖库都包含了相同路径的资源文件
android·java·开发语言·java-ee·kotlin·android-studio·android runtime