jqueryのconstructor_jqueryの実装コードまとめ

明らかに、このステップを実現するための実装は非常に複雑です。この実装は、jQuery の実際のコンストラクターである init メソッドです。バージョンアップとともに機能も強化され、どんどん長くなってきています。
バージョン 1.3 は 2009 年 1 月 13 日にリリースされました

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

init: function( selector, context ) {
// 選択が提供されていることを確認します
selector = selector ||
// ノード パラメータを処理し、新しいドキュメントに属性を直接追加しますインスタンス
if ( selector.nodeType ) {
this[0] = セレクター;
this.context = セレクター;
}
// 文字列パラメーターの処理
if ( typeof selector === "string" ) {
// HTML フラグメントであるか ID であるかを判断します
var match = QuickExpr.exec( selector );
if ( match && (match[1] || !context) ) {
// HTML フラグメントの場合、ノードから構築された配列を変換します
if ( match[1] )
selector = jQuery.clean( [ match[1] ], context );
// ID の場合、この要素を検索し、見つかった場合は空の配列に入れます
else {
var elem = document.getElementById( match[3] ) ;
// 要素が見つかったことを確認します
if ( elem ){
// IE の ID と NAME の混同のバグに対処します。 Opera
if ( elem.id != match[3] )
return jQuery().find( selector );
var ret = jQuery( elem );
ret.context = document; 🎜>ret.selector = selector;
return ret;
}
selector = [];
}
} else
//Sizzle を使用して他の CSS 式を処理し、インスタンスを生成しますreturn
return jQuery( context ).find( selector );
// 関数パラメータを直接処理します domReady
} else if ( jQuery.isFunction( selector ) )
return jQuery( document ). ready( selector );
// jQuery オブジェクトのパラメーターを処理します。その 2 つのプロパティを新しいインスタンスに割り当てます。
if ( selector.selector && selector.context ) {
this.selector = selector.selector; 🎜>this.context = selector.context;
}
//上記で取得したノード配列を変換し、setArray メソッドを使用してインスタンス要素に変換します
return this.setArray(jQuery.makeArray(selector) );
},


バージョン 1.32 2009-02-19 リリース

コードをコピー

コードは次のとおりです。 init: function( selector, context ) { // 選択が提供されていることを確認します。

selector = selector || document; // ノードパラメータを処理し、新しいインスタンスに属性を直接追加します。

if ( selector.nodeType ) {
this[0] = selector;
this.context = selector; ;
return this;
}
//処理文字列パラメータ
if ( typeof selector === "string" ) {
// HTML フラグメントか ID かを判断します
var match = QuickExpr.exec( selector );
if ( match && ( match[1] || !context) ) {
// HTML フラグメントの場合は、ノードから構築された配列を変換します
if ( match[1] )
selector = jQuery.clean( [ match[1] ], context );
else {
var elem = document.getElementById( match[3] );
// ID の場合、この要素を検索し、見つかった場合は空の配列に入れます
if ( elem && elem.id != match[3] )
return jQuery() .find( selector );
//バージョン 1.3 ではいくつかの最適化が行われ、より簡潔になりました。
var ret = jQuery( elem || [] ); 🎜>ret.selector = selector;
return ret;
}
} else
//Sizzle を使用して他の CSS 式を処理し、インスタンスを生成して
return jQuery( context ).find( selector );
// 関数パラメータを処理し、domReady 操作を実行します
} else if ( jQuery.isFunction( selector ) )
return jQuery( document ).ready( selector ); jQuery オブジェクトのパラメーターを作成し、その 2 つのプロパティを新しいインスタンスに割り当てるだけです。
if ( selector.selector && selector.context ) {
this.selector = selector.selector;
}
//ここでは、要素コレクション (HTMLCollection) とノード コレクション (NodeList) の転送を可能にする、バージョン 1.3 への拡張機能をいくつか示します。
// 要素配列は文字列を使用して変換できます。ユーザーによって直接渡される場合もあります
return this.setArray(jQuery.isArray( selector ) ? selector : jQuery.makeArray (selector));
},


バージョン 1.4 2010-01-13 にリリース




コードをコピー


コードは次のとおりです:

