R
E
A
C
T
O
xamples
epeat
ode
pproach
ptimize
est
{Event-Emitter}
The Question
Your REACTO question today is to implement a familiar Javascript concept:
the EventEmitter. It works like this:
You can create an EventEmitter:
var myEventEmitter = new EventEmitter();
And you can register listeners to different event strings with an on method:
myEventEmitter.on('anImportantEvent', function (eventDetails) {
console.log('Something important just happened!', eventDetails);
});
These listeners get called when the created event emitter emits the event with related data:
myEventEmitter.emit('anImportantEvent', { location: 'Fullstack' });
You can also unregister a listener using a removeListener method:
var fn = function () {
console.log('Cool, my event happened!');
};
// Listener is attached.
myEventEmitter.on('prestoBango', fn);
// Listener is no longer attached and has moved on with its life.
myEventEmitter.removeListener('prestoBango', fn);
Overview of full functionality
var superbowl = new EventEmitter();
var cheer = function (data) {
console.log('RAAAAAHHHH!!!! Go ' + data.scoringTeam);
};
var jeer = function (data) {
console.log('BOOOOOO ' + data.scoringTeam);
};
superbowl.on('touchdown', cheer);
superbowl.on('touchdown', jeer);
superbowl.emit('touchdown', { scoringTeam: 'Patriots' });
// Both cheer and jeer are called with data.
superbowl.removeListener('touchdown', jeer);
superbowl.emit('touchdown', { scoringTeam: 'Seahawks' });
// Only cheer is called.
Answer
var EmmieEmitter = function () {
this.events = {};
};
EmmieEmitter.prototype.emmieOn = function (eventStr, fn) {
if (!this.events[eventStr]) {
this.events[eventStr] = [];
}
this.events[eventStr].push(fn);
};
EmmieEmitter.prototype.emmieEmit = function (eventStr, eventData) {
if (!this.events[eventStr]) {
return;
}
this.events[eventStr].forEach(function (fn) {
fn(eventData);
});
};
EmmieEmitter.prototype.emmieRemoveListener = function (eventStr, fn) {
var eventFns = this.events[eventStr];
if (!eventFns) return;
var i = eventFns.indexOf(fn);
if (i === -1) return;
eventFns.splice(i, 1);
};
1. Creating the constructor function
var EmmieEmitter = function () {
this.events = {};
};
2. adding listeners
EmmieEmitter.prototype.emmieOn = function (eventStr, fn) {
if (!this.events[eventStr]) {
this.events[eventStr] = [];
}
this.events[eventStr].push(fn);
};
3. Emitting
EmmieEmitter.prototype.emmieEmit = function (eventStr, eventData) {
if (!this.events[eventStr]) {
return;
}
this.events[eventStr].forEach(function (fn) {
fn(eventData);
});
};
4. Remove Listeners
EmmieEmitter.prototype.emmieRemoveListener = function (eventStr, fn) {
var eventFns = this.events[eventStr];
if (!eventFns) return;
var i = eventFns.indexOf(fn);
if (i === -1) return;
eventFns.splice(i, 1);
};
Conclusion
EMIT ALLLLL THE EVENTSSSS
Event-Emitter
By es1831
Event-Emitter
- 2,108