jQuery パート 4 (エレガントな反復)_jquery を読む

jQueryの操作は多くの場合
1、要素コレクション(セレクター)の取得
2、要素コレクションの操作
の2ステップに分かれており、2番目の要素コレクションを操作する主な方法がjQueryです。それぞれ。ソース コードを見ると、jQuery.each と this.each がそれぞれ 27 回と 31 回呼び出されていることがわかりました。これはそれがいかに重要であるかを示しています。
この記事では、jQuery.each メソッドと this.each メソッドを分析します。 jQuery.extend を使用して jQuery ライブラリを拡張する方法を見てみましょう。最後にzChain.jsに各メソッドを追加していきます。
ソースコードの一部は次のとおりです

コードをコピーします コードは次のとおりです:

jQuery.fn = jQuery.prototype = {
...
// 一致したセット内のすべての要素に対してコールバックを実行します。
// (引数の配列を使用して引数をシードできます) 、ただし、これは
// 内部でのみ使用されます。)
each: function( callback, args ) {
return jQuery.each( this, callback, args )
},
。 ..
}
jQuery.extend({
...
// args は内部使用のみです
each: function( object, callback, args ) {
var name , i = 0,
length = object.length,
isObj = length === unknown || 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;
}
}
}
// 各
} の最も一般的な使用のための、特別で高速なケース 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()。それぞれは jQuery.prototype (jQuery.fn) に直接リンクされているため、すべての jQuery オブジェクトには each メソッドが含まれています。
2. jQuery.each は jQuery.extend({}) によって拡張されます。前述したように、この方法で拡張されたメソッドは、jQuery クラスの静的メソッドである関数 jQuery にハングします。
3. jQuery().each メソッドには、 return jQuery.each( this, callback, args ) という 1 つの文だけがあります。つまり、jQuery オブジェクトの各メソッドの実装は、実際には jQuery の静的な jQuery.each を呼び出すことになります。したがって、jQuery.each がキーとなります。
以下は、object、callback、args の 3 つのパラメータを持つ jQuery.each の詳細な分析です。
1、オブジェクトは配列 (Array)、オブジェクト (Object)、または関数型 (Functoin) です。
2、コールバックはコールバック関数、型は関数です。 jQuery ライブラリ自体 使用する場合、ユーザーはこのパラメーターを使用しません。このパラメーターについてはここでは説明しません。

関数の最初の文は必要な変数を定義します

コードをコピーします コードは次のとおりです:

変数名、i = 0、

長さ = object.length、
isObj = 長さ === 未定義 || jQuery.isFunction( object );
length=object.length は理解しやすいです。
1. object が配列型 (Array) の場合、配列は
2 を持ちます。 object が関数型 (Functoin) の場合、長さは関数によって定義されたパラメータの数です。関数がパラメータを定義していない場合、長さは 0 で、長さ属性を持つオブジェクトの疑似配列です。引数、HTMLCollection、NodeList など)。

変数 isObj は、それがオブジェクト タイプであるかどうかを判断するために使用されます。これが真である場合は 2 つあります。
1. 変数の長さが未定義に等しい、つまり、渡されたオブジェクトに何もありません。長さ属性。
2. パラメータ オブジェクトは関数型です

ここでは、オブジェクトが jQuery オブジェクトであることを強調します。つまり、$(xx).each で発生すると、これが $.each に渡されます。例: return jQuery.each(this, callback, args)。ここでの最初のパラメータは jQuery オブジェクトであり、各 jQuery オブジェクトには長さ属性があります。

それぞれの
1 には次の 2 つの分岐があります。 isObj が true の場合、反復された各オブジェクトがキーと値のペアの形式で表示される場合は、for in ステートメントを使用します。コールバックのこれは値 object[name] で、コールバックの最初のパラメータはキー名、2 番目のパラメータは値 object[name] です。
2. isObj が false の場合、for ループを使用して配列を走査します (配列と同様)。コールバックの this は、配列内の 1 つの要素の値です。コールバックの最初のパラメーターは配列のインデックス i で、2 番目のパラメーターは配列の 1 つの要素の値です。
コールバックが呼び出された後の戻り値が false の場合、反復を停止し、ループから抜け出します。ここでは、 false に等しいかどうかを判断するために厳密な "===" が使用されています。ちなみに、関数が明示的な return を持たない場合、デフォルトでは undefine を返します。

要約すると、
1. 各 $(xx).each は、静的な jQuery.each を呼び出す jQuery オブジェクトのメソッドです。 jQuery オブジェクトを反復するためにのみ使用されます。jQuery オブジェクトは、(長さ属性を持ち、インデックスによってアクセスされる) 疑似配列とみなすことができます。
2. 各 $.each は関数 jQuery (つまり jQuery.each) の静的メソッドであり、オブジェクト、配列、疑似配列、関数を反復できます。

zChain-04.rar