快捷導(dǎo)航

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

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

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

jQuery的操作往往是分兩步
1，獲取元素集合(選擇器)
2，操作元素集合
而第二步操作元素集合的主要方法就是jQuery.each。查看源碼，我們發(fā)現(xiàn)jQuery.each及this.each分別調(diào)用了27次和31次?？梢?jiàn)它是多么的重要。
這篇將分析下jQuery.each及this.each方法?？纯此麄?nèi)绾闻cjQuery.extend一起擴(kuò)展jQuery庫(kù)。最后我會(huì)給zChain.js加上each方法。
部分源碼如下

復(fù)制代碼代碼如下:

 
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）上的，因此每個(gè)jQuery對(duì)象都包含each方法。
2，jQuery.each是通過(guò)jQuery.extend({})方式擴(kuò)展的。前面已經(jīng)說(shuō)過(guò)，通過(guò)這種方式擴(kuò)展的方法將掛在function jQuery上，即為jQuery類(lèi)的靜態(tài)方法。
3，jQuery().each方法中只有一句：return jQuery.each( this, callback, args )。即jQuery對(duì)象的each方法實(shí)現(xiàn)上其實(shí)就是調(diào)用jQuery靜態(tài)的jQuery.each。因此jQuery.each才是關(guān)鍵所在。
下面詳細(xì)分析jQuery.each，它有三個(gè)參數(shù)object, callback, args。
1，object可以為數(shù)組(Array)，對(duì)象(Object)，甚至是函數(shù)類(lèi)型(Functoin)；
2，callback是回調(diào)函數(shù)，類(lèi)型為function；
3，args為jQuery庫(kù)自身使用，使用者不會(huì)用到該參數(shù)，這里暫不討論該參數(shù)情況。

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

復(fù)制代碼代碼如下:

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

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

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

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

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

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

您可能感興趣的文章: