原文地址：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]);
}
}
};
测试代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>EventEmitter Test</title>
<script src="./EventEmitter.js"></script>
<script>
var zObj = function () {
this._props = {};
this._emitter = new EventEmitter();
};
zObj.prototype.set = function (key, value) {
var old = this._props[key];
if (old !== value) {
this._props[key] = value;
this.emitChange(key, value, old);
}
};
zObj.prototype.get = function (key) {
return this._props[key];
};
zObj.prototype.onChange = function (handler, context) {
this._emitter.on("change", handler, context);
};
zObj.prototype.offChange = function (handler, context) {
this._emitter.off("change", handler, context);
};
zObj.prototype.emitChange = function (p, nv, ov) {
this._emitter.emit("change", {
source: this,
property: p,
newValue: nv,
oldValue: ov
});
};
var obj = new zObj();
obj.onChange(function (evt) {
console.log(evt)
});
obj.set("id", 1);
obj.set("id", 2);
</script>
</head>
<body>
</body>
</html>
函数
主要有以下三个功能函数：
- on :添加事件监听器
- off：移除事件监听器
- emit：派发事件