Es ist so einfach, eventEmitter in node.js zu verwenden:
var e = new EventEmitter();
e.on('happy', function(){console.log('good')});
e.emit('happy');
Irgendein clientseitiger EventEmitter im Browser nativ?
Xin
Es ist so einfach, eventEmitter in node.js zu verwenden:
var e = new EventEmitter();
e.on('happy', function(){console.log('good')});
e.emit('happy');
Irgendein clientseitiger EventEmitter im Browser nativ?
Brad
In modernen Browsern gibt es EventTarget.
class MyClass extends EventTarget {
doSomething() {
this.dispatchEvent(new Event('something'));
}
}
const instance = new MyClass();
instance.addEventListener('something', (e) => {
console.log('Instance fired "something".', e);
});
instance.doSomething();
Zusätzliche Ressourcen:
Maga Zandaqo hat hier eine ausgezeichnete detaillierte Anleitung: https://medium.com/@zandaqo/eventtarget-the-future-of-javascript-event-systems-205ae32f5e6b
MDN hat einige Dokumentation: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget
Polyfill für Safari und andere nicht fähige Browser: https://github.com/ungap/event-target
Amir Gorji
Es gibt ein NPM-Paket namens „events“, mit dem Sie Ereignisemitter in einer Browserumgebung erstellen können.
const EventEmitter = require('events')
const e = new EventEmitter()
e.on('message', function (text) {
console.log(text)
})
e.emit('message', 'hello world')
in Ihrem Fall ist es
const EventEmitter = require('events')
const e = new EventEmitter();
e.on('happy', function() {
console.log('good');
});
e.emit('happy');
OP sucht nach einer Arbeit an einer nativen Implementierung in einem Browser, der kein npm-Paket benötigt.
– Iwan
9. Oktober 2020 um 7:42 Uhr
@Ivan SO Antworten sind nicht nur für das OP. 😉 Das ist die Antwort, nach der ich gesucht habe, und wenn ich mir die Stimmen ansehe, andere Leute auch. Ich möchte, dass derselbe Code in beiden Umgebungen funktioniert.
– Inigo
10. April um 3:34
Alparlan
Das reicht für den gegebenen Fall.
class EventEmitter{
constructor(){
this.callbacks = {}
}
on(event, cb){
if(!this.callbacks[event]) this.callbacks[event] = [];
this.callbacks[event].push(cb)
}
emit(event, data){
let cbs = this.callbacks[event]
if(cbs){
cbs.forEach(cb => cb(data))
}
}
}
Update: Ich habe gerade eine etwas weiterentwickelte Version davon veröffentlicht. Es ist sehr einfach, aber wahrscheinlich genug:
https://www.npmjs.com/package/alpeventemitter
Typoskript: callbacks: { [s: string]: ((...args: any[]) => any)[] }
– Mathieu CAROFF
4. Januar 2020 um 11:43 Uhr
Dies führt zu einer ungeordneten Ereignisbehandlung, wenn ein Ereignishandler ein anderes Ereignis ausgibt. Wahrscheinlich möchten Sie die Callbacks in emit nach der Rückgabe mit setTimeout aufrufen. Oder stellen Sie die Ereignisse in eine Warteschlange.
– Vinicius Fortuna
28. Juli 2021 um 16:39 Uhr
Xin
Erstellen Sie ein benutzerdefiniertes Ereignis im Client und hängen Sie es an das Dom-Element an:
var event = new Event('my-event');
// Listen for the event.
elem.addEventListener('my-event', function (e) { /* ... */ }, false);
// Dispatch the event.
elem.dispatchEvent(event);
Dies wird verwiesen von: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events
Danke Naeem Shaikh
Am Ende habe ich das verwendet:
export let createEventEmitter = () => {
let callbackList: (() => any)[] = []
return {
on(callback: () => any) {
callbackList.push(callback)
},
emit() {
callbackList.forEach((callback) => {
callback()
})
},
}
}
Nein
Update 2022: Der BroadcatsChannel bietet möglicherweise eine Lösung.
https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API
John Haugeland
Node hat in Node 15 (Oktober 2020) ein natives EventTarget erhalten; diese Frage gilt nicht mehr
https://nodejs.org/api/events.html#eventtarget-and-event-api
developer.mozilla.org/en-US/docs/Web/Guide/Events/…
– Naeem Shaikh
23. August 2017 um 6:19 Uhr
@NaeemShaikh Du bist der Mann. Gibst du die Antwort ein? Ich werde das schließen. Danke, Kumpel
– Xin
23. August 2017 um 6:56 Uhr