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

---