Javascript自定义事件详解

Javascript自定义事件,其本质就是观察者模式(又称订阅/发布模式),它的好处就是将绑定事件和触发事件相互隔离开,并且可以动态的添加、删除事件。

下面通过实例,一步一步构建一个具体的Javascript自定义事件对象。

如:我有一个action1函数,我想每次在执行完action1后,触发另一个函数service1,那么代码我们可以这么写:

//服务service1 function service1(){ } //函数action1 function action1(){ //other things //then 启动service1 service1(); }

Good,但是现在想法变了,我想在action1完成后,不仅触发service1,还要触发service2和service3。

按照刚才的思路,在函数action1完成后,顺带加上它们就是了。

如下:

function service1(){} function service2(){} function service3(){} function action1(){ //other things service1(); service2(); service3(); }

但,想法又再次发生波动,在执行完action1函数后,我突然想动态添加一个service4,且,发现service2似乎毫无意义,我不想触发了,怎么办呢?

你可能会说去掉service2,然后在action1后面加入service4不就完了吗?

但是,在真正的项目开发代码日益剧增的情况下,谈何容易,还要去找到相关代码进行操作。

那怎么办呢?

初步想法,定义一个数组嘛(如:servicearray),用来管理所有的service。

当action1执行到末尾后,遍历一遍这个数组函数(servicearray),就欧克了嘛。

且,倘若我们不想运行service2了,便将它从这个数组中删除就好了;倘若想再添加一个新的service,将其追加到servicearray数组中就好了。

如此nice,如下:

var servicearray = []; function service1(){} function service2(){} function service3(){} //将所有service添加到servicearray中 servicearray.push(service1); servicearray.push(service2); servicearray.push(service3); //del:用于删除一个指定的service function del(arr, fn){ for(var i = 0; i < arr.length; i++){ if( arr[i] == fn ){ arr.splice(i,1); break; } } } //action1后,执行所有的service function action1(){ //other things //遍历serviceaary,执行所有service函数。(servicearray在action1内) for(var i =0; i < servicearray.length; i++){ servicearray[i](); } } //添加service4 function service4(){} servicearray.push(service4); //删除service2 del(servicearray, service2);

上面代码挺欧克的,但,复用性一点都不强,且servicearray与action你中有我,我中有你,不好。我们再来优化优化。

代码如下:

var servicearray = []; function service1(){} function service2(){} function service3(){} servicearray.push(service1); servicearray.push(service2); servicearray.push(service3); function del(arr, fn){ for(var i = 0; i < arr.length; i++){ if( arr[i] == fn ){ arr.splice(i,1); break; } } } //添加一个service4 function service4(){} servicearray.push(service4); //删除一个service2 del(servicearray, service2); //添加一个触发函数hanldeAction,分离action与service function hanldeAction(actionName,serviceArr){ if(typeof actionName === 'function'){ actionName(); for(var i =0; i < serviceArr.length; i++){ serviceArr[i](); } } } //执行 handleAction(action1,servicearray);

上面的代码和回调函数有异曲同工之处,因为我们想达到的效果是在 action执行完成之后,运行一系列service嘛。

但,我现在改变想法了,我想在action执行之前执行一系列service呢,或者action中呢。看来得改hanldeAction回调函数啊,这放在项目中反复修改,显然不行。

所以,我们得让其更强大才好。(我想让它在什么地方执行就执行)

如下:

function service1(){} function service2(){} function service3(){} var servicearray = []; servicearray.push(service1); servicearray.push(service2); servicearray.push(service3); function del(arr, fn){ for(var i = 0; i < arr.length; i++){ if( arr[i] == fn ){ arr.splice(i,1); break; } } } //添加一个service4 function service4(){} servicearray.push(service4); //删除一个service2 del(servicearray, service2); /* actionObj用于存储所有action与service关联的对象。 如:{ action1:[service1,service2], action2:[...] } */ var actionObj = {}; /* 修改代码,增加一个actionName与serviceArr关联事件。 如,action1关联所有service,这样再结合下方的trigger事件就完美了 Params: actionName --> actionObj的属性 serviceArr --> 包含所有与actionName相关的service数组 */ function addAction(actionName, serviceArr){ if(typeof actionObj[actionName] === 'undefined' ){ actionObj[actionName] = []; } if(typeof serviceArr === 'object'){ actionObj[actionName].push(serviceArr); } } /* 修改代码,增加一个触发actionName事件 如,当我想触发action1中的所有service时,调用trigger(action1)就OK啦 */ function trigger( actionName ){ var act = actionObj[actionName]; if(act instanceof Array){ for(var i = 0, len = act.length; i < len; i++){ for(var j =0, arrlen = act[i].length; j++){ ((act[i])[j])(); } } } }

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwdfjd.html