注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

HelloWorld

echo "Hello world !"

 
 
 

日志

 
 

jQuery源码分析-each函数 function  

2014-10-21 14:37:53|  分类: 学习笔记 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
 1 jQuery.each方法用于遍历一个数组或对象,并对当前遍历的元素进行处理,在jQuery使用的频率非常大,下面就这个函数做了详细讲解(转)
  2
  3  * ---------------------------------------------------------- 
  4  * 函数介绍 
  5  * 
  6  * each函数通过jQuery.extend函数附加到jQuery对象中: 
  7  * jQuery.extend({ 
  8  *     each: function() {} 
  9  * }); 
10  * 如果对jQuery.extend函数源码还不了解,可以参考《jQuery源码分析-extend函数》一文 
11  * 
12  * jQuery.each方法用于遍历一个数组或对象,并对当前遍历的元素进行处理 
13  * jQuery.each方法可以为处理函数增加附带的参数(带参数与不带参数的回调使用方法不完全一致) 
14  * 
15  * ---------------------------------------------------------- 
16  * 使用说明 
17  * each函数根据参数的类型实现的效果不完全一致: 
18  * 1、遍历对象(有附加参数) 
19  * $.each(Object, function(p1, p2) { 
20  *     this;      //这里的this指向每次遍历中Object的当前属性值 
21  *     p1; p2;    //访问附加参数 
22  * }, ['参数1', '参数2']); 
23  * 
24  * 2、遍历数组(有附件参数) 
25  * $.each(Array, function(p1, p2){ 
26  *     this;      //这里的this指向每次遍历中Array的当前元素 
27  *     p1; p2;    //访问附加参数 
28  * }, ['参数1', '参数2']); 
29  * 
30  * 3、遍历对象(没有附加参数) 
31  * $.each(Object, function(name, value) { 
32  *     this;     //this指向当前属性的值 
33  *     name;     //name表示Object当前属性的名称 
34  *     value;    //value表示Object当前属性的值 
35  * }); 
36  * 
37  * 4、遍历数组(没有附加参数) 
38  * $.each(Array, function(i, value) { 
39  *     this;     //this指向当前元素 
40  *     i;        //i表示Array当前下标 
41  *     value;    //value表示Array当前元素 
42  * }); 
43  * ---------------------------------------------------------- 
44  * 
45  */ 
46 //jQuery.each(), $.each()  
47 //@param {Object}|{Array} object 需要遍历处理的对象或数组  
48 //@param {Function} callback 遍历处理回调函数  
49 //@param {Array} args callback回调函数的附加参数  
50 each: function(object, callback, args){  
51  
52     //当需要遍历的是一个对象时,name变量用于记录对象的属性名  
53     var name,      
54       
55     //当需要遍历的是一个数组时,i变量用于记录循环的数组下标  
56     i = 0,      
57       
58     //遍历数组长度,当需要遍历的对象是一个数组时存储数组长度  
59     //如果需要遍历的是一个对象,则length === undefined  
60     length = object.length,      
61       
62     //检查第1个参数object是否是一个对象  
63     //根据object.length排除数组类型,根据isFunction排除函数类型(因为函数也是对象)  
64     isObj = length === undefined || jQuery.isFunction(object);  
65       
66     //回调函数具有附加参数时,执行第一个分支  
67     //if(!!args) {  
68     if (args) {  
69           
70         //需要遍历的是一个对象  
71         if (isObj) {  
72               
73             //遍历对象属性,name是对象的属性名,再函数顶部已声明  
74             //许多人不太习惯for(var name in object)方式,如果不进行声明,则name就会被定义为全局变量  
75             for (name in object) {  
76               
77                 //调用callback回调函数,且回调函数的作用域表示为当前属性的值  
78                 //如:callback() {  this; //函数中的this指向当前属性值  
79                 //将each的第3个参数args作为回调函数的附加参数  
80                 if (callback.apply(object[name], args) === false) {  
81                   
82                     //如果在callback回调函数中使用return false;则不执行下一次循环  
83                     break;  
84                 }  
85             }  
86         }  
87         //需要遍历的是一个数组  
88         else {  
89           
90             //循环长度,循环变量i在函数顶部已定义  
91             //循环变量的自增在循环内部执行  
92             for (; i < length;) {  
93               
94                 //调用callback函数,与上面注释的callback调用一致  
95                 //此处callback函数中的this指向当前数组元素  
96                 if (callback.apply(object[i++], args) === false) {  
97                     break;  
98                 }  
99             }  
100         }  
101           
102     }  
103     //回调函数没有附加参数时,执行第二个分支  
104     else {  
105       
106         //需要遍历的是一个对象  
107         if (isObj) {  
108           
109             //循环对象的属性名,name在函数顶部已定义  
110             for (name in object) {  
111               
112                 //调用callback回调函数  
113                 //在不带参数的对象遍历中,作用域表示为当前属性的值  
114                 //且回调函数包含两个参数,第一个数当前属性名,第二个是当前属性值  
115                 //我觉得这句代码修改一下会更好用:if(callback.call(object, name, object[name]) === false) {  
116                 if (callback.call(object[name], name, object[name]) === false) {  
117                   
118                     //如果在callback回调函数中使用return false;则不执行下一次循环  
119                     break;  
120                 }  
121             }  
122         }  
123         //需要遍历的是一个数组  
124         else {  
125             //这里的for写法有点BT,解释为:  
126             //var value = object[0];  
127             //for(; i < length;) {  
128             //    if(false === callback.call(value, i, value)) {  
129             //        break;  
130             //    }  
131             //    value = object[++i];  
132             //}  
133             //同样,我觉得这里的代码稍加修改会更好用:  
134             //for (; i < length && false !== callback.call(object, i, object[i++]);) {  
135             //}  
136             for (var value = object[0]; i < length && callback.call(value, i, value) !== false; value = object[++i]) {  
137             }  
138         }  
139     }  
140       
141     //这里返回遍历的对象或数组,但object没有被更改,因此一般不给$.each()赋值  
142     //但是如果按照我在注释中所修改的写法来使用,且在callback回调函数中对this(即对object的引用)进行了修改  
143     //则这里返回的object是被修改后的对象或数组  
144     return object;  
145 }
  评论这张
 
阅读(84)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017