Javascript自定义事件详解(2)

上述代码是可以，但，有个性能问题，addAction中添加到actionObj[actionName]中的是一个数组，其实完全可以将定义的servicearray数组（为了存储不同的service而声明的数组）移除，转而将每个service直接push进actionObj[actionName]声明的数组中，这样trigger事件效率也得到了提高，从原来的两层for循环降到一层for循环。且，我们再加一个删除service的方法remove。

整理代码如下：

var actionObj = {}; //修改代码，增加一个actionName与service函数直接关联事件 function addAction(actionName, fn){ if(typeof actionObj[actionName] === 'undefined' ){ actionObj[actionName] = []; } if(typeof fn === 'function'){ actionObj[actionName].push(fn); } } //修改代码，增加一个触发actionName事件 function trigger( actionName ){ var actionarray = actionObj[actionName]; if(actionarray instanceof Array){ for(var i = 0, len = actionarray.length; i < len; i++){ if(typeof actionarray[i] === 'function'){ actionarray[i](); } } } } //修改代码，增加一个删除actionName中的service事件 function remove(actionName, fn){ var actionarray = actionObj[actionName]; if(typeof actionName === 'string' && actionarray instanceof Array){ if(typeof fn === 'function'){ //清除actionName中对应的fn方法 for(var i=0, len = actionarray.length; i < len; i++){ if(actionarray[i] === fn){ actionObj[actionName].splice(i,1); } } } } }

上面的代码好是好，action与service也互不影响，也完成了它的使命。

使命？

这就是我们一起编写的自定义事件嘛。是不是很简单。

哈哈哈，我尼玛也在代码中用到设计模式了（观察者模式）。

一鼓作气，我们再来优化下上面的代码。有没有注意，我们是使用的全局变量，在模块化开发的大环境下，我们居然在用全局变量，岂不是污染命名空间嘛。再改改。

修改代码如下：

var EventTarget = function(){ this.listener = {}; } EventTarget.prototype = { constructor:EventTarget, addAction: function(actionName, fn){ if(typeof actionName === 'string' && typeof fn === 'function'){ //如果不存在actionName，就新建一个 if(typeof this.listener[actionName] === 'undefined'){ this.listener[actionName] = [fn]; } //否则，直接往相应actinoName里面塞 else{ this.listener[actionName].push(fn); } } }, trigger: function(actionName){ var actionArray = this.listener[actionName]; //触发一系列actionName里的函数 if(actionArray instanceof Array){ for(var i = 0, len = actionArray.length; i < len; i++){ if(typeof actionArray[i] === 'function'){ actionArray[i](); } } } actionArray = null; }, remove: function(actionName, fn){ var actionArray = this.listener[actionName]; if(typeof actionName === 'string' && actionArray instanceof Array){ if(typeof fn === 'function'){ //清除actionName中对应的fn方法 for(var i=0, len = actionArray.length; i < len; i++){ if(actionArray[i] === fn){ this.listener[actionName].splice(i,1); } } } } actionArray = null; } };

一个JavaScript自定义事件新鲜出炉。