JS实现事件总线 - 好文

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

在这里我编写了一个基于原生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>

热门工具换一换