讀jQuery之四（優雅的迭代）

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