当前位置: 首页 > 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");

相关文章:

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

发布者和订阅者完全解耦(通过消息队列进行通信) 适用场景:功能模块间进行通信,如Vue的事件总线。 ES6实现方式: class eventManager {constructor() {this.eventList {};}on(eventName, callback) {if (this.eventL…...

mysql---索引

概要 索引:排序的列表,列表当中存储的是索引的值和包含这个值的数据所在的行的物理地址 作用:加快查找速度 注:索引要在创建表时尽量创建完全,后期添加影响变动大。 索引也需要占用磁盘空间,innodb表数据…...

微信小程序——简易复制文本

在微信小程序中,可以使用wx.setClipboardData()方法来实现复制文本内容的功能。以下是一个示例代码: // 点击按钮触发复制事件 copyText: function() {var that this;wx.setClipboardData({data: 要复制的文本内容,success: function(res) {wx.showToa…...

【51单片机】矩阵键盘与定时器(学习笔记)

一、矩阵键盘 1、矩阵键盘概述 在键盘中按键数量较多时,为了减少I/O口的占用,通常将按键排列成矩阵形式 采用逐行或逐列的“扫描”,就可以读出任何位置按键的状态 2、扫描的概念 数码管扫描(输出扫描):…...

vue 中使用async await

在程序中使用同步的方式来加载异步的数据的方式: async function() {let promise new Promise((resolve, reject) > {resolve(res);}).then(re > {return re; });await promise; }...

C语言学习之内存区域的划分

内存区域的划分:32位OS可以访问的虚拟内存空间为0~4G;一、内核空间:3~4G;二、用户空间0~3G;栈区:局部变量在栈区分配、由OS负责分配和回收堆区:由程序员手动分配(malloc函数)和回收(free函数);静…...

Unity Animator cpu性能测试

测试案例: 场景中共有4000个物体,挂在40个animtor 上,每个Animator控制100个物体的动画。 使用工具: Unity Profiler. Unity 版本: unity 2019.4.40f1 测试环境: 手机 测试过程: 没有挂…...

数据结构 - 顺序表ArrayList

目录 实现一个通用的顺序表 总结 包装类 装箱 / 装包 和 拆箱 / 拆包 ArrayList 与 顺序表 ArrayList基础功能演示 add 和 addAll ,添加元素功能 ArrayList的扩容机制 来看一下,下面的代码是否存在缺陷 模拟实现 ArrayList add 功能 add ind…...

【Echarts】玫瑰饼图数据交互

在学习echarts玫瑰饼图的过程中,了解到三种数据交互的方法,如果对您也有帮助,不胜欣喜。 一、官网教程 https://echarts.apache.org/examples/zh/editor.html?cpie-roseType-simple (该教程数据在代码中) import *…...

k8s、pod

Pod k8s中的port【端口:30000-32767】 port :为Service 在 cluster IP 上暴露的端口 targetPort:对应容器映射在 pod 端口上 nodePort:可以通过k8s 集群外部使用 node IP node port 访问Service containerPort:容…...

一天掌握python爬虫【基础篇】 涵盖 requests、beautifulsoup、selenium

大家好,我是python222小锋老师。前段时间卷了一套 Python3零基础7天入门实战 以及1小时掌握Python操作Mysql数据库之pymysql模块技术 近日锋哥又卷了一波课程,python爬虫【基础篇】 涵盖 requests、beautifulsoup、selenium,文字版视频版。1…...

睿趣科技:想知道开抖音小店的成本

随着互联网的发展,越来越多的人开始尝试通过开设网店来创业。抖音作为目前最受欢迎的短视频平台之一,也提供了开店的功能。那么,开一家抖音小店需要多少成本呢? 首先,我们需要了解的是,抖音小店的开店费用是…...

python项目部署代码汇总:目标检测类、人体姿态类

一、AI健身计数 1、图片视频检测 (cpu运行): 注:左上角为fps,左下角为次数统计。 1.哑铃弯举:12,14,16 详细环境安装教程:pyqt5AI健身CPU实时检测mediapipe 可视化界面…...

力扣每日一题92:反转链表||

题目描述&#xff1a; 给你单链表的头指针 head 和两个整数 left 和 right &#xff0c;其中 left < right 。请你反转从位置 left 到位置 right 的链表节点&#xff0c;返回 反转后的链表 。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5], left 2, right 4 输…...

Vue+OpenLayers从入门到实战进阶案例汇总目录,兼容OpenLayers7和OpenLayers8

本篇作为《VueOpenLayers入门教程》和《VueOpenLayers实战进阶案例》所有文章的二合一汇总目录&#xff0c;方便查找。 本专栏源码是由OpenLayers结合Vue框架编写。 本专栏从Vue搭建脚手架到如何引入OpenLayers依赖的每一步详细新手教程&#xff0c;再到通过各种入门案例和综合…...

C#中使用LINQtoSQL管理SQL数据库之添加、修改和删除

目录 一、添加数据 二、修改数据 三、删除数据 四、添加、修改和删除的源码 五、生成效果 1.VS和SSMS原始记录 2.删除ID2和5的记录 3.添加记录ID2、5和8 4.修改ID3和ID4的记录 用LINQtoSQL管理SQL Server数据库时&#xff0c;主要有添加、修改和删除3种操作。 项目中创…...

飞致云及其旗下1Panel项目进入2023年第三季度最具成长性开源初创榜单

2023年10月26日&#xff0c;知名风险投资机构Runa Capital发布2023年第三季度ROSS指数&#xff08;Runa Open Source Startup Index&#xff09;。ROSS指数按季度汇总并公布在代码托管平台GitHub上年化增长率&#xff08;AGR&#xff09;排名前二十位的开源初创公司和开源项目。…...

Maven实战-私服搭建详细教程

Maven实战-私服搭建详细教程 1、为什么需要私服 首先我们为什么需要搭建Maven私服&#xff0c;一切技术来源于解决需求&#xff0c;因为我们在实际开发中&#xff0c;当我们研发出来一个 公共组件&#xff0c;为了能让别的业务开发组用上&#xff0c;则搭建一个远程仓库很有…...

uniapp-自定义表格,右边操作栏固定

uniapp-自定义表格&#xff0c;右边操作栏固定 在网上找了一些&#xff0c;没找到特别合适的&#xff0c;收集了一下其他人的思路&#xff0c;基本都是让左边可以滚动&#xff0c;右边定位&#xff0c;自己也尝试写了一下&#xff0c;有点样式上的小bug&#xff0c;还在尝试修…...

基于Electron27+React18+ArcoDesign客户端后台管理EXE

基于electron27.xreact18搭建电脑端exe后台管理系统模板 electron-react-admin 基于electron27整合vite.jsreact18搭建桌面端后台管理程序解决方案。 前几天有分享electron27react18创建跨平台应用实践&#xff0c;大家感兴趣可以去看看。 https://blog.csdn.net/yanxinyun1990…...

Nuxt.js 中的路由配置详解

Nuxt.js 通过其内置的路由系统简化了应用的路由配置&#xff0c;使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...

今日学习:Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存

文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...

水泥厂自动化升级利器:Devicenet转Modbus rtu协议转换网关

在水泥厂的生产流程中&#xff0c;工业自动化网关起着至关重要的作用&#xff0c;尤其是JH-DVN-RTU疆鸿智能Devicenet转Modbus rtu协议转换网关&#xff0c;为水泥厂实现高效生产与精准控制提供了有力支持。 水泥厂设备众多&#xff0c;其中不少设备采用Devicenet协议。Devicen…...

沙箱虚拟化技术虚拟机容器之间的关系详解

问题 沙箱、虚拟化、容器三者分开一一介绍的话我知道他们各自都是什么东西&#xff0c;但是如果把三者放在一起&#xff0c;它们之间到底什么关系&#xff1f;又有什么联系呢&#xff1f;我不是很明白&#xff01;&#xff01;&#xff01; 就比如说&#xff1a; 沙箱&#…...

智能职业发展系统:AI驱动的职业规划平台技术解析

智能职业发展系统&#xff1a;AI驱动的职业规划平台技术解析 引言&#xff1a;数字时代的职业革命 在当今瞬息万变的就业市场中&#xff0c;传统的职业规划方法已无法满足个人和企业的需求。据统计&#xff0c;全球每年有超过2亿人面临职业转型困境&#xff0c;而企业也因此遭…...

倒装芯片凸点成型工艺

UBM&#xff08;Under Bump Metallization&#xff09;与Bump&#xff08;焊球&#xff09;形成工艺流程。我们可以将整张流程图分为三大阶段来理解&#xff1a; &#x1f527; 一、UBM&#xff08;Under Bump Metallization&#xff09;工艺流程&#xff08;黄色区域&#xff…...

Java多线程实现之Runnable接口深度解析

Java多线程实现之Runnable接口深度解析 一、Runnable接口概述1.1 接口定义1.2 与Thread类的关系1.3 使用Runnable接口的优势 二、Runnable接口的基本实现方式2.1 传统方式实现Runnable接口2.2 使用匿名内部类实现Runnable接口2.3 使用Lambda表达式实现Runnable接口 三、Runnabl…...

RocketMQ 客户端负载均衡机制详解及最佳实践

延伸阅读&#xff1a;&#x1f50d;「RocketMQ 中文社区」 持续更新源码解析/最佳实践&#xff0c;提供 RocketMQ 专家 AI 答疑服务 前言 本文介绍 RocketMQ 负载均衡机制&#xff0c;主要涉及负载均衡发生的时机、客户端负载均衡对消费的影响&#xff08;消息堆积/消费毛刺等…...

链结构与工作量证明7️⃣:用 Go 实现比特币的核心机制

链结构与工作量证明:用 Go 实现比特币的核心机制 如果你用 Go 写过区块、算过哈希,也大致理解了非对称加密、数据序列化这些“硬核知识”,那么恭喜你,现在我们终于可以把这些拼成一条完整的“区块链”。 不过别急,这一节我们重点搞懂两件事: 区块之间是怎么连接成“链”…...

CMake系统学习笔记

CMake系统学习笔记 基础操作 最基本的案例 // code #include <iostream>int main() {std::cout << "hello world " << std::endl;return 0; }// CMakeLists.txt cmake_minimum_required(VERSION 3.0)# 定义当前工程名称 project(demo)add_execu…...