Javascript自定义事件详解

更新时间：2017年01月13日 10:10:28 作者：猴子

这篇文章主要介绍了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])();
   }
  }
 }
}

上述代码是可以，但，有个性能问题，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自定义事件新鲜出炉。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

使用 Node.js 做 Function Test实现方法
这篇文章介绍了Node.js 做 Function Test实现方法，有需要的朋友可以参考一下
2013-10-10
详解JavaScript 异步编程
这篇文章主要介绍了JavaScript 异步编程的相关资料，文中讲解非常细致，帮助大家更好的理解学习JS，感兴趣的朋友可以了解下
2020-07-07
在浏览器测试JavaScript的方法小结
测试JavaScript代码是一件很痛苦的事情，很多情况下都是写好代码不断刷新测试，其实chrome浏览器的console下就很方便，这里就为大家简单分享一下
2023-03-03
Javascript页面跳转常见实现方式汇总
这篇文章主要介绍了Javascript页面跳转常见实现方式,结合实例汇总分析了JavaScript常用的七种页面跳转实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-11-11
微信小程序自定义导航教程（兼容各种手机）
这篇文章主要给大家介绍了关于微信小程序自定义导航的相关内容，文中通过示例代码介绍的非常详细，兼容各种手机,对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2018-12-12
JavaScript实现省市联动效果
这篇文章主要介绍了JavaScript实现省市联动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-11-11
webpack css加载和图片加载的方法示例
这篇文章主要介绍了webpack css加载和图片加载的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09
javascript eval(func())使用示例
eval的作用其实很简单，就是把一段字符串传递给JS解释器，由Javascript解释器将这段字符串解释成Javascript代码，下面有个不错的示例，感兴趣的朋友可以参考下
2013-12-12
JS刷新框架外页面七种实现代码
JS刷新框架想必大家们都有所了解，如何是刷新框架外页面想必大家有所陌生啦,没关系本文的出现将解决大家的燃眉之急，感兴趣的你可不要错过了哈
2013-02-02
使用JavaScript判断手机浏览器是横屏还是竖屏问题
这篇文章主要介绍了使用JavaScript判断手机浏览器是横屏还是竖屏问题的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-08-08

Javascript自定义事件详解

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具