读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 相关文章推荐
ArrayList类(增强版)
Apr 04 Javascript
JS在IE和FF下attachEvent,addEventListener学习笔记
Nov 26 Javascript
JQuery实现简单的图片滑动切换特效
Nov 22 Javascript
浅谈JavaScript对象与继承
Jul 10 Javascript
Javascript在IE和Firefox浏览器常见兼容性问题总结
Aug 03 Javascript
Servlet实现文件上传,可多文件上传示例
Dec 05 Javascript
微信小程序开发之入门实例教程篇
Mar 07 Javascript
jQuery实现点击下拉框中的值累加到文本框中的方法示例
Oct 28 jQuery
详解如何在webpack中做预渲染降低首屏空白时间
Aug 22 Javascript
微信小程序swiper左右扩展各显示一半代码实例
Dec 05 Javascript
JavaScript实现留言板案例
Mar 17 Javascript
用React Native制作一个简单的游戏引擎
May 27 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
雄兵连:第三季确定会出,不过时间未定,鹤熙是第三季的主角!
2020/03/13 国漫
PHP 将数组打乱 shuffle函数的用法及简单实例
2016/06/17 PHP
Jquery实现视频播放页面的关灯开灯效果
2013/05/27 Javascript
Js 导出table内容到Excel的简单实例
2013/11/19 Javascript
非jQuery实现照片散落桌子上,单击放大的LightBox效果
2014/11/28 Javascript
AngularJS 实现按需异步加载实例代码
2015/10/18 Javascript
JavaScript性能优化之小知识总结
2015/11/20 Javascript
JavaScript判断表单为空及获取焦点的方法
2016/02/12 Javascript
jquery 点击元素后,滚动条滚动至该元素位置的方法
2016/08/05 Javascript
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
2016/09/06 Javascript
jQuery实现可拖拽的许愿墙效果【附demo源码下载】
2016/09/14 Javascript
js中获取键盘事件的简单实现方法
2016/10/10 Javascript
node.js入门学习之url模块
2017/02/25 Javascript
性能优化之代码优化页面加载速度
2017/03/01 Javascript
canvas实现刮刮卡效果
2017/03/14 Javascript
jQuery 实时保存页面动态添加的数据的示例
2017/08/14 jQuery
解决vue-cli创建项目的loader问题
2018/03/13 Javascript
Javascript摸拟自由落体与上抛运动原理与实现方法详解
2020/04/08 Javascript
Vue路由的模块自动化与统一加载实现
2020/06/05 Javascript
python使用点操作符访问字典(dict)数据的方法
2015/03/16 Python
python求解水仙花数的方法
2015/05/11 Python
python unittest实现api自动化测试
2018/04/04 Python
tensorflow 中对数组元素的操作方法
2018/07/27 Python
opencv实现图片模糊和锐化操作
2018/11/19 Python
日本最大的购物网站乐天市场国际版:Rakuten Global Market(支持中文)
2020/02/03 全球购物
请说出几个常用的异常类
2013/01/08 面试题
标准导师推荐信(医学类)
2013/10/28 职场文书
党委书记岗位职责
2013/11/24 职场文书
毕业生就业意向书
2014/04/01 职场文书
《云房子》教学反思
2014/04/20 职场文书
教师学习三严三实心得体会
2014/10/13 职场文书
财务工作失误检讨书
2015/02/19 职场文书
2015年环卫工作总结
2015/04/28 职场文书
如何写好闭幕词
2019/04/02 职场文书
Python os和os.path模块详情
2022/04/02 Python
MySQL生成千万测试数据以及遇到的问题
2022/08/05 MySQL