node --- 模拟事件的异步

事件

  • 在前端浏览器最常见的就是页面交互事件
  • 本质是发布/订阅设计模式

目标

  • 对象使用add方法订阅事件。
  • 使用emit发布消息

订阅事件

  • 添加触发事件的一个唯一字符串,以及对应的处理函数
  • 先初始化事件对象
class Event {constructor(){this.events = {};}
}
  • 订阅
  • 在订阅事件的时候,需要先判断事件是否存在.
  • 若不存在,则直接加入到队列(数组)
  • 若存在,则放到队尾(push进入)
class Event {constructor(){...},add(name, cb) {if (this.map[name]) {this.map[name].push(fn);return;}this.map[name] = [fn];return;}
}

发布事件

  • 当使用emit方法是,传入的第一个参数是事件的名称.
  • emit方法会根据传入的名称,找到对应的事件处理组.
  • 利用事件处理组对后面的参数进行依次调用
class Event {constructor(){ ... }emit(name, ...args) {this.map[name].forEach( cb => {cb(...args);})}
}

调用

const e = new Event();
e.add('sayHello', (err, name) =>{if(err) {console.error(err);return}console.log(`hello ${name}`);return
})
e.emit('sayHello','发生了错误');
e.emit('sayHello', null, 'marron');

在这里插入图片描述


链式调用的实现

  • 想使用如下的方式进行调用
const e = new Event();
e
.add('sayHello', (err, name) =>{if(err) {console.error(err);return;}console.log(`hello ${name}`);
})
.emit('sayHello', '发生了错误')
.emit('sayHello', null, 'mar~!');
  • 只需保证调用add后的执行还是当前的实例(e)即可
  • 在类Event的内部,this指向的是当前的实例,因此只需在add方法中返回this即可实现
  • 改写Event,注意return 语句
