对jQuery的事件绑定的一些思考(补充)


Posted in Javascript onApril 20, 2013

首先我们看下面的一个很常见的事件绑定代码:

//example 
$('#dom').click(function(e){ 
//do something 
}); $('#dom2').click(function(e){ 
//do something 
});

这段代码在事件绑定处理上有一些缺陷:

过多的事件绑定会损耗内存
后期生成HTML会没有事件绑定,需要重新绑定
语法过于繁杂

解决方案

对于1、2两点的解决方案,我们首先先了解一下jQuery的事件绑定

jQuery的事件绑定有多个方法可以调用,以click事件来举例:

click方法

bind方法
delegate方法
on方法

不管你用的是(click / bind / delegate)之中那个方法,最终都是jQuery底层都是调用on方法来完成最终的事件绑定。因此从某种角度来讲除了在书写的方便程度及习惯上挑选,不如直接都采用on方法来的痛快和直接。

关于对方法的详细解释和用例,请直接访问jQuery官网,在这里不一一说明。api.jquery.com

性能

首先我们需要先对不同的事件绑定方式之间的内存占用差距有一个清晰的认识。

对于性能的分析将采用Chrome的Developer Tools。
Profiles --> Take Heap Snapshot,用这个工具我们可以看到Javascript所占用的内存,能够对性能问题进行分析。

对jQuery的事件绑定的一些思考(补充)

DEMO HTML
<html> 
<head> 
<script type="text/javascript"> 
$(function(){ 
$('#btn-add').click(function(){ 
$('.ul').prepend('<li><a href="javascript:;">text</a></li>'); 
}); 
}); 
</script> 
</head> 
<body> 
<button id="btn-add">Create Element</button> 
<ul class="ul"> 
<li><a href="javascript:;">text</a></li> 
<!-- 2000 line... --> 
<li><a href="javascript:;">text</a></li> 
</ul> 
</body> 
</html>

Method 1

$(function(){ 
$('.ul a').click(function(e){ 
alert('click event'); 
}); 
});

以下是Method 1的内存分析图

内存占用约3.4M

对jQuery的事件绑定的一些思考(补充)

Method 2
$(function(){ 
$('.ul').on('click', 'a', function(e){ 
alert('click event'); 
}); 
});

以下是Method 2的内存分析图

内存占用约2.0M

对jQuery的事件绑定的一些思考(补充)

结论
Method 1 明显比 Method 2 多耗1.4M的内存

Method 1 无法将事件绑定到通过点击button所新增DOM中来,而Method 2可以。
只要on的delegate对象是HTML页面原有的元素,由于是事件的触发是通过Javascript的事件冒泡机制来监测,所以对于所有子元素(包括后期通过JS生成的元素)所有的事件监测均能有效,且由于不用对多个元素进行事件绑定(在这个example中为2000+a标签),能够有效的节省内存的损耗。

思考
代码如诗,但很容易变成代码如屎。如何提高代码的优雅程度也是一个很有意思的事情。

以下是一个很普通且普遍的JS文件的代码片段(用于一般网站)

$('#btn-add').click(function(){ 
//do something 
}); 
$('.action-box #btn-delete').click(function(){ 
//do something 
}); 
$('.action-box #btn-sort').mouseenter(function(){ 
//do something 
}); 
/** 
**more same code 
*/

毫不夸张的说,当一个js文件上百行后,类似于上面的代码,你很难从里面发现规律。

1、可能A喜欢写#btn-add,而B喜欢写.action-box #btn-add来作为选择符。
2、堆砌着许多不同类型事件,没有一个次序可言
3、没有运用到我们刚刚所讲的利用事件冒泡来做事件绑定

对jQuery的事件绑定的一些思考(补充)

改进
我们来一步步改进一下之前的JS代码

Version 1

$('.action-box').on('click', '#btn-add', function(){
  //do something
});
$('.action-box').on('click', '#btn-delete', function(){
  //do something
});

虽然运用了事件冒泡,不过感觉还是有点累赘,.action-box出现多次,感觉不舒服,让我们继续改进

Version 2

$('.action-box').on('click', '#btn-add, #btn-delete', function(){
  if($(this).attr('id') == 'btn-add'){
    //do something
  } else{
    //do something
  }
});

感觉比刚刚好多了,不过还是需要判断元素来做出相应的处理,能接受,但不完美。

灵感

首先看一下css的增强版本sass对于css语法上面的改进

/*bed css code*/
.action-box { width: 100%; color: #000; }
#btn-add { color: blue; }
#btn-delete { color: red; }
/*good css code*/
.action-box { width: 100%; color: #000; }
  .action-box #btn-add { color: blue; }
  .action-box #btn-delete { color: red; }
/*sass code*/
.action-box {
  width: 100%;
  color: #000;
  #btn-add {
    color: blue;
  }
  #btn-delete {
    color: red;
  }
}

我们可以在 good css code 和 sass code 从中可以可以很清晰了然的看到文档结构:.action-box 下面有两个button。

