jQuery源码分析-each函数

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值