读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 相关文章推荐
javascript hashtable 修正版 下载
Dec 30 Javascript
JQuery datepicker 使用方法
May 20 Javascript
Jquery 切换不同图片示例代码
Dec 05 Javascript
AngularJS压缩JS技巧分析
Nov 08 Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
May 25 Javascript
详解angular中的作用域及继承
May 31 Javascript
详解React Native 采用Fetch方式发送跨域POST请求
Nov 15 Javascript
jquery引入外部CDN 加载失败则引入本地jq库
May 23 jQuery
bootstrap模态框关闭后清除模态框的数据方法
Aug 10 Javascript
微信小程序http连接访问解决方案的示例
Nov 05 Javascript
fetch 如何实现请求数据
Dec 20 Javascript
javascript实现简易计算器功能
Sep 23 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修改时间格式的代码
2011/05/29 PHP
php 抽象类的简单应用
2011/09/06 PHP
小谈php正则提取图片地址
2014/03/27 PHP
php中mkdir函数用法实例分析
2014/11/15 PHP
PHP的Socket网络编程入门指引
2015/08/11 PHP
PHP设计模式之装饰器模式定义与用法简单示例
2018/08/13 PHP
PHP获取类私有属性的3种方法
2020/09/10 PHP
ExtJS 入门
2010/10/29 Javascript
javascript之典型高阶函数应用介绍
2013/01/10 Javascript
JavaSript中变量的作用域闭包的深入理解
2014/05/12 Javascript
jQuery实现可展开合拢的手风琴面板菜单
2015/09/15 Javascript
javascript之Boolean类型对象
2016/06/07 Javascript
AngularJS全局scope与Isolate scope通信用法示例
2016/11/22 Javascript
jquery实现刷新随机变化样式特效(tag标签样式)
2017/02/03 Javascript
微信小程序 标签传入数据
2017/05/08 Javascript
VUE的history模式下除了index外其他路由404报错解决办法
2019/08/21 Javascript
vue 实现tab切换保持数据状态
2020/07/21 Javascript
简单了解什么是神经网络
2017/12/23 Python
python交互界面的退出方法
2019/02/16 Python
python如何解析配置文件并应用到项目中
2019/06/27 Python
python程序运行进程、使用时间、剩余时间显示功能的实现代码
2019/07/11 Python
Django CSRF跨站请求伪造防护过程解析
2019/07/31 Python
Python IDLE或shell中切换路径的操作
2020/03/09 Python
anaconda3安装及jupyter环境配置全教程
2020/08/24 Python
Html5 canvas画图白板踩坑
2020/06/01 HTML / CSS
草莓网化妆品加拿大网站:Strawberrynet Canada
2016/09/20 全球购物
18-35岁旅游团的全球领导者:Contiki
2017/02/08 全球购物
美国玩具公司:U.S.Toy
2018/05/19 全球购物
美国中西部家用医疗设备商店:Med Mart(轮椅、踏板车、升降机等)
2019/04/26 全球购物
恶意软件的定义
2014/11/12 面试题
旅游管理毕业生自荐信范文
2014/03/19 职场文书
网站客服岗位职责
2014/04/05 职场文书
终止劳动合同协议书
2014/04/14 职场文书
工地安全生产标语
2014/06/06 职场文书
房屋买卖协议样本
2014/11/16 职场文书
2016清明节森林防火广播稿
2015/12/17 职场文书