class Event {constructor() {this.events = {};}add(name, cb) {if (this.events[name]) {this.events[name].push(cb);return this; // 返回当前实例}this.events[name] = [cb];return this;}emit(name, ...args) {if (this.events[name]) {this.events[name].forEach(cb => {cb(...args);})return this;} else {console.error('[Event Error]: 该事件未注册')}}
}

在这里插入图片描述

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

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

相关文章

浅谈PHP面向对象编程(九)

9.0 设计模式 在编写程序时经常会遇到一此典型的问题或需要完成某种特定需求,设计模式就是针对这些问题和需求,在大量的实践中总结和理论化之后优选的代码结构编程风格,以及解决问题的思考方式。 设计模式就像是经典的棋谱。不同的棋局&#…

javascript --- Object.create的阅读

说明 今天阅读koa源码时,遇到Object.create,感觉对这个概念有点生疏,于是打开了MDN进行重新梳理传送门 Object.create() 直接套用官网的栗子 const person {isHuman: false,printIntroduction: function () {console.log(My name is ${this.name}. Am I human? ${this.i…

Annotation 注解

Annotation分为两种,第一种为系统内置注解,第二种为自定义注解。系统内置注解:例如Override,Dprecated自定义注解:定义格式为 【public】 interface Annotation名称{数据类型 变量名称();}其中数据类型和变量自定义,不…

node --- [node接口阅读]cluster的使用

目标 在主进程中完成以下事情: 每隔1秒钟输出,当前请求的数量创建等同于CPU数量的进程对每个进程施加一个处理函数,用于统计请求的数量 在各个CPU的进程中完成以下事情 监听8000端口的请求,并返回最简单的信息发送事件,以触发主进程中施加的事件处理函数 前置知识 process…

docker --- 梳理 Dockerfile docker-compose.yml

docker run -p 80:80 -v $PWD/www:/usr/share/nginx/html nginx 参数说明: 1.docker run nginx: 感觉镜像(images)生成本地的容器 2.-p 80:80: 容器的80端口和本地的80端口的映射 3.-v:将本地的,当前文件夹下的www文件夹映射容器路径为/usr/share/nginx/html的文件夹下 [注:]…

python接口测试框架实战与自动化进阶(三)

python接口测试框架实战与自动化进阶 一、持续集成 1、持续集成环境搭建 1)安装Jenkins 官网下载后直接安装:https://jenkins.io/ 终端直接安装及启动:java -jar jenkins.war 2)Jenkins用于: 持续、自动地构建/测试软件…

配置 --- 将本地项目部署到阿里云上

说明: 项目代码学习地址项目前端使用了nginx代理后端使用express框架使用PM2部署后端使用mongoDB进行持久化nginx、express、PM2、mongoDB等,部署在docker中.项目使用 .sh 文件进行一键式启动 本地启动项目 1.先从github上拉取代码 git clone https://github.com/Lizhhhh/L-n…

layui --- [结构优化]参数优化

待优化的代码如下 以上代码,在至少10个页面中重复应用.如果要修改某个功能,就得在至少10个页面中修改.给后期维护带来了极大的不便.关键是这些信息都是在编程中不需要看见的.放在开始每次都要滑过它,太浪费时间了. [注意代码行数,后期会用到] 参数分类 声明类: 对layui模块引…

mysql带条件查询,联表查询

---恢复内容开始--- 1,用于设定所select出来的数据是否允许出现重复行(完全相同的数据行) all:允许出现——默认不写就是All(允许的)。 distinct:不允许出现——就是所谓的“消除重复行” 2,whe…

day11-元组与字典

1、元组Tuple与列表类似,不同之处在于元组的元素不能修改。 元组使用小括号,列表使用中括号。元组可以查询,可以使用内置函数count、index。但是不能修改、增加、删除(儿子不能,孙子有可能)。name (a,a,b)…

vue问题四:富文本编辑器上传图片

vue使用富文本编辑器上传图片&#xff1a; 我是用的是wangEditor 富文本编辑器 demo:http://www.wangeditor.com/ 1).安装依赖:npm install wangeditor 2).我自己是创建了一个组件这样再用到的时候可以直接调用&#xff08;可能有更简单的方法&#xff09; <template lang&q…

vscode --- 快捷键格式化代码时,分号消失

问题复现 最近在vscode中,格式化代码(快捷键 alt shift F)时,分号会莫名奇妙的消失 对于习惯打分号的我来说,看起来很别扭… 解决方案. 我使用的是prettier这个插件来设置格式化的.安装方法如下: 点击左侧的: 搜索 prettier, 选择 Prettier - Code formatter 安装好了之后…

算法 --- [队列结构]二叉树的层次遍历

思路 使用队列: 初始化的时候,将root, push进队列q中循环队列q,当其中不为空时,取出第一个元素(q.shift),记为r若r.left不为空,将r.left推进q,若r.right不为空,将r.right推进q 记录层次: 4. 初始化设置i 0; 5. 在入队的时候,入队一个对象{r: root, i} 6. 出队时,使用es6的解…

Redis在windows下安装过程(转载)

转载自&#xff08;http://www.cnblogs.com/M-LittleBird/p/5902850.html&#xff09; 一、下载windows版本的Redis 官网以及没有下载地址&#xff0c;只能在github上下载&#xff0c;官网只提供linux版本的下载 官网下载地址&#xff1a;http://redis.io/download github下载地…

C# Socket网络编程精华篇

我们在讲解Socket编程前&#xff0c;先看几个和Socket编程紧密相关的概念&#xff1a; TCP/IP层次模型当然这里我们只讨论重要的四层 01&#xff0c;应用层(Application)&#xff1a;应用层是个很广泛的概念&#xff0c;有一些基本相同的系统级TCP/IP应用以及应用协议&#xff…

javascript --- [虚拟DOM] 初始化 实现

说明 本篇主要说明为什么要使用虚拟DOM技术,以及如何实现简单的虚拟dom您将会学到: 1.原生JS对DOM的操作 2.虚拟DOM的相关概念 3.DIFF算法的基础概念 为什么提出 -> DOM操作慢 我们使用createElement属性来创建一个最常见的div,看看一个最常见的DOM有多少个属性 <scri…

模块单元学习笔记(日志记录模块os模块sys)

一、日志记录模块 Logging 默认情况下&#xff0c;logging将日志打印到屏幕&#xff0c;日志级别大小关系为&#xff1a;CRITICAL > ERROR > WARNING > INFO > DEBUG > NOTSET&#xff0c;当然也可以自己定义日志级别。 DEBUG&#xff1a;详细的信息,通常只出现…

tomcat8 进入不了Manager App 界面 403 Access Denied

准备 1.注释掉context.xml中的value属性 使用下面的命令&#xff1a; vim /usr/local/tomcats/tomcat-daily/webapps/manager/META-INF/context.xml 注释掉其中value节点 2.修改tomcat-users.xml文件 加入下面的配置 <role rolename"manager-gui" /><role …

MySQL中varchar最大长度是多少

一. varchar存储规则&#xff1a; 4.0版本以下&#xff0c;varchar(20)&#xff0c;指的是20字节&#xff0c;如果存放UTF8汉字时&#xff0c;只能存6个&#xff08;每个汉字3字节&#xff09; 5.0版本以上&#xff0c;varchar(20)&#xff0c;指的是20字符&#xff0c;无论存放…

salesforce lightning零基础学习(三) 表达式的!(绑定表达式)与 #(非绑定表达式)

在salesforce的classic中&#xff0c;我们使用{!expresion}在前台页面展示信息&#xff0c;在lightning中&#xff0c;上一篇我们也提及了&#xff0c;如果展示attribute的值&#xff0c;可以使用{!v.expresion}展示信息。 lightning在component中解析动态值的时候&#xff0c;…