Question

我编写了许多小型库和模块，通常这些库和模块都有一些与之关联的事件。到目前为止，我一直在写这些（缩短了很多）：

Library.prototype.on = function(event, callback){
  self = this;
  self.events[event] = callback;
}

然后用户可以执行以下操作：

Library.on('foo',function(){
  console.log('bar');
});

是否有更好的更高效的方法来实现这一点，或者这是实现这一目标的标准方法吗？我想要一个简单的API，我可以放入任何JS项目来支持这种行为。

Answer 1

var EventEmitter = {
    constructor: function _constructor() {
        this._events = [];
        return this;
    },
    on: function _on(ev, handler) {
        if (!this._events[ev]) {
            this._events[ev] = [];
        }
        this._events[ev].push(handler);
    },
    removeListener: function _removeListener(ev, handler) {
        if (!this._events[ev]) return;
        this._events[ev].splice(this._events[ev].indexOf(handler), 1);
    },
    removeAll: function _removeAll(ev) {
        delete this._events[ev];
    },
    emit: function _emit(ev, data) {
        if (!this._events[ev]) return;
        this._events[ev].forEach(invokeHandler);

        function invokeHandler(handler) {
            handler(data);
        }
    }
};

当我需要快速和脏的自定义事件时，我使用了一个小EventEmitter。

我和你的实现之间的唯一区别是我的每个事件允许多次回调。

对于任何严重的事情我使用像EventEmitter2

这样的事件库

Answer 2

您正在寻找JavaScript的Observer Pattern。

Spine和Backbone为观察者提供了一些不错的实现。

但是一个新的好模式是在CommonJS

中记录的Promises模式

jQuery 1.7已经实施并且正在深深地使用承诺模式。

Promise模式中我最喜欢的实现是来自@kriskowal的Q

我希望，这些资源可以帮助您完成任务。

编写自定义.on（）/。bind（）JavaScript的最佳方式

2 个答案: