读jQuery之四(优雅的迭代)


Posted in Javascript onJune 20, 2011

jQuery的操作往往是分两步
1,获取元素集合(选择器)
2,操作元素集合
而第二步操作元素集合的主要方法就是jQuery.each。查看源码,我们发现jQuery.each及this.each分别调用了27次和31次。可见它是多么的重要。
这篇将分析下jQuery.each及this.each方法。看看他们如何与jQuery.extend一起扩展jQuery库。最后我会给zChain.js加上each方法。
部分源码如下

jQuery.fn = jQuery.prototype = { 
... 
// Execute a callback for every element in the matched set. 
// (You can seed the arguments with an array of args, but this is 
// only used internally.) 
each: function( callback, args ) { 
return jQuery.each( this, callback, args ); 
}, 
... 
} 
jQuery.extend({ 
... 
// args is for internal usage only 
each: function( object, callback, args ) { 
var name, i = 0, 
length = object.length, 
isObj = length === undefined || jQuery.isFunction( object ); 
if ( args ) { 
if ( isObj ) { 
for ( name in object ) { 
if ( callback.apply( object[ name ], args ) === false ) { 
break; 
} 
} 
} else { 
for ( ; i < length; ) { 
if ( callback.apply( object[ i++ ], args ) === false ) { 
break; 
} 
} 
} 
// A special, fast, case for the most common use of each 
} else { 
if ( isObj ) { 
for ( name in object ) { 
if ( callback.call( object[ name ], name, object[ name ] ) === false ) { 
break; 
} 
} 
} else { 
for ( ; i < length; ) { 
if ( callback.call( object[ i ], i, object[ i++ ] ) === false ) { 
break; 
} 
} 
} 
} 
return object; 
}, 
... 
});

以上可看出,
1,jQuery().each是直接挂在jQuery.prototype(jQuery.fn)上的,因此每个jQuery对象都包含each方法。
2,jQuery.each是通过jQuery.extend({})方式扩展的。前面已经说过,通过这种方式扩展的方法将挂在function jQuery上,即为jQuery类的静态方法。
3,jQuery().each方法中只有一句:return jQuery.each( this, callback, args )。即jQuery对象的each方法实现上其实就是调用jQuery静态的jQuery.each。因此jQuery.each才是关键所在。
下面详细分析jQuery.each,它有三个参数object, callback, args。
1,object可以为数组(Array),对象(Object),甚至是函数类型(Functoin);
2,callback是回调函数,类型为function;
3,args为jQuery库自身使用,使用者不会用到该参数,这里暂不讨论该参数情况。

函数中第一句定义必要的变量

var name, i = 0, 
length = object.length, 
isObj = length === undefined || jQuery.isFunction( object );

length=object.length很好理解,有三种情况length不为undefined
1, object为数组类型(Array)时,数组具有length属性;
2, object为函数类型(Functoin)时,length为该函数定义的参数个数,如果该函数没有定义参数,length为0;
3, 具有length属性的object伪数组(如:arguments,HTMLCollection,NodeList等)。

变量isObj用来判断是否是对象类型,有两种情况为true:
1,变量length等于undefined,即所传object没有length属性。
2,参数object为函数类型

这里强调下object为jQuery对象。即当在$(xx).each时发生,这时会将this传到$.each中。如:return jQuery.each( this, callback, args )。这里第一个参数this即为jQuery对象,每个jQuery对象是具有length属性的。

each中有以下两个分支
1,如果isObj为true,则用for in语句去遍历该对象,如果把每个迭代的对象看出键值对形式的话。callback中的this是值object[name],callback第一个参数是键name,第二个参数是值object[name]。
2,如果isObj为false,则用for循环去遍历数组(类数组)。callback中的this是数组中单独元素的值value,callback第一参数是数组的索引i,第二参数是数组单独元素值value。
callback调用后返回值如果是false则停止迭代,跳出循环。这里用严格"==="来判断是否与false相等。顺便提一下,函数如果没有显示的return,默认返回undefined。

总结下:
1,$(xx).each的each是jQuery对象的方法,它调用静态的jQuery.each。它只用来迭代jQuery对象,jQuery对象可以看成一个伪数组(具有length属性,用索引方式存取)。
2,$.each的each是function jQuery的静态方法(即jQuery.each),可以迭代对象,数组,伪数组,函数。
zChain-04.rar

Javascript 相关文章推荐
用js重建星际争霸
Dec 22 Javascript
JS解密入门 最终变量劫持
Jun 25 Javascript
jquery 图片 上一张 下一张 链接效果(续篇)
Apr 20 Javascript
JS中处理时间之setUTCMinutes()方法的使用
Jun 12 Javascript
JavaScript检测上传文件大小的方法
Jul 22 Javascript
jquery获取url参数及url加参数的方法
Oct 26 Javascript
JS简单实现获取元素的封装操作示例
Apr 07 Javascript
微信小程序搜索组件wxSearch实例详解
Jun 08 Javascript
详解webpack3如何正确引用并使用jQuery库
Aug 26 jQuery
JS实现前端缓存的方法
Sep 21 Javascript
es6系列教程_ Map详解以及常用api介绍
Sep 25 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
Jan 28 Javascript
火狐4、谷歌12不支持Jquery Validator的解决方法分享
Jun 20 #Javascript
合并table相同单元格的jquery插件分享(很精简)
Jun 20 #Javascript
functional继承模式 摘自javascript:the good parts
Jun 20 #Javascript
jQuery数组处理方法汇总
Jun 20 #Javascript
jQuery UI AutoComplete 使用说明
Jun 20 #Javascript
jQuery 源码分析笔记(3) Deferred机制
Jun 19 #Javascript
jQuery 源码分析笔记(7) Queue
Jun 19 #Javascript
You might like
php判断字符以及字符串的包含方法属性
2008/08/30 PHP
PHP中数组定义的几种方法
2013/09/01 PHP
PHP中使用CURL获取页面title例子
2015/01/07 PHP
PHP扩展Memcache分布式部署方案
2015/12/06 PHP
PHP图像裁剪缩略裁切类源码及使用方法
2016/01/07 PHP
thinkPHP5.0框架开发规范简介
2017/03/25 PHP
使用Math.floor与Math.random取随机整数的方法详解
2013/05/07 Javascript
jqGrid随窗口大小变化自适应大小的示例代码
2013/12/28 Javascript
javascript不同类型数据之间的运算的转换方法
2014/02/13 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
2014/12/16 Javascript
jQuery Validate表单验证入门学习
2015/12/18 Javascript
jquery PrintArea 实现票据的套打功能(代码)
2017/03/17 Javascript
JS按钮闪烁功能的实现代码
2017/07/21 Javascript
vue如何判断dom的class
2018/04/26 Javascript
微信小程序实现搜索框功能及踩过的坑
2020/06/19 Javascript
[41:21]夜魇凡尔赛茶话会 第三期02:看图识人
2021/03/11 DOTA
Python交换变量
2008/09/06 Python
教你如何在Django 1.6中正确使用 Signal
2014/06/22 Python
Python的Flask框架中实现简单的登录功能的教程
2015/04/20 Python
Python while、for、生成器、列表推导等语句的执行效率测试
2015/06/03 Python
轻松实现python搭建微信公众平台
2016/02/16 Python
python运行时间的几种方法
2016/06/17 Python
tensorflow 1.0用CNN进行图像分类
2018/04/15 Python
TensorFlow打印tensor值的实现方法
2018/07/27 Python
使用Python+wxpy 找出微信里把你删除的好友实例
2019/02/21 Python
Python使用Slider组件实现调整曲线参数功能示例
2019/09/06 Python
基于python实现FTP文件上传与下载操作(ftp&amp;sftp协议)
2020/04/01 Python
Tensorflow与Keras自适应使用显存方式
2020/06/22 Python
PHP笔试题
2012/02/22 面试题
大学毕业生求职自荐信
2014/02/20 职场文书
2014年教师政治学习材料
2014/06/02 职场文书
2014年生产管理工作总结
2014/12/23 职场文书
2015新学期校长寄语(3篇)
2015/03/25 职场文书
催款函范文
2015/06/24 职场文书
食品卫生管理制度
2015/08/06 职场文书
Docker容器harbor私有仓库部署和管理
2022/08/05 Servers