这是否能让sass这种代码结构运用到js中来呢?答案当然是可以。

$('.action-box').coffee({
  click: {
    '#btn-add': function(){
      //do something
    },
    //这是是支持jQuery的':last / [attr] / :eq(0)'等方法的 
    '#btn-delete': function(){
      //do something
    }
  },
  mouseenter: {
    '#btn-sort': function(){
      //do something
    }
  }
});

喜欢这种结构吗?

1、清晰明了的文档结构
2、运用事件冒泡,有效减少内存的占用
3、第一级别用事件名称来划分
4、第二级别的属性名相当于选择符。

coffee函数的源码

$.fn.coffee = function(obj){
  for(var eName in obj)
    for(var selector in obj[eName])
      $(this).on(eName, selector, obj[eName][selector]);
}

聊聊数行代码,就可以做成一个很美妙的语法糖

Enjoy yourself !  ^_^

作者: CoffeeDeveloper

Javascript 相关文章推荐
JavaScript的目的分析
Jan 05 Javascript
jQuery选择器源码解读(五):tokenize的解析过程
Mar 31 Javascript
jQuery实现文本框输入同步的方法
Jun 20 Javascript
javascript图片滑动效果实现
Jan 28 Javascript
原生JS实现匀速图片轮播动画
Oct 18 Javascript
基于JavaScript实现活动倒计时效果
Apr 20 Javascript
Bootstrap输入框组件使用详解
Jun 09 Javascript
基于Bootstrap实现城市三级联动
Nov 23 Javascript
vuejs 制作背景淡入淡出切换动画的实例
Sep 01 Javascript
webpack的CSS加载器的使用
Sep 11 Javascript
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
Aug 28 Javascript
浅析我对JS延迟异步脚本的思考
Oct 12 Javascript
A标签中通过href和onclick传递的this对象实现思路
Apr 19 #Javascript
javascript中onclick(this)用法介绍
Apr 19 #Javascript
jQuery使用一个按钮控制图片的伸缩实现思路
Apr 19 #Javascript
使用jQuery同时控制四张图片的伸缩实现代码
Apr 19 #Javascript
使用jQuery实现的网页版的个人简历(可换肤)
Apr 19 #Javascript
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
Apr 19 #Javascript
JS实现div内部的文字或图片自动循环滚动代码
Apr 19 #Javascript
You might like
php中对xml读取的相关函数的介绍一
2008/06/05 PHP
mac下使用brew配置环境的步骤分享
2011/05/23 PHP
php统计文章排行示例
2014/03/04 PHP
[原创]php实现 data url的图片生成与保存
2016/12/04 PHP
JavaScript去掉数组中的重复元素
2011/01/13 Javascript
Javascript绝句欣赏 一些经典的js代码
2012/02/22 Javascript
js获取客户端网卡的IP地址、MAC地址
2014/03/26 Javascript
在JS数组特定索引处指定位置插入元素的技巧
2014/08/24 Javascript
解决bootstrap中modal遇到Esc键无法关闭页面
2015/03/09 Javascript
JavaScript程序中的流程控制语句用法总结
2016/05/23 Javascript
js 截取或者替换字符串中的数字实现方法
2016/06/13 Javascript
JS遍历ul下的li点击弹出li的索引的实现方法
2016/09/19 Javascript
jQuery post数据至ashx实例详解
2016/11/18 Javascript
jquery横向纵向鼠标滚轮全屏切换
2017/02/27 Javascript
JS验证码实现代码
2017/09/14 Javascript
[59:07]海涛为你详解DOTA2新版本“贤哲秘契”
2014/11/22 DOTA
[44:09]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第二局
2016/02/25 DOTA
python之wxPython菜单使用详解
2014/09/28 Python
python中的闭包用法实例详解
2015/05/05 Python
Python实现将Excel转换为json的方法示例
2017/08/05 Python
解决python3中自定义wsgi函数,make_server函数报错的问题
2017/11/21 Python
Python中的四种交换数值的方法解析
2019/11/18 Python
python有序查找算法 二分法实例解析
2020/02/18 Python
Django Form常用功能及代码示例
2020/10/13 Python
Python实现曲线拟合的最小二乘法
2021/02/19 Python
基于CSS3实现图片模糊过滤效果
2015/11/19 HTML / CSS
巴黎一票通:The Paris Pass
2018/02/10 全球购物
个人评语大全
2014/05/04 职场文书
绿色环保演讲稿
2014/05/10 职场文书
挂牌仪式策划方案
2014/05/18 职场文书
卫生院艾滋病宣传活动小结
2014/07/09 职场文书
英语四级考试作弊检讨书
2014/09/29 职场文书
金融专业银行实习证明模板
2014/11/28 职场文书
2015年学习部工作总结范文
2015/03/31 职场文书
招商银行工作证明
2015/06/17 职场文书
react 路由Link配置详解
2021/11/11 Javascript