读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 相关文章推荐
读jQuery之五(取DOM元素)
Jun 20 Javascript
$.each遍历对象、数组的属性值并进行处理
Jul 18 Javascript
很实用的js选项卡切换效果
Aug 12 Javascript
javascript表单控件实例讲解
Sep 13 Javascript
浅谈jQuery before和insertBefore的区别
Dec 04 Javascript
BootStrap学习笔记之nav导航栏和面包屑导航
Jan 03 Javascript
JavaScript &amp; jQuery完美判断图片是否加载完毕
Jan 08 Javascript
jQuery中on方法使用注意事项详解
Feb 15 Javascript
vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
Oct 12 Javascript
JS算法题之查找数字在数组中的索引位置
May 15 Javascript
vue 通过绑定事件获取当前行的id操作
Jul 27 Javascript
JavaScript组合继承详解
Nov 07 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
zend api扩展的php对象的autoload工具
2011/04/18 PHP
HR vs ForZe BO3 第二场 2.13
2021/03/10 DOTA
jquery 可拖拽的窗体控件实现代码
2010/03/21 Javascript
javaScript call 函数的用法说明
2010/04/09 Javascript
ajax的hide隐藏问题解决方法
2012/12/11 Javascript
根据json字符串生成Html的一种方式
2013/01/09 Javascript
探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行
2013/07/09 Javascript
JS正则表达式验证数字代码
2014/01/28 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
2014/06/23 Javascript
针对BootStrap中tabs控件的美化和完善(推荐)
2016/07/06 Javascript
js实现动态创建的元素绑定事件
2016/07/19 Javascript
浅谈react.js 之 批量添加与删除功能
2017/04/17 Javascript
微信小程序 setData的使用方法详解
2017/04/20 Javascript
微信小程序 实现动态显示和隐藏某个控件
2017/04/27 Javascript
react native带索引的城市列表组件的实例代码
2017/08/08 Javascript
vue2实现可复用的轮播图carousel组件详解
2017/11/27 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
2018/01/16 Javascript
vue-cli项目无法用本机IP访问的解决方法
2018/09/20 Javascript
使用 vue 实现灭霸打响指英雄消失的效果附demo
2019/05/06 Javascript
Angular处理未可知异常错误的方法详解
2021/01/17 Javascript
[19:59]2014DOTA2国际邀请赛 IG战队纪录片
2014/08/07 DOTA
[00:42]《辉夜杯》—职业组预选赛12月3日15点 正式打响
2015/12/03 DOTA
python ansible服务及剧本编写
2017/12/29 Python
python 连接各类主流数据库的实例代码
2018/01/30 Python
实例讲解Python爬取网页数据
2018/07/08 Python
使用python批量读取word文档并整理关键信息到excel表格的实例
2018/11/07 Python
浅析python标准库中的glob
2020/03/13 Python
python 在threading中如何处理主进程和子线程的关系
2020/04/25 Python
CSS去掉A标签(链接)虚线框的方法
2014/04/01 HTML / CSS
美国沃尔玛网上超市:Walmart
2020/08/14 全球购物
九州传奇上机题
2014/07/10 面试题
试用期自我鉴定范文
2014/03/20 职场文书
小学生竞选班干部演讲稿(5篇)
2014/09/12 职场文书
群众路线批评与自我批评发言稿
2014/10/16 职场文书
元旦晚会开场白
2015/05/29 职场文书
vue-cil之axios的二次封装与proxy反向代理使用说明
2022/04/07 Vue.js