在程序开发中,尤其是在前端开发中,我们有时会遇到这种情况,那就是在一个页面中当有一个数据被修改时,其它的多处信息展示也应该被同步更新,这时候普通的操作就显得有些繁琐而不可靠,不过采用事件总线的思维是一个不错的解决方式。而这里的所谓事件总线是指一处更改操作,触发多处事件响应。


  在这里我编写了一个基于原生JavaScript的eventBus.js插件,在该插件中有两大类方法,其一是map的形式,其二是list的形式,前者在同时添加多个同名js事件时,总是实现后一个方法覆盖前一个方法,即不能同时拥有两个同名的js事件。而后者则是类似于list数组,可以同时添加多个同名的js事件,而后者不会覆盖前者的方法。

  eventBus.js源码如下:
(function(){ //创建EventBus对象 EventBus = function () { console.log("maps init..."
); }; //准备数组容器 var objBus = [],arrbus = []; //添加方法 EventBus.prototype = { obj :
{ set : function(key,action){ if(key && action){ var map = {}; map.k = key;
map.v = action; //如果存在,则删除之前添加的事件 for(var i = 0,busLength = objBus.length;i <
busLength;i ++){ var tempMap = objBus[i]; if(tempMap.k == key){ objBus.splice(i
,1); } } objBus.push(map); } }, get : function(key){ if(key){ for(var i = 0
,busLength = objBus.length;i < busLength;i ++){ var map = objBus[i]; if(map.k
== key){ return map.v(); } } } } }, arr : { push : function (key,action) { if(
key && action){ var map = {}; map.k = key; map.v = action; arrbus.push(map); } }
, pop : function(key) { if(key){ for(var i = 0,busLength = arrbus.length;i <
busLength;i ++){ var map = arrbus[i]; if(map.k == key){ map.v(); } } } } } } })
();
  map方式的事件总线测试代码:
function testObj(){ eventBus.obj.set('event1',function(){ console.log('event1'
); }); eventBus.obj.set('event1',function(){ console.log('event2'); });
eventBus.obj.set('event3',function(){ console.log('event3'); }); eventBus.obj.
get('event1'); } //测试obj testObj();
  测试结果为:
event2
  从中我们可以看出,尽管说我们添加了两个同名的event1事件,但是由于map形式的事件总线总是后者覆盖前者,所以说总是显示最后一次添加的结果。

  list方式的事件总线测试代码:
function testArr() { eventBus.arr.push('event1',function(){ console.log(
'event1'); }); eventBus.arr.push('event1',function(){ console.log('event2');
}); eventBus.arr.push('event3',function(){ console.log('event3'); });
eventBus.arr.pop('event1'); } //测试arr testArr();
  测试结果:
event1 event2
  从中我们可以看出,在list方式的事件总线中,由于添加了两个event1事件,而后者不会覆盖前者,故两者都会被执行,所以说就在控制台中打印出了两次结果。

源码:event-bus-parent <https://gitee.com/zhangzhenyi/event-bus-parent>

友情链接
ioDraw流程图
API参考文档
OK工具箱
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:637538335
关注微信