原文地址:http://zhangyiheng.com/blog/articles/js_event_mitter.html
需求
随着Browser客户端JS越来越复杂,MVC(Client端)设计模式成为一个很好的开发选择, 而MVC开发模式中,最基础的功能就是把Model和View关联起来, 当Model发生变化的时候,View呈现做出相应的调整。
实现此功能最合适的方式莫过于事件Event了, 对于Event大家应该都很熟悉,比如dom中的button,可以通过addEventListener/attachEvent添加click事件处理。
而一般的object对象是没有事件派发功能的,基于此需求,实现了一个EventEmitter。
/** * Created by taozh on 2017/6/22. * taozh1982@gmail.com */ var EventEmitter = function () { this.__z_e_listeners = {}; }; EventEmitter.prototype.on = function (evt, handler, context) { var handlers = this.__z_e_listeners[evt]; if (handlers === undefined) { handlers = []; this.__z_e_listeners[evt] = handlers; } var item = { handler: handler, context: context }; handlers.push(item); return item; }; EventEmitter.prototype.off = function (evt, handler, context) { var handlers = this.__z_e_listeners[evt]; if (handlers !== undefined) { var size = handlers.length; for (var i = 0; i < size; i++) { var item = handlers[i]; if (item.handler === handler && item.context === context) { handlers.splice(i, 1); return; } } } }; EventEmitter.prototype.emit = function (type, event) { var hanlders = this.__z_e_listeners[type]; if (hanlders !== undefined) { var size = hanlders.length; for (var i = 0; i < size; i++) { var ef = hanlders[i]; var handler = ef.handler; var context = ef.context; handler.apply(context, [event]); } } };