Jquery中的each()使用幫助手冊


/*!   
 * 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;   
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章