PubSub简单事件处理器

项目中碰到了frame间的通信,开始的时候同事在首页上定义了一堆回调方法定义,然后在触发的页面挨个调用,显然不好管理,而且太不程序员了,呵呵。

突发灵感可以利用EventBus模式来写个简单的中央事件处理器,先粘帖代码,一共就这几行(简单的不好意思贴出来:D):

/**
 * PubSub简单事件处理器
 * 
 * @author Stephen Chang
 */
var spark = spark || {};//自己包装的对象

spark.event = spark.event || {}//事件对象
spark.event.eventList = [];//事件列表

/**
 * 监听某个事件
 * 
 * pmodule:	页面的表示,推荐使用当前页面的路径。使用pmodule是为了防止同一个页面多次绑定同一个事件
 * pname:	触发事件的名称
 * pfunc:	事件处理函数
 */
spark.event.listen = function(pmodule, pname, pfunc) {
	var lst = spark.event.eventList;
	for (var i = 0; i < lst.length; i++) {
		var evt = lst[i];
		if (evt.module == pmodule && evt.name == pname) {
			evt.func = pfunc;
			return;
		}
	}
	spark.event.eventList.push({
		module : pmodule,
		name : pname,
		func : pfunc
	});
}
/**
 * 触发某个事件
 *
 * pname:	触发事件的名称
 * pobj:	事件传递的参数
 */
spark.event.trigger = function(pname, pobj) {
	var lst = spark.event.eventList;
	for (var i = 0; i < lst.length; i++) {
		var evt = lst[i];
		if (evt.name == pname) {
			if (evt.func) {
				evt.func(pobj);
			}
		}
	}
}


使用方式:

1.将上述代码加入到主页面,就是所有frame的承载页面。

2.在需要订阅事件的页面加入

top.spark.event.listen("static/js/SparkEvent.js","demo.call",function(obj){
		alert("事件测试");
	}
);

3.在要发起事件的页面加入

top.spark.event.trigger("demo.call");

这个事件处理器做的很粗糙,没有过多封装,只是为了满足项目中“够用”而已。

注意:

1.前面加top.是因为将事务处理器肯定必须是在frame的最外层,所以只要在最外层的页面加入处理器代码就可以。

2.spark.event.listen()第一个参数:因为中央处理器的list是不会清空的,那么同一个页面每刷新一次都会向这个list加入一个事件,这时应该用替换而不能用添加。但是有很多页面可能同时监听一个时间名,所以要根据页面+事件名的方式来判断是替换还是添加一个新的事件。

3.难免有错误,有问题请指正。

你可能感兴趣的:(JavaScript,js,事件监听,EventBus)