文章目录
在程序开发中,尤其是在前端开发中,我们有时会遇到这种情况,那就是在一个页面中当有一个数据被修改时,其它的多处信息展示也应该被同步更新,这时候普通的操作就显得有些繁琐而不可靠,不过采用事件总线的思维是一个不错的解决方式。而这里的所谓事件总线是指一处更改操作,触发多处事件响应。
在这里我编写了一个基于原生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
事件,而后者不会覆盖前者,故两者都会被执行,所以说就在控制台中打印出了两次结果。