javascript Observer模式

<script>
Array.prototype.append = function(obj, nodup) {
	if(!(nodup && this.contains(obj))) {
		this[this.length] = obj;
	}
}

Array.prototype.contains = function(obj) {
	return (this.indexOf(obj)>=0);
}

Array.prototype.indexOf = function(obj) {
	var result = -1;
	for(var i=0; i<this.length; i++) {
		if(this[i]==obj) {
			result = i;
			break;
		}
	}
	return result;
}

Array.prototype.clear = function() {
	this.length = 0;
}

Array.prototype.insertAt = function(index, obj) {
	this.splice(index, 0, obj);
}

Array.prototype.removeAt = function(index) {
	this.splice(index, 1);
}

Array.prototype.remove = function(obj) {
	var index = this.indexOf(obj);
	if(index>=0)
		this.removeAt(index);
}
</script>
<script>
Router = function(el, e) {
	this.lsnrs = [];
	el.router = this;
	el[e] = Router.callback;
}

Router.prototype.addListener = function(lsnr, argArray) {
	lsnr.argArray = argArray;
	this.lsnrs.append(lsnr, true);
}

Router.prototype.removeListener = function(lsnr) {
	this.lsnrs.remove(lsnr);
}

Router.prototype.notify = function(e) {
	for(var i=0; i<this.lsnrs.length; i++)
		this.lsnrs[i].apply(e.srcElement, this.lsnrs[i].argArray);
}

Router.callback = function() {
	var router = this.router;
	router.notify(window.event);
}

function test1(a) {
	alert(a)
}
function test2(a,b) {
	alert(a+b)
}
function test3(a,b,c) {
	alert(a+b+c)
}
window.onload = function() {
	var el = document.getElementById("bt");
	var router = new Router(el, "onclick")
	router.addListener(test1,[1]);
	router.addListener(test2,[1,2]);
	router.addListener(test3,[1,2,3]);
	router.removeListener(test2);
}
</script>
<input id="bt" type="button" value="button" />

 

评论

2 楼 xshq 2009-07-24  

zdz8207 写道

楼主的方法只能运行在ie下面啊
事件监听还不如用浏览器自己的特性封装一下

谢谢提醒，之前确实没有考虑跨浏览器问题。这样封装的好处是可以动态添加和删除事件的监听方法，而且方法的个数也不限制。
把代码修改了一下，解决了跨浏览器问题。

<script>
Array.prototype.append = function(obj, nodup) {
	if(!(nodup && this.contains(obj))) {
		this[this.length] = obj;
	}
}

Array.prototype.contains = function(obj) {
	return (this.indexOf(obj)>=0);
}

Array.prototype.indexOf = function(obj) {
	var result = -1;
	for(var i=0; i<this.length; i++) {
		if(this[i]==obj) {
			result = i;
			break;
		}
	}
	return result;
}

Array.prototype.clear = function() {
	this.length = 0;
}

Array.prototype.insertAt = function(index, obj) {
	this.splice(index, 0, obj);
}

Array.prototype.removeAt = function(index) {
	this.splice(index, 1);
}

Array.prototype.remove = function(obj) {
	var index = this.indexOf(obj);
	if(index>=0)
		this.removeAt(index);
}
</script>
<script>
Router = function(el, e) {
	this.lsnrs = [];
	el.router = this;
	el[e] = Router.callback;
}

Router.prototype.addListener = function(lsnr, argArray) {
	lsnr.argArray = argArray;
	this.lsnrs.append(lsnr, true);
}

Router.prototype.removeListener = function(lsnr) {
	this.lsnrs.remove(lsnr);
}

Router.prototype.notify = function(el) {
	for(var i=0; i<this.lsnrs.length; i++)
		this.lsnrs[i].apply(el, this.lsnrs[i].argArray);
}

Router.callback = function(eventTag) {

	var el = window.event?window.event.srcElement:eventTag.target;
	var router = this.router;
	router.notify(el);
}

function test1(a) {
	alert(a)
}
function test2(a,b) {
	alert(a+b)
}
function test3(a,b,c) {
	alert(a+b+c)
}

window.onload = function() {
	var el = document.getElementById("bt");
	var router = new Router(el, "onclick");
	router.addListener(test1,[1]);
	router.addListener(test2,[1,2]);
	router.addListener(test3,[1,2,3]);
	router.removeListener(test2);
}
</script>
<input type="button" id="bt" value="button" />

1 楼 zdz8207 2009-07-23  

楼主的方法只能运行在ie下面啊
事件监听还不如用浏览器自己的特性封装一下