init: function( selector, context ) {
var match, elem, ret, doc;
// 空の文字列、null、未定義のパラメータ (新しく追加された) を処理し、非常に純粋なインスタンスを返します。 of
if ( !selector ) {
return this;
}
// ノードパラメータを処理し、新しいインスタンスに属性を直接追加します
if ( selector.nodeType ) {
this .context = this[0] = selector;//
this.length = 1;
return this;
}
//文字列パラメータの処理
if ( typeof selector == = "string" ) {
// HTML フラグメントか ID かを判断します
match = QuickExpr.exec( selector );
if ( match && (match[1] || !context) ) {
//HTML フラグメントの場合
if ( match[1] ) {
//ドキュメント オブジェクトを取得
doc = (context ? context.ownerDocument || context : document) ;
// 単一タグの場合は、document.createElement を直接使用してこのノードを作成し、配列に配置します。
ret = rsingleTag.exec( selector );
if ( ret ); >// Pure JS オブジェクトが後に続く場合は、対応する属性またはスタイルをこのノードに追加します
if ( jQuery.isPlainObject( context ) ) {
selector = [ document.createElement( ret[1] ) ]; >jQuery.fn.attr.call(セレクター, コンテキスト, true );
} else {
selector = [ doc.createElement( ret[1] ) ];
/ /buildFragment を変更してノード コレクション (NodeList) を生成します
ret = buildFragment( [ match[1] ], [ doc ] );
selector = (ret.cacheable ? ret.fragment.cloneNode(true) : ret .fragment).childNodes;
}
} else {
// ID の場合、この要素を検索し、見つかった場合は空の配列に入れます
elem = document .getElementById( match[2] );
if ( elem ) {
// IE と Opera における ID と NAME の混同のバグに対処する
if ( elem.id !== match[2] ] ) {
return rootjQuery.find( selector );
}
//ここでいくつかの最適化も行われていますが、別の jQuery インスタンスを生成するのは愚かであることがわかりました。 1;
this[0] = elem;
this.context = document;
return this;この文字は非常に単純なラベル セレクターです。基本的に Sizzle ルートに進む必要はなく、getElementsByTagName を直接取得します。非常に優れた最適化
} else if ( !context && /^w $/.test( selector ) ) {
this.selector = selector;
this.context = document;
selector = document.getElementsByTagName( selector );
// 2 番目のパラメーターが存在しない場合、または jQuery オブジェクトの場合は、それを使用します。 find を呼び出してターゲット ノードを見つけます (Sizzle ルートを選択します)
} else if ( !context || context.jquery ) {
return (context || rootjQuery).find( selector ); / HANDLE: $(expr, context)
// (これは $(context).find(expr)
} と同等です else {
// 2 番目のパラメータが指定されている場合要素ノードを jQuery オブジェクトに変換し、Sizzle ルートを実行します。
return jQuery( context );
}
// 関数パラメータを直接処理します domReady
} else if ( jQuery .isFunction( selector ) ) {
return rootjQuery.ready( selector );
}
// jQuery オブジェクトのパラメータを処理し、その 2 つのプロパティを新しいインスタンスに割り当てます
if (selector.selector !== 未定義) {
this.selector = selector.selector;
this .context = selector.context;
}
//makeArray が 2 番目のパラメータを受け入れることができるため、ここでいくつかの変更が加えられています。パラメータ (配列または配列のようなもので、マージ操作と同等)
return jQuery.isArray( selector ) ?
this.setArray( selector ) ://push メソッドを内部的に使用して、通常のオブジェクトを配列のようなオブジェクトに変換
jQuery.makeArray( selector, this );
} , >コードは次のとおりです:

init: function( selector, context ) {
var match, elem, ret, doc;
// 空の文字列、null、未定義のパラメータを処理します
if ( !selector ) {
return this;
}
// ノードパラメータを処理します
if ( selector.nodeType ) {
this.context = this[0] = selector;
return this;
}
// 本体パラメータの処理 (new)
if ( selector === "body" && !context ) {
this.context = document; this[0] = document.body;
this.selector = "body";
return this;
}
// に分割された文字列パラメータ7 つの状況:
//①単一ラベル、オブジェクト属性パッケージあり---> jQuery.merge
//②単一ラベル、オブジェクト属性パッケージなし---> jQuery.merge
//③複合HTML フラグメント ---> buildFragment jQuery.merge
//④見つかった要素の ID とは異なる ID セレクター ---> getElementById Sizzle PushStack
//⑤ ID 選択デバイス見つかった要素の ID ---> getElementById 単純な属性の追加
//⑥ タグセレクター ---> getElementsByTagName jQuery.merge
///⑦ その他の CSS 式 ---> >if ( typeof selector === "string" ) {
match = QuickExpr.exec( selector );
if ( match && (match[1] || !context) ) {
if ( match [1] ) {
doc = (context ? context.ownerDocument || context : document);
ret = rsingleTag.exec( selector );
if ( ret ) {
if ( jQuery. isPlainObject( context ) ) {
selector = [ document.createElement( ret[1] ) ];
jQuery.fn.attr.call( selector, context, true ); selector = [ doc.createElement( ret[1] ) ];
}
} else {
ret = buildFragment( [ match[1] ],
selector = (ret) .cacheable ? ret.fragment.cloneNode(true) : ret.fragment).childNodes;
}
return jQuery.merge(this, selector );
elem = document.getElementById ( match[2] );
if ( elem ) {
if ( elem.id !== match[2] ) {
return rootjQuery.find( selector ); this.length = 1;
this[0] = elem;
this.selector = セレクター;
>} else if ( !context && /^w $/.test( selector ) ) {
this.selector = selector;
this.context = document;
selector = document.
return jQuery.merge( this, selector );
} else if ( !context || context.jquery ) {
return (context || rootjQuery).find( selector ); {
return jQuery( context ).find( selector );
}
// 関数パラメータを直接処理します domReady
} else if ( jQuery.isFunction( selector ) ) {
return rootjQuery. ready( selector );
}
//jQuery オブジェクトのパラメーターを処理します
if (selector.selector !== unknown) {
this.selector = selector.selector; selector.context;
}
// 配列であっても、配列のようなもの (NodeList など) であっても、jQuery.makeArray を使用してインスタンスに新しい要素を追加します
return jQuery.makeArray( selector, this );


makeArray メソッドと merge メソッドが付属しています。




コードをコピーします。


コードは次のとおりです。


makeArray: function( array, results) {
var ret = results ||
if ( array ! = null ) {
// ウィンドウ、文字列 (および関数) にも「長さ」があります

// 追加の typeof 関数チェックは、Safari 2 でのクラッシュを防ぐためのものです
// (参照: # 3039)
if ( array.length == null || typeof array === "string" || jQuery.isFunction(array) || (typeof array !== "function" && array.setInterval) ) {

Push.call( ret, array ); } else { jQuery.merge( ret, array ) } return }; >merge : function( first, Second ) { var i = first.length, j = 0;

if ( typeof Second.length === "number" ) {

for ( var l = Second .length ; j first[i] = Second[j];
} else {
while ( Second[j] !== 未定義) 🎜> first[ i ] = Second[ j ];
}
}
first.length = i;
},


2011 -01 -23 にリリースされたバージョン 1.5 では、init メソッドが 1.42 からほとんど変更されていません。変更されたのは 2 つだけです:




コードをコピー


コードは次のとおりです:


//1.42
- ret = buildFragment( [ match[1] ], [ doc ] );
- selector = (ret.cacheable ? ret.fragment.cloneNode(true) : ret.fragment).childNodes;
//1.5
ret = jQuery.buildFragment( [ match[1] ], [ doc ] ); .cacheable ? jQuery .clone(ret.fragment) : ret.fragment).childNodes;
//1.42
- return jQuery( context ).find( selector ); this.constructor( context ).find( selector );//新しいインスタンスを生成することが目的ではありません


2011 年 5 月 2 日にリリースされた Jquery 1.6 は、HTML フラグメントの判定が厳しくなったことを除いて、あまり変わっていません:

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

// 扱うのは HTML 文字列ですか? それとも ID ですか?
if ( selector.charAt(0) === "" && selector.length >= 3 ) {
// で始まる文字列は HTML であると仮定し、正規表現チェックをスキップします。 🎜>match = [ null, selector, null ];
} else {
match = QuickExpr.exec( selector );
}

一般的には、jQuery の構造この楽器は非常に完成度が高く、基本的には「何も変えられない」というところまで来ています。ただし、効率的な操作を確保するには、セレクターに関するある程度の知識と buildFragment メソッドの操作の理解も必要です。これら 2 つはあまりにも一般的に使用されますが、最もパフォーマンスを消費するためです。