观察者模式和js自定义事件

事件是一种叫做观察者的设计模式,观察者模式由两类对象组成：主体和观察者。主体负责发布事件，同时观察者通过订阅这些事件来观察该主体。拿DOM来说，DOM就是主体，事件处理代码便是观察者。

下面是一个自定义事件，

function EventTarget() {
    this.handlers = {};
}
EventTarget.prototype = {
	constructor: EventTarget,
	addHandler: function (type, handler) {
		if (typeof this.handlers[type] == 'undefined') {
			this.handlers[type] = [];
		}
		this.handlers[type].push(handler);
	},
	fire: function (event) {
		if (!event.target) {
			event.target = this;
		}
		if (this.handlers[event.type] instanceof Array) {
			var handlers = this.handlers[event.type];
			for (var i = 0, len = handlers.length; i < len; i++) {
				handlers[i](event);
			}
		}
	},
	removeHandler: function (type, handler) {
		if (this.handlers[type] instanceof Array) {
			var handlers = this.handlers[type];
			for (var i = 0, len = handlers.length; i < len; i++) {
				if (handlers[i] === handler) {
					break;
				}
			}
			handlers.splice(i, 1);
		}
	}
}

自定义事件的调用,addHandler() 添加事件,fire() 执行事件,removeHandler() 删除绑定的事件。

function handleMessage1(event) {
	console.log("111--", event.message);
}
function handleMessage2(event) {
	console.log("222--", event.message);
}
var target = new EventTarget();
// 添加事件
target.addHandler('message', handleMessage1);
target.addHandler('message', handleMessage2);
// 执行事件
target.fire({
	type: 'message',
	message: 'hello!'
})

// 删除事件
target.removeHandler('message', handleMessage1);
// 执行事件
target.fire({
	type: 'message',
	message: 'holy'
})