讀jQuery之四（優(yōu)雅的迭代）

更新時間：2011年06月20日 23:29:21 作者：

前面提到jQuery庫如何通過其中的jQuery.extend及jQuery.fn.extend去擴展自身的。第三篇給zChain.js添加了常用選擇器，但目前為止zChain.js仍然做不了任何事情。

jQuery的操作往往是分兩步
1，獲取元素集合(選擇器)
2，操作元素集合
而第二步操作元素集合的主要方法就是jQuery.each。查看源碼，我們發(fā)現(xiàn)jQuery.each及this.each分別調用了27次和31次?？梢娝嵌嗝吹闹匾?
這篇將分析下jQuery.each及this.each方法?？纯此麄內绾闻cjQuery.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({})方式擴展的。前面已經(jīng)說過，通過這種方式擴展的方法將掛在function jQuery上，即為jQuery類的靜態(tài)方法。
3，jQuery().each方法中只有一句：return jQuery.each( this, callback, args )。即jQuery對象的each方法實現(xiàn)上其實就是調用jQuery靜態(tài)的jQuery.each。因此jQuery.each才是關鍵所在。
下面詳細分析jQuery.each，它有三個參數(shù)object, callback, args。
1，object可以為數(shù)組(Array)，對象(Object)，甚至是函數(shù)類型(Functoin)；
2，callback是回調函數(shù)，類型為function；
3，args為jQuery庫自身使用，使用者不會用到該參數(shù)，這里暫不討論該參數(shù)情況。

函數(shù)中第一句定義必要的變量

復制代碼代碼如下:

 
var name, i = 0, 
length = object.length, 
isObj = length === undefined || jQuery.isFunction( object ); 

length=object.length很好理解，有三種情況length不為undefined
1， object為數(shù)組類型(Array)時，數(shù)組具有l(wèi)ength屬性；
2， object為函數(shù)類型(Functoin)時，length為該函數(shù)定義的參數(shù)個數(shù)，如果該函數(shù)沒有定義參數(shù)，length為0；
3，具有l(wèi)ength屬性的object偽數(shù)組（如:arguments,HTMLCollection,NodeList等）。

變量isObj用來判斷是否是對象類型，有兩種情況為true：
1，變量length等于undefined，即所傳object沒有l(wèi)ength屬性。
2，參數(shù)object為函數(shù)類型

這里強調下object為jQuery對象。即當在$(xx).each時發(fā)生，這時會將this傳到$.each中。如：return jQuery.each( this, callback, args )。這里第一個參數(shù)this即為jQuery對象，每個jQuery對象是具有l(wèi)ength屬性的。

each中有以下兩個分支
1，如果isObj為true，則用for in語句去遍歷該對象，如果把每個迭代的對象看出鍵值對形式的話。callback中的this是值object[name]，callback第一個參數(shù)是鍵name，第二個參數(shù)是值object[name]。
2，如果isObj為false，則用for循環(huán)去遍歷數(shù)組（類數(shù)組）。callback中的this是數(shù)組中單獨元素的值value，callback第一參數(shù)是數(shù)組的索引i，第二參數(shù)是數(shù)組單獨元素值value。
callback調用后返回值如果是false則停止迭代，跳出循環(huán)。這里用嚴格"==="來判斷是否與false相等。順便提一下，函數(shù)如果沒有顯示的return，默認返回undefined。

總結下：
1，$(xx).each的each是jQuery對象的方法，它調用靜態(tài)的jQuery.each。它只用來迭代jQuery對象，jQuery對象可以看成一個偽數(shù)組（具有l(wèi)ength屬性，用索引方式存?。?
2，$.each的each是function jQuery的靜態(tài)方法(即jQuery.each)，可以迭代對象，數(shù)組，偽數(shù)組，函數(shù)。
zChain-04.rar

您可能感興趣的文章: