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