当前位置: 首页 > news >正文

JavaScript设计模式之发布-订阅模式

发布者和订阅者完全解耦(通过消息队列进行通信)
在这里插入图片描述
适用场景:功能模块间进行通信,如Vue的事件总线。
ES6实现方式:

class eventManager {constructor() {this.eventList = {};}on(eventName, callback) {if (this.eventList[eventName]) {this.eventList[eventName].push(callback);} else {this.eventList[eventName] = [callback];}}fire(eventName, data) {if (eventName in this.eventList &&Array.isArray(this.eventList[eventName])) {this.eventList[eventName].forEach(callback => callback(data));} else {console.log(`${eventName} is not a resgisted event`);}}off(eventName, callback) {if (callback) {if (eventName in this.eventList &&Array.isArray(this.eventList[eventName])) {let index = this.eventList[eventName].indexOf(callback);index > -1 && this.eventList[eventName].splice(index, 1);} else {console.log(`${eventName} has not been listen`);}} else {delete this.eventList[eventName]}}
}
let eventManager1 = new eventManager();
eventManager1.on("event", data => {console.log(data);
});
eventManager1.fire("event", "haha");
eventManager1.off("event");
http://www.lryc.cn/news/215922.html

相关文章:

  • mysql---索引
  • 微信小程序——简易复制文本
  • 【51单片机】矩阵键盘与定时器(学习笔记)
  • vue 中使用async await
  • C语言学习之内存区域的划分
  • Unity Animator cpu性能测试
  • 数据结构 - 顺序表ArrayList
  • 【Echarts】玫瑰饼图数据交互
  • k8s、pod
  • 一天掌握python爬虫【基础篇】 涵盖 requests、beautifulsoup、selenium
  • 睿趣科技:想知道开抖音小店的成本
  • python项目部署代码汇总:目标检测类、人体姿态类
  • 力扣每日一题92:反转链表||
  • Vue+OpenLayers从入门到实战进阶案例汇总目录,兼容OpenLayers7和OpenLayers8
  • C#中使用LINQtoSQL管理SQL数据库之添加、修改和删除
  • 飞致云及其旗下1Panel项目进入2023年第三季度最具成长性开源初创榜单
  • Maven实战-私服搭建详细教程
  • uniapp-自定义表格,右边操作栏固定
  • 基于Electron27+React18+ArcoDesign客户端后台管理EXE
  • QT5交叉编译保姆级教程(arm64、mips64)
  • python计算图片的RGB值,可以作为颜色的判断条件
  • oracle 日期
  • JVM堆内存解析
  • C#Onnx模型信息查看工具
  • RK3588 ubuntu系统安装opencv
  • 常用的vue UI组件库
  • 防范欺诈GPT
  • 【Java】多线程案例(单例模式,阻塞队列,定时器,线程池)
  • STM32:使用蓝牙模块
  • Blazor 虚拟滚动/瀑布流加载Table数据