无法理解使用 webpack 和 es6 模块的 EventEmitter 发生了什么

Question

我正在尝试同时学习 webpack 和 es6，并意识到需要某种事件总线。我是 EventEmitters 和构造函数的新手。我已经阅读了文档以及一堆示例，但老实说，我不明白为什么下面的代码会表现得如此。发射器只有一个实例，那么为什么计数器或 removeListener 找不到任何东西呢？如果我将所有代码都放在一个文件中，它可以正常工作。

entry.js

import dVpEe from '../modules/eventEmitter';
const temp = new dVpEe();


var abc = function abc() {
    console.log('funciton a');
};

var b = function() {
    console.log('funciton b');
};

temp.evesdroppers('connection');
temp.hear('connection', abc);
temp.evesdroppers('connection');
temp.say('connection');
temp.hear('connection', b);
temp.evesdroppers('connection');
temp.say('connection');
temp.walk('connection', abc);
temp.say('connection');

eventEmitter.js

import events from 'events';
import util from 'util';

var EventEmitter = events.EventEmitter;

var dVpEe = function() {
    EventEmitter.call(this);
};

util.inherits(dVpEe, EventEmitter);

dVpEe.prototype.walk = function(event, cb, name) {
    console.log('%c' + (name || 'creeper') + '%c NOT listening for %c' + event, 'color: pink', 'color: white', 'color: pink');
    this.removeListener(event, cb);
};

dVpEe.prototype.say = function(event, name) {
    console.log('%c' + (name || 'someone') + '%c screamed %c' + event, 'color: pink', 'color: white', 'color: pink');
    this.emit(name);
};

dVpEe.prototype.evesdroppers = function(event) {
    var eventListeners = events.EventEmitter.listenerCount(this, event);
    console.log('%c' + eventListeners + '%c listner(s) for %c' + event, 'color: pink', 'color: white', 'color: pink');
};

dVpEe.prototype.hear = function(event, cb, name) {
    console.log('%c' + (name || 'creeper') + '%c listening for %c' + event, 'color: pink', 'color: white', 'color: pink');
    this.addListener(name, cb);
};

export default dVpEe;

输出

0 listner(s) for connection
creeper listening for connection
0 listner(s) for connection
someone screamed connection
function a
creeper listening for connection
0 listner(s) for connection
someone screamed connection
function a
funciton b
creeper NOT listening for connection
someone screamed connection
funciton a
funciton b

Answer 1

这只是dVpEe.prototype.hear中的一个错字。

dVpEe.prototype.hear = function(event, cb, name) {
    console.log((name || 'creeper') + ' listening for "' + event + "'");
    this.addListener(name, cb); // ouch!
};

我还建议将deprecated EventEmitter.listenerCount 替换为emitter.listenerCount：

dVpEe.prototype.evesdroppers = function(event) {
    var eventListeners = this.listenerCount(event);
};

由于您使用的是 ES6，我建议利用 class 语法，它更具可读性：

import { EventEmitter } from 'events';

export default class extends EventEmitter {
  walk(event, cb, name) {
      console.log((name || 'creeper') + ' NOT listening for "' + event + "'");
      this.removeListener(event, cb);
  }

  // and so on
};