浏览器端是否有任何在nodejs中具有类似逻辑的EventEmitter？答案

【问题标题】：Is there any EventEmitter in browser side that has similar logic in nodejs?浏览器端是否有任何在nodejs中具有类似逻辑的EventEmitter？
【发布时间】：2018-01-31 13:59:14
【问题描述】：

在 node.js 中使用 eventEmitter 就是这么简单：

var e = new EventEmitter();
e.on('happy', function(){console.log('good')});
e.emit('happy');

浏览器原生中的任何客户端 EventEmitter？

【问题讨论】：

developer.mozilla.org/en-US/docs/Web/Guide/Events/…
@NaeemShaikh 你就是那个男人。你会填写答案吗？我会关闭这个。谢谢，伙计

标签： javascript browser

【解决方案1】：

你需要一个 JavaScript 库，比如https://github.com/Olical/EventEmitter？

【讨论】：

不完全是，我想要一些原生的，而不是第三方库。谢谢。

【解决方案2】：

在现代浏览器中，有 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();

其他资源：

Maga Zandaqo 在这里有一个出色的详细指南：https://medium.com/@zandaqo/eventtarget-the-future-of-javascript-event-systems-205ae32f5e6b
MDN 有一些文档：https://developer.mozilla.org/en-US/docs/Web/API/EventTarget
适用于 Safari 和其他无法使用的浏览器的 Polyfill：https://github.com/ungap/event-target

【讨论】：

【解决方案3】：

在客户端创建自定义事件，并附加到 dom 元素：

var event = new Event('build');

// Listen for the event.
elem.addEventListener('build', function (e) { /* ... */ }, false);

// Dispatch the event.
elem.dispatchEvent(event);

来自：https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events 谢谢 Naeem Shaikh

【讨论】：

这仅适用于 HTML 元素，问题是如何使它像在 Node 中那样在对象上工作。

【解决方案4】：

对于给定的情况，这已经足够了。

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))
        }
    }
}

更新：我刚刚发布了它的一些更进化的版本。这很简单，但可能就足够了： https://www.npmjs.com/package/alpeventemitter

【讨论】：

打字稿：callbacks: { [s: string]: ((...args: any[]) => any)[] }
当一个事件处理程序发出另一个事件时，这将导致无序的事件处理。您可能希望在它返回后调用回调，使用 setTimeout。或者将事件放入队列中。

【解决方案5】：

我最终使用了这个：

export let createEventEmitter = () => {
   let callbackList: (() => any)[] = []

   return {
      on(callback: () => any) {
         callbackList.push(callback)
      },
      emit() {
         callbackList.forEach((callback) => {
            callback()
         })
      },
   }
}

【讨论】：

【解决方案6】：

有一个名为“events”的 NPM 包，它使您能够在浏览器环境中制作事件发射器。

var EventEmitter = require('events')
 
var e = new EventEmitter()
e.on('message', function (text) {
  console.log(text)
})
e.emit('message', 'hello world')

在你的情况下，它是

var EventEmitter = require('events')

var e = new EventEmitter();
e.on('happy', function(){console.log('good')});
e.emit('happy');

【讨论】：

OP 正在寻找在不需要 npm 包的浏览器上进行本机实现的工作。