EventEmitter & custom events & sub/pub
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的更多相关文章
- [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 ...
- jQuery学习--Code Organization Concepts
jQuery官方文档: http://learn.jquery.com/code-organization/concepts/ Code Organization Concepts(代码组织概念) ...
- JavaScript Interview Questions: Event Delegation and This
David Posin helps you land that next programming position by understanding important JavaScript fund ...
- node之events 模块,并通过实例化 EventEmitter 类来绑定和监听事件
例子来源:http://www.runoob.com/nodejs/nodejs-event-loop.html http://www.runoob.com/nodejs/nodejs-event.h ...
- [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 ...
- Node.js 教程 05 - EventEmitter(事件监听/发射器 )
目录: 前言 Node.js事件驱动介绍 Node.js事件 注册并发射自定义Node.js事件 EventEmitter介绍 EventEmitter常用的API error事件 继承EventEm ...
- 关于EventEmitter的用法
EventEmitter的基本用法: var EventEmitter = require("events").EventEmitter; var ee = new EventEm ...
- nodejs events模块
var EventEmitter = require('events').EventEmitter; var emitter = new EventEmitter(); console.log(emi ...
- no-jquery 04 Events
Events Sending Native (DOM) Events anchorElement.click(); Sending Custom Events var event = document ...
随机推荐
- 使用jiffies的时间比较函数time_after、time_before
1. jiffies简介 首先,操作系统有个系统专用定时器(system timer),俗称滴答定时器,或者系统心跳. 全局变量jiffies取值为自操作系统启动以来的时钟滴答的数目,在头文件< ...
- 向指定url发送Get/Post请求
向指定url发送Get/Post请求 1.向指定url发送Get/Post请求 2.HttpUtil 工具类–向指定url发送Get/Post请求 1.向指定url发送Get/Post请求 impor ...
- linux shell判断文件,目录是否存在或者具有权限
在linux中判断文件,目录是否存在或则具有的权限,根据最近的学习以及网上的资料,进行了以下的总结: #!/bin/sh myPath="/var/log/httpd/" myFi ...
- SSH 登录警告:WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED!
1.使用Linux SSH登录其他Linux或者cisco交换机时有如下报错 WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED! (远程主机标识已更改) ...
- 服务器CPU又爆了?Linux快速排查Java程序占用CPU很高的方法
这个问题可以说是 Java 面试的高频面试题了,有很多面试官都喜欢问这个问题,问题可能是下面这样的. 线上一台服务器 CPU 使用率100% 了,如果你碰到这样的情况,如何排查并找到问题原因? 1.场 ...
- for循环实现的一些小例子
1.1-10阶乘和 package HELLO; public class exercise5 { /** 1-10阶乘和 */ public static void main(String[] ar ...
- 【LA 3487】Duopoly(图论--网络流最小割 经典题)
题意:C公司有一些资源,每种只有1个,有A.B两个公司分别对其中一些资源进行分组竞标,每组竞标对一些资源出一个总价.问C公司的最大收益. 解法:最小割.将A公司的竞标与源点相连,B公司的与汇点相连,边 ...
- 【uva 11134】Fabled Rooks(算法效率--问题分解+贪心)
题意:要求在一个N*N的棋盘上放N个车,使得它们所在的行和列均不同,而且分别处于第 i 个矩形中. 解法:问题分解+贪心. 由于行.列不相关,所以可以先把行和列均不同的问题分解为2个"在区间 ...
- 【2020杭电多校】 Lead of Wisdom、The Oculus
题目链接:Lead of Wisdom 题意:有n个物品,这些物品有k种类型.每种物品有对应的类型ti,其他值ai,bi,ci,di 你可以选择一些物品,但是这些物品要保证它们任意两者之间类型不能相同 ...
- hdu2546 饭卡
Problem Description 电子科大本部食堂的饭卡有一种很诡异的设计,即在购买之前判断余额.如果购买一个商品之前,卡上的剩余金额大于或等于5元,就一定可以购买成功(即使购买后卡上余额为负) ...