EventEmitter & custom events & sub/pub

https://repl.it/@xgqfrms/PPLabs-frontend-answers


// 5.实现一个 EventEmitter类,这个类包含以下方法:
// on(监听事件,该事件可以被触发多次)
// once(也是监听事件,但只能被触发一次)
// fire(触发指定的事件)
// off(移除指定事件的某个回调方法或者所有回调方法) class EventEmitter {
constructor() {
this.events = {};
}
on(name, callback) {
this.events[name] = {
callback,
once: false,
};
}
once(name, callback) {
this.events[name] = {
callback,
once: true,
};
}
off(name) {
let keys = Object.keys(this.events);
if (keys.includes(name)) {
delete this.events[name];
}
}
fire(name, person) {
// dispatchEvent
let keys = Object.keys(this.events);
if (keys.includes(name)) {
let fun = this.events[name].callback;
let once = this.events[name].once;
fun(person);
if (once) {
delete this.events[name];
}
}
}
} const event = new EventEmitter() event.on("drink", (person) => {
log(person + "喝水");
}); event.on("eat", (person) => {
log(person + "吃东西");
}); event.once("buy", (person) => {
log(person + "买东西");
}); event.fire("drink", "我");
// 我喝水
event.fire("drink", "我");
// 我喝水
event.fire("eat", "其它人");
// 其它人吃东西
event.fire("eat", "其它人");
// 其它人吃东西
event.fire("buy", "其它人");
//其它人买东西
event.fire("buy", "其它人");
//这里不会再次触发buy事件,因为once只能触发一次 event.off("eat") //移除eat事件
event.fire("eat", "其它人");
//这里不会触发eat事件,因为已经移除了

UMD , CMD, AMD

https://github.com/wangzianan/EventEmitter/blob/master/eventEmitter.js

;(function (name, definition) {
// 检测上下文环境是否为AMD或CMD
var hasDefine = typeof define === 'function',
// 检查上下文环境是否为Node
hasExports = typeof module !== 'undefined' && module.exports; if (hasDefine) {
// AMD环境或CMD环境
define(definition);
} else if (hasExports) {
// 定义为普通Node模块
module.exports = definition();
} else {
// 将模块的执行结果挂在window变量中,在浏览器中this指向window对象
this[name] = definition();
}
})('EventEmitter', function () {
function EventEmitter() {
this.__events = {}
} //订阅消息
EventEmitter.prototype.addListener = function(name, listener) {
if(!this.__events[name]){
this.__events[name]=[listener];
}else {
this.__events[name].push(listener);
}
} //取消订阅
EventEmitter.prototype.removeListener = function(name, listener) {
if(!this.__events[name]){
return;
}else{
let index=this.__events[name].indexOf(listener)
if(index>-1){
this.__events[name].splice(index,1);
}
}
} //派发消息
EventEmitter.prototype.emit = function(name, data) {
if(!this.__events[name]){
return;
}else {
this.__events[name].forEach(function(fn){
fn.call(null, data);
})
}
}
return EventEmitter;
});


xgqfrms 2012-2020

www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!


EventEmitter & custom events & sub/pub的更多相关文章

  1. [Backbone]7. Collection Views, Custom Events

    It's finally time to start building out our Appointment app. We're going to be using a collection an ...

  2. jQuery学习--Code Organization Concepts

    jQuery官方文档:  http://learn.jquery.com/code-organization/concepts/ Code Organization Concepts(代码组织概念) ...

  3. JavaScript Interview Questions: Event Delegation and This

    David Posin helps you land that next programming position by understanding important JavaScript fund ...

  4. node之events 模块,并通过实例化 EventEmitter 类来绑定和监听事件

    例子来源:http://www.runoob.com/nodejs/nodejs-event-loop.html http://www.runoob.com/nodejs/nodejs-event.h ...

  5. [Angular] Communicate with Angular Elements using Inputs and Events

    In a real world scenario we obviously need to be able to communicate with an Angular Element embedde ...

  6. Node.js 教程 05 - EventEmitter(事件监听/发射器 )

    目录: 前言 Node.js事件驱动介绍 Node.js事件 注册并发射自定义Node.js事件 EventEmitter介绍 EventEmitter常用的API error事件 继承EventEm ...

  7. 关于EventEmitter的用法

    EventEmitter的基本用法: var EventEmitter = require("events").EventEmitter; var ee = new EventEm ...

  8. nodejs events模块

    var EventEmitter = require('events').EventEmitter; var emitter = new EventEmitter(); console.log(emi ...

  9. no-jquery 04 Events

    Events Sending Native (DOM) Events anchorElement.click(); Sending Custom Events var event = document ...

随机推荐

  1. vscode 远程开发安装

    1 首先windows 有ssh  程序 2 没有的话就直接使用git  bash 登录到远程服务器开发机上 3 再开一个Git bash  执行 ssh-keygen.exe   生成秘钥    然 ...

  2. 【c++小知识】static用法浅析

    一.前言 C++的关键字static分两种用法,在面向过程程序设计(c语言中的普通变量和函数)中的使用和在面向对象程序设计(c++中的类)中的使用 二.面向过程程序设计中的static(静态变量.静态 ...

  3. Python基础(变量、字符编码、数据类型)

    变量 变量名由字母.数字(不能为首字符).下划线组成,不能使用关键字 以下关键字不能声明为变量名 ['and', 'as', 'assert', 'break', 'class', 'continue ...

  4. libuv事件循环中的三种句柄

    1.说明 本文会简单介绍 libuv 的事件循环,旨在入门级别的使用,而不做深入探究,简单来说就是,会大概用就行,先用熟练了,再去探究原理和源码 下图为官网的 libuv 的不同部分及其涉及的子系统的 ...

  5. 洛谷P4127

    Description 给出两个数 \(a\),\(b\) ,求出 \([a,b]\) 中各位数字之和能整除原数的数的个数 Solution 设 \(f[i][j][k][q]\) 表示 枚举到第 i ...

  6. Uniter 单一框架学习

    unittest单元测试框架不仅可以适用于单元测试,还可以适用WEB自动化测试用例的开发与执行,该测试框架可组织执行测试用例,并且提供了丰富的断言方法,判断测试用例是否通过,最终生成测试结果. 一.u ...

  7. MTO1804无刷电机引发的悲惨经历之二:电调固件刷新与优化

    前言 原创文章,转载引用请务必注明链接,水平有限,如有疏漏,欢迎指正. 书接上回,我们总算是基本确认了黑衣神秘电调的身份,本文就尝试对电调固件进行一番设置,来个免费优化. 1.刷新固件 关于电调的固件 ...

  8. 图文并茂-超详解 CS:APP: Lab3-Attack(附带栈帧分析)

    CS:APP:Lab3-ATTACK 0. 环境要求 关于环境已经在lab1里配置过了.lab1的连接如下 实验的下载地址如下 说明文档如下 http://csapp.cs.cmu.edu/3e/at ...

  9. Python3内置类型有哪些?

    摘要:Python3目前已经成为主流,和版本2天壤之别,关于Python3的内置类型你了解吗? 本文将专注于解释器支持的内置类型,基于版本3.9.1进行讲解. 内置的主要类型是numerics.seq ...

  10. 四十五:漏洞发现-API接口服务之漏洞探针类型利用修复

    接口服务类安全测试 根据前期信息收集针对目标端口服务类探针后进行的安全测试,主要涉及攻击方法:口令安全,WEB类漏洞,版本漏洞等,其中产生的危害可大可小,属于端口服务/第三方服务类安全测试.一般在已知 ...