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

debugcn 发表于 Dev

杰夫

我试图同时学习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

罗曼·帕拉迪耶夫

这只是的错字dVpEe.prototype.hear。

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

我还建议将不推荐使用的内容替换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
};

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。