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. codevs 1344 模拟退火

    1344 线型网络  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamo   题目描述 Description 有 N ( <=20 ) 台 PC 放在机房内 ...

  2. k8s之集群管理

    导读 经过前面k8s系列的文章,这一系列已经基本完成,现在就用几篇文章说一下日常的集群维护. 目录 更新资源对象的Label Namespace:集群环境共享与隔离 部署集群监控 部署Web UI管理 ...

  3. Java,Scala:JDBCUtil,MySqlUtil,PhoenixJDBC

    Java,Scala:JDBCUtil,MySqlUtil,PhoenixJDBC pom.xml添加依赖 Java:方式一(亲测实用) 方式二:Scala 方式三:Java PhoenixJDBCU ...

  4. AJAX传值中文乱码

    AJAX传值时采用的是UTF-8编码格式,客户端中文字符传输到服务器端时,如果服务器编码格式或者所采用的MVC框架的编码格式不是UTF-8,则很可能会出现中文乱码.解决办法如下: 客户端用js函数en ...

  5. 【实战】通过Python实现疫情地图可视化

    目录 一. json模块 二.通过Python实现疫情地图可视化 2.将json格式的数据保存到Excel 3.应用pyecharts进行数据可视化 一. json模块 JSON(JavaScript ...

  6. P1714 切蛋糕 dp+单调队列

    题意: 题目描述 在幻想乡,琪露诺是以笨蛋闻名的冰之妖精. 某一天,琪露诺又在玩速冻青蛙,就是用冰把青蛙瞬间冻起来.但是这只青蛙比以往的要聪明许多,在琪露诺来之前就已经跑到了河的对岸.于是琪露诺决定到 ...

  7. poj3693 Maximum repetition substring (后缀数组+rmq)

    Description The repetition number of a string is defined as the maximum number R such that the strin ...

  8. Strategic game POJ - 1463 dfs

    题意+题解: 1 //5 2 //1 1 3 //2 1 4 //3 1 5 //1 1 6 //给你5个点,从下面第二行到第五行(称为i行),每一行两个数x,y.表示i和x之间有一条边.这一条边的长 ...

  9. poj2362 Square

    Description Given a set of sticks of various lengths, is it possible to join them end-to-end to form ...

  10. 活动精彩实录 | 阿里云刘军民(米诺):Cassandra中文社区年度回顾

    点击这里观看完整视频 大家好,我是刘军民,我是阿里云数据库的产品经理,目前负责云数据库的产品规划以及相关工作.曾在2019年和多位小伙伴一起发起了中文社区,我希望有更多的小伙伴能加入到社区建设中,这样 ...