jQuery源碼分析-each函數

標籤：style   class   blog   c   code   java   

本文部分截取自且行且思

jQuery.each方法用於遍曆一個數組或對象,並對當前遍曆的元素進行處理,在jQuery使用的頻率非常大，下面就這個函數做了詳細講解：

複製代碼代碼/*!    * jQuery源碼分析-each函數   * jQuery版本:1.4.2   *   * ----------------------------------------------------------   * 函數介紹   *   * each函數通過jQuery.extend函數附加到jQuery對象中：   * jQuery.extend({   *     each: function() {}   * });   * 如果對jQuery.extend函數源碼還不瞭解,可以參考《jQuery源碼分析-extend函數》一文   *   * jQuery.each方法用於遍曆一個數組或對象,並對當前遍曆的元素進行處理   * jQuery.each方法可以為處理函數增加附帶的參數(帶參數與不帶參數的回調使用方法不完全一致)   *   * ----------------------------------------------------------   * 使用說明   * each函數根據參數的類型實現的效果不完全一致：   * 1、遍曆對象(有附加參數)   * $.each(Object, function(p1, p2) {   *     this;      //這裡的this指向每次遍曆中Object的當前屬性值   *     p1; p2;    //訪問附加參數   * }, [‘參數1‘, ‘參數2‘]);   *   * 2、遍曆數組(有附件參數)   * $.each(Array, function(p1, p2){   *     this;      //這裡的this指向每次遍曆中Array的當前元素   *     p1; p2;    //訪問附加參數   * }, [‘參數1‘, ‘參數2‘]);   *   * 3、遍曆對象(沒有附加參數)   * $.each(Object, function(name, value) {   *     this;     //this指向當前屬性的值   *     name;     //name表示Object當前屬性的名稱   *     value;    //value表示Object當前屬性的值   * });   *   * 4、遍曆數組(沒有附加參數)   * $.each(Array, function(i, value) {   *     this;     //this指向當前元素   *     i;        //i表示Array當前下標   *     value;    //value表示Array當前元素   * });   * ----------------------------------------------------------   *   */  //jQuery.each(), $.each()   //@param {Object}|{Array} object 需要遍曆處理的對象或數組   //@param {Function} callback 遍曆處理回呼函數   //@param {Array} args callback回呼函數的附加參數   each: function(object, callback, args){         //當需要遍曆的是一個對象時,name變數用於記錄對象的屬性名稱       var name,                  //當需要遍曆的是一個數組時,i變數用於記錄迴圈的數組下標       i = 0,                  //遍曆數組長度,當需要遍曆的對象是一個數組時儲存數組長度       //如果需要遍曆的是一個對象,則length === undefined       length = object.length,                  //檢查第1個參數object是否是一個對象       //根據object.length排除數群組類型，根據isFunction排除函數類型(因為函數也是對象)       isObj = length === undefined || jQuery.isFunction(object);              //回呼函數具有附加參數時,執行第一個分支       //if(!!args) {       if (args) {                      //需要遍曆的是一個對象           if (isObj) {                              //遍曆對象屬性,name是對象的屬性名稱,再函數頂部已聲明               //許多人不太習慣for(var name in object)方式,如果不進行聲明,則name就會被定義為全域變數               for (name in object) {                                  //調用callback回呼函數,且回呼函數的範圍表示為當前屬性的值                   //如:callback() {  this; //函數中的this指向當前屬性值                   //將each的第3個參數args作為回呼函數的附加參數                   if (callback.apply(object[name], args) === false) {                                          //如果在callback回呼函數中使用return false;則不執行下一次迴圈                       break;                   }               }           }           //需要遍曆的是一個數組           else {                          //迴圈長度,迴圈變數i在函數頂部已定義               //迴圈變數的自增在迴圈內部執行               for (; i < length;) {                                  //調用callback函數,與上面注釋的callback調用一致                   //此處callback函數中的this指向當前數組元素                   if (callback.apply(object[i++], args) === false) {                       break;                   }               }           }                  }       //回呼函數沒有附加參數時,執行第二個分支       else {                  //需要遍曆的是一個對象           if (isObj) {                          //迴圈對象的屬性名稱,name在函數頂部已定義               for (name in object) {                                  //調用callback回呼函數                   //在不帶參數的對象遍曆中,範圍表示為當前屬性的值                   //且回呼函數包含兩個參數,第一個數當前屬性名稱,第二個是當前屬性值                   //我覺得這句代碼修改一下會更好用：if(callback.call(object, name, object[name]) === false) {                   if (callback.call(object[name], name, object[name]) === false) {                                          //如果在callback回呼函數中使用return false;則不執行下一次迴圈                       break;                   }               }           }           //需要遍曆的是一個數組           else {               //這裡的for寫法有點BT,解釋為：               //var value = object[0];               //for(; i < length;) {               //    if(false === callback.call(value, i, value)) {               //        break;               //    }               //    value = object[++i];               //}               //同樣,我覺得這裡的代碼稍加修改會更好用:               //for (; i < length && false !== callback.call(object, i, object[i++]);) {               //}               for (var value = object[0]; i < length && callback.call(value, i, value) !== false; value = object[++i]) {               }           }       }              //這裡返回遍曆的對象或數組,但object沒有被更改,因此一般不給$.each()賦值       //但是如果按照我在注釋中所修改的寫法來使用,且在callback回呼函數中對this(即對object的引用)進行了修改       //則這裡返回的object是被修改後的對象或數組       return object;   }