TypeScript学习日志-第二十五天(编写发布订阅模式)

编写发布订阅模式

这是更具订阅模式写的代码 可以理解订阅模式的思想

interface I {events:Map<string,Function[]>once:(event:string,callback:Function)=>void // 触发一次on:(event:string,callback:Function)=>void // 订阅emit:(event:string,...args:any[])=>void // 派发off:(event:string,callback:Function)=>void // 删除监听器
}
class Emitter implements I {events: Map<string, Function[]>;constructor(){this.events = new Map()}once(event:string,callback:Function){// 创建一个自定义函数 通过on 触发 触发完之后立马通过off 回收掉const cb = (...args:any[]) => {callback(...args)this.off(event,cb)}this.on(event,cb)}off(event:string,callback:Function){const callbackList = this.events.get(event)if(callbackList){callbackList.splice(callbackList.indexOf(callback),1)}  }emit(event:string,...args:any[]){const callbackList = this.events.get(event)if(callbackList){callbackList.forEach(fn=>{fn(...args)})}}on(event:string,callback:Function){// 证明存过了if(this.events.has(event)){const callbackList = this.events.get(event)callbackList && callbackList.push(callback)}else{// 否则就是第一次存this.events.set(event,[callback])}}
}const bus = new Emitter()
const fn = (b:boolean,n:number) => {console.log(1,b,n)
}bus.on('message',fn)
bus.on('message',fn)bus.emit('message',false,1)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/12291.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

FileUpload控件

FileUpload控件是一个在Web应用程序中常用的界面元素&#xff0c;它允许用户从客户端选择文件&#xff0c;并将该文件上传到Web服务器。以下是关于FileUpload控件的一些详细信息&#xff1a; 基本功能&#xff1a;FileUpload控件通常显示为一个文本框和一个“浏览”按钮。用户…

面试算法之哈希专题

赎金信 class Solution { public:bool canConstruct(string ransomNote, string magazine) {// 小写字母int r_cnt[26];int m_cnt[26];for(int i 0; i< magazine.size(); i) {m_cnt[magazine[i]-a]; // 统计}// 对比for(int i 0; i< ransomNote.size(); i) {if(m_cnt[r…

使用vant-ui+vue3实现一个可复用的评星组件

如图所示 有两种情况 一种是5颗星 一种是3颗星 官网上只提供了图标类型的 并没有加文字 https://femessage-vant.netlify.app/#/zh-CN/ 自己结合两种情况 在全局注册了此组件(后续还会持续更新代码~) <template><div class"vant_rate_wrapper"><van…

【Javaer学习Python】 1、Django安装

安装 Python 和 PyCharm 的方法就略过了&#xff0c;附一个有效激活PyCharm的链接&#xff1a;https://www.quanxiaoha.com/pycharm-pojie/pycharm-pojie-20241.html 1、安装Django # 安装Django pip install Django# 查看当前版本 python -m django --version 5.0.62、创建项…

HTML常用标签-表格标签

表格标签 1 常规表格2 单元格跨行3 单元格跨行 1 常规表格 table标签 代表表格 thead标签 代表表头 可以省略不写 tbody标签 代表表体 可以省略不写 tfoot标签 代表表尾 可以省略不写 tr标签 代表一行 td标签 代表行内的一格 th标签 自带加粗和居中效果的td 代码 <h…

探索数据结构:堆的具体实现与应用

✨✨ 欢迎大家来到贝蒂大讲堂✨✨ &#x1f388;&#x1f388;养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; 所属专栏&#xff1a;数据结构与算法 贝蒂的主页&#xff1a;Betty’s blog 1. 堆的概念 堆(Heap)是计算机科学中一类特殊的数据结构。堆通常是一个…

C++ QT设计模式 (第二版)

第3章 Qt简介 3.2 Qt核心模块 Qt是一个大库&#xff0c;由数个较小的库或者模块组成&#xff0c;最为常见的如下&#xff1a;core、gui、xml、sql、phonon、webkit&#xff0c;除了core和gui&#xff0c;这些模块都需要在qmake的工程文件中启用 QTextStream 流&#xff0c;Qdat…

在buildroot中自动给kernel打补丁

我的这个buildroot是管理在git上面的&#xff0c;所以这里我直接使用git format-patch 生成patch。 下面我详细列举一下步骤 1&#xff0c;将没有修改的kernel复制出来一份&#xff0c;进入kernel目录&#xff0c;执行git init&#xff0c;add所有文件并commit 2&#xff0c…

2024年高考倒计时精品网页

2024年高考倒计时精品网页 前言效果图部分代码领取源码下期更新预报 前言 随着季风轻轻掠过&#xff0c;岁月如梭&#xff0c;再次迎来了这个属于青春与梦想交汇的时刻——高考。这是一场知识的较量&#xff0c;更是一次意志的考验。在这最后的冲刺阶段&#xff0c;每一刻都显…

可视化 FlowChart 0.4.1 最强的拖拽组件

主要解决以及目标&#xff1a; ti-flowchart 能满足 二次开发的大部分需求。 下发GIF图可见&#xff0c;左边的模块A 由二次开发人员设计&#xff0c;通过向flowchart注册模块Dom&#xff0c;实现符合拖拽&#xff0c;编辑&#xff0c;布局&#xff0c;以及响应事件上抛。 实…

vaspkit 画 Charge-Density Difference

(echo 314;echo $(cat 1))|vaspkit 文件1提前写好使用的CHGCAR路径 SPIN_DW.vasp ../ML2scf/SPIN_DW.vasp ../ML1scf/SPIN_DW.vasp POSite and negative 默认为blue,and 青色 (RGB 30 245 245) 正值&#xff1a;blue 。负值&#xff1a;青色 RGB 30 245 245。 提示&…

(深度估计学习)Win11复现DepthFM

目录 1. 系统配置2. 拉取代码&#xff0c;配置环境3.开始深度预测4.运行结果 论文链接&#xff1a;https://depthfm.github.io/ 讲解链接&#xff1a;https://www.php.cn/faq/734404.html 1. 系统配置 本人系统&#xff1a;Win11 CUDA12.2 python3.11.5 这里附上几个CUDA安装链…

[Cesium]Cesium基础学习——Primitive

Cesium开发高级篇 | 01空间数据可视化之Primitive - 知乎 Primitive由两部分组成&#xff1a;几何体&#xff08;Geometry&#xff09;和外观&#xff08;Appearance&#xff09;。几何体定义了几何类型、位置和颜色&#xff0c;例如三角形、多边形、折线、点、标签等&#xff…

EM算法与变分推断

符号说明 x x x&#xff1a;已观测变量的集合 { x 1 , x 2 , x 3 , . . . , x N } \{x_1,x_2,x_3,...,x_N\} {x1​,x2​,x3​,...,xN​}&#xff0c;长度为 N N N z z z&#xff1a;隐变量&#xff08;未观测变量&#xff09; θ \theta θ&#xff1a;分布参数 ( x , z ) (x,…

pdffactory pro8.0虚拟打印机(附注册码)

PdfFactory pro是一款非常受欢迎的PDF虚拟打印机&#xff0c;可以帮助用户将你的其他文档保存为PDF格式。请为用户提供打印/发送/加密等多种实用功能&#xff0c;以及一套完善的PDF打印方案。 使用说明 下载pdfFactory Pro压缩包&#xff0c;解压后&#xff0c;双击exe文件&am…

LeetCode_LCR002做题总结(可变字符序列使用)

LCR 002. 二进制求和 方法一方法二遗落知识点字符串长度stringStringBuffer && StringBuilder 方法一 转换成十进制数&#xff0c;求和之后再转换成二进制数 class Solution {public String addBinary(String a, String b) {return Integer.toBinaryString(Integer.p…

算法提高之木棒

算法提高之木棒 核心思想&#xff1a;dfs 剪枝优化 1.搜索顺序优化&#xff1a;len从小到大遍历2**.剪枝(失败后)&#xff1a;** (1) 跳过所有和第i根木棍相同长度的木棍(2) 如果当前木棍是新木棒的第一根就失败了 则之后不会搜到方案 return false(3) 下一根失败但是上一根成…

java获取到泛型信息后,需要包装到另一个父类型中。比如读取类型R,包装成Res<R>

问题 对于json解析来说&#xff0c;我们一般是通过jackson的TypeReference或者XXX.class来制定类型&#xff08;其他json框架同理&#xff09;&#xff0c;比如下列代码&#xff1a; ResponseBody<XxxClass> body JsonUtils.parseObject(response, new TypeReference&…

vue + element-plus项目做管理系统常用的组件,以及一些方便开发的设置

1.简化路径 //vite.consfig.ts import { defineConfig, ConfigEnv } from vite import vue from vitejs/plugin-vue import path from path export default defineConfig(({ command }: ConfigEnv) > {return {plugins: [vue(),],resolve: {alias: {: path.resolve(__dirn…

EEL中 python端的函数名是如何传递给js端的

python端的函数名是如何传递给js端的 核心步骤&#xff1a;将函数名列表注入到动态生成的 eel.js 中&#xff0c;这样前端一开始引用的eel.js本身已经包含有py_function的函数名列表了。你打开开发者工具看看浏览器中的 eel.js文件源代码就知道了。 具体实现&#xff1a; # 读…