PubSub简单事件处理器

本文介绍了一个用于简化框架间通信的事件处理器实现,包括如何使用PubSub模式进行事件订阅与触发,以及该处理器的基本用法和注意事项。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

项目中碰到了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.难免有错误,有问题请指正。

转载于:https://my.oschina.net/qalong/blog/207897

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值