Gibt es einen EventEmitter auf der Browserseite, der eine ähnliche Logik in nodejs hat?

Lesezeit: 3 Minuten

Benutzeravatar von Xin
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?

Brads Benutzeravatar
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:

Benutzeravatar von Amir Gorji
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


Benutzeravatar von Alparslan
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


Benutzeravatar von Xin
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()
         })
      },
   }
}

Benutzeravatar von Nir
Nein

Update 2022: Der BroadcatsChannel bietet möglicherweise eine Lösung.

https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API

Benutzeravatar von John Haugeland
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

1430700cookie-checkGibt es einen EventEmitter auf der Browserseite, der eine ähnliche Logik in nodejs hat?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy