Javascript自定义事件详解
Javascript自定义事件,其本质就是观察者模式(又称订阅/发布模式),它的好处就是将绑定事件和触发事件相互隔离开,并且可以动态的添加、删除事件。
下面通过实例,一步一步构建一个具体的Javascript自定义事件对象。
如:我有一个action1函数,我想每次在执行完action1后,触发另一个函数service1,那么代码我们可以这么写:
//服务service1 functionservice1(){ } //函数action1 functionaction1(){ //otherthings //then启动service1 service1(); }
Good,但是现在想法变了,我想在action1完成后,不仅触发service1,还要触发service2和service3。
按照刚才的思路,在函数action1完成后,顺带加上它们就是了。
如下:
functionservice1(){} functionservice2(){} functionservice3(){} functionaction1(){ //otherthings service1(); service2(); service3(); }
但,想法又再次发生波动,在执行完action1函数后,我突然想动态添加一个service4,且,发现service2似乎毫无意义,我不想触发了,怎么办呢?
你可能会说去掉service2,然后在action1后面加入service4不就完了吗?
但是,在真正的项目开发代码日益剧增的情况下,谈何容易,还要去找到相关代码进行操作。
那怎么办呢?
初步想法,定义一个数组嘛(如:servicearray),用来管理所有的service。
当action1执行到末尾后,遍历一遍这个数组函数(servicearray),就欧克了嘛。
且,倘若我们不想运行service2了,便将它从这个数组中删除就好了;倘若想再添加一个新的service,将其追加到servicearray数组中就好了。
如此nice,如下:
varservicearray=[]; functionservice1(){} functionservice2(){} functionservice3(){} //将所有service添加到servicearray中 servicearray.push(service1); servicearray.push(service2); servicearray.push(service3); //del:用于删除一个指定的service functiondel(arr,fn){ for(vari=0;i<arr.length;i++){ if(arr[i]==fn){ arr.splice(i,1); break; } } } //action1后,执行所有的service functionaction1(){ //otherthings //遍历serviceaary,执行所有service函数。(servicearray在action1内) for(vari=0;i<servicearray.length;i++){ servicearray[i](); } } //添加service4 functionservice4(){} servicearray.push(service4); //删除service2 del(servicearray,service2);
上面代码挺欧克的,但,复用性一点都不强,且servicearray与action你中有我,我中有你,不好。我们再来优化优化。
代码如下:
varservicearray=[]; functionservice1(){} functionservice2(){} functionservice3(){} servicearray.push(service1); servicearray.push(service2); servicearray.push(service3); functiondel(arr,fn){ for(vari=0;i<arr.length;i++){ if(arr[i]==fn){ arr.splice(i,1); break; } } } //添加一个service4 functionservice4(){} servicearray.push(service4); //删除一个service2 del(servicearray,service2); //添加一个触发函数hanldeAction,分离action与service functionhanldeAction(actionName,serviceArr){ if(typeofactionName==='function'){ actionName(); for(vari=0;i<serviceArr.length;i++){ serviceArr[i](); } } } //执行 handleAction(action1,servicearray);
上面的代码和回调函数有异曲同工之处,因为我们想达到的效果是在action执行完成之后,运行一系列service嘛。
但,我现在改变想法了,我想在action执行之前执行一系列service呢,或者action中呢。看来得改hanldeAction回调函数啊,这放在项目中反复修改,显然不行。
所以,我们得让其更强大才好。(我想让它在什么地方执行就执行)
如下:
functionservice1(){} functionservice2(){} functionservice3(){} varservicearray=[]; servicearray.push(service1); servicearray.push(service2); servicearray.push(service3); functiondel(arr,fn){ for(vari=0;i<arr.length;i++){ if(arr[i]==fn){ arr.splice(i,1); break; } } } //添加一个service4 functionservice4(){} servicearray.push(service4); //删除一个service2 del(servicearray,service2); /* actionObj用于存储所有action与service关联的对象。 如:{ action1:[service1,service2], action2:[...] } */ varactionObj={}; /* 修改代码,增加一个actionName与serviceArr关联事件。 如,action1关联所有service,这样再结合下方的trigger事件就完美了 Params: actionName-->actionObj的属性 serviceArr-->包含所有与actionName相关的service数组 */ functionaddAction(actionName,serviceArr){ if(typeofactionObj[actionName]==='undefined'){ actionObj[actionName]=[]; } if(typeofserviceArr==='object'){ actionObj[actionName].push(serviceArr); } } /* 修改代码,增加一个触发actionName事件 如,当我想触发action1中的所有service时,调用trigger(action1)就OK啦 */ functiontrigger(actionName){ varact=actionObj[actionName]; if(actinstanceofArray){ for(vari=0,len=act.length;i<len;i++){ for(varj=0,arrlen=act[i].length;j++){ ((act[i])[j])(); } } } }
上述代码是可以,但,有个性能问题,addAction中添加到actionObj[actionName]中的是一个数组,其实完全可以将定义的servicearray数组(为了存储不同的service而声明的数组)移除,转而将每个service直接push进actionObj[actionName]声明的数组中,这样trigger事件效率也得到了提高,从原来的两层for循环降到一层for循环。且,我们再加一个删除service的方法remove。
整理代码如下:
varactionObj={}; //修改代码,增加一个actionName与service函数直接关联事件 functionaddAction(actionName,fn){ if(typeofactionObj[actionName]==='undefined'){ actionObj[actionName]=[]; } if(typeoffn==='function'){ actionObj[actionName].push(fn); } } //修改代码,增加一个触发actionName事件 functiontrigger(actionName){ varactionarray=actionObj[actionName]; if(actionarrayinstanceofArray){ for(vari=0,len=actionarray.length;i<len;i++){ if(typeofactionarray[i]==='function'){ actionarray[i](); } } } } //修改代码,增加一个删除actionName中的service事件 functionremove(actionName,fn){ varactionarray=actionObj[actionName]; if(typeofactionName==='string'&&actionarrayinstanceofArray){ if(typeoffn==='function'){ //清除actionName中对应的fn方法 for(vari=0,len=actionarray.length;i<len;i++){ if(actionarray[i]===fn){ actionObj[actionName].splice(i,1); } } } } }
上面的代码好是好,action与service也互不影响,也完成了它的使命。
使命?
这就是我们一起编写的自定义事件嘛。是不是很简单。
哈哈哈,我尼玛也在代码中用到设计模式了(观察者模式)。
一鼓作气,我们再来优化下上面的代码。有没有注意,我们是使用的全局变量,在模块化开发的大环境下,我们居然在用全局变量,岂不是污染命名空间嘛。再改改。
修改代码如下:
varEventTarget=function(){ this.listener={}; } EventTarget.prototype={ constructor:EventTarget, addAction:function(actionName,fn){ if(typeofactionName==='string'&&typeoffn==='function'){ //如果不存在actionName,就新建一个 if(typeofthis.listener[actionName]==='undefined'){ this.listener[actionName]=[fn]; } //否则,直接往相应actinoName里面塞 else{ this.listener[actionName].push(fn); } } }, trigger:function(actionName){ varactionArray=this.listener[actionName]; //触发一系列actionName里的函数 if(actionArrayinstanceofArray){ for(vari=0,len=actionArray.length;i<len;i++){ if(typeofactionArray[i]==='function'){ actionArray[i](); } } } actionArray=null; }, remove:function(actionName,fn){ varactionArray=this.listener[actionName]; if(typeofactionName==='string'&&actionArrayinstanceofArray){ if(typeoffn==='function'){ //清除actionName中对应的fn方法 for(vari=0,len=actionArray.length;i<len;i++){ if(actionArray[i]===fn){ this.listener[actionName].splice(i,1); } } } } actionArray=null; } };
一个JavaScript自定义事件新鲜出炉。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。