ホームページ > 記事 > ウェブフロントエンド > jQuery コンストラクターの初期パラメーター分析_jquery
jQuery コンストラクターの初期パラメーター分析_jquery
- WBOYオリジナル
- 2016-05-16 15:59:281284ブラウズ
前回のエッセイでは、jQuery のコンストラクターを分析しました。jQuery オブジェクトには、実際のコンストラクターであるプロトタイプ メソッド init があり、init のプロトタイプ オブジェクトとの参照関係が維持されます。インスタンスは、jQuery のインスタンスであるかのように、jQuery のプロトタイプ メソッドを通常どおり呼び出すことができます。舞台裏のコンストラクター init がどのように記述されているかを見てみましょう:
init: function( selector, context, rootjQuery ) {
...
}
このメソッドは 3 つのパラメーターを受け入れ、最初の 2 つのパラメーターは jQuery メソッドによって渡されることがわかります
var jQuery = function( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init( selector, context, rootjQuery );
},
セレクターは原則として任意の値を入力できますが、すべての値が意味を持つわけではありません。このパラメーターは未定義、DOM 要素、文字列、関数、jQuery オブジェクト、および通常の JavaScript オブジェクトのみが有効です。通常は入力されますが、値は入力されません。
に入力しないとエラーが報告されますconsole.log($());
//[コンストラクター: 関数、初期化: 関数、セレクター: ""、jquery: "1.7.1"、サイズ: 関数…]
コンテキストは、実行コンテキストまたは実行スコープとして渡すことも、DOM 要素、jQuery オブジェクト、および通常の JavaScript オブジェクトのいずれかで渡すこともできます
パラメータ rootjQuery: ドキュメント オブジェクトを含む jQuery オブジェクト。 document.getElementById() が見つからない場合に使用されます。 selector はセレクター式でコンテキストが指定されていません。 selector は関数であり、実際には $(document) です。
以下は 12 の状況に分けられ、さまざまなパラメーターに従って 1 つずつ説明されます
1.selector は false に変換できます
// Handle $(""), $(null), or $(undefined)
if ( !selector ) {
return this;
}
ソース コード内のコメントは非常にわかりやすく書かれています。これらの 3 つの状況では、何も処理せずに直接返します。
2. パラメーター セレクターは DOM 要素です
例: $(document)
// Handle $(DOMElement)
if ( selector.nodeType ) {
this.context = this[0] = selector;
this.length = 1;
return this;
}
dom 要素である限り、ノード タイプが必要です。その後、このノードを jquery オブジェクトの最初の要素に変換し、それをコンテキストに割り当てます。length 属性は jQuery のプロトタイプ属性であり、デフォルトは 0 です。
// jQuery オブジェクトのデフォルトの長さは 0 です
長さ: 0、
ここに要素ができたら、length 属性を 1 に変更します。この操作を返すと、関数の実行結果は jQuery オブジェクトのままになるため、$(document).each() のようなチェーン呼び出しを実装できます。取得される最終オブジェクトは、{0:document,context:document,length:1....} に似ています。実際、DOM ノードを除くすべての状況が最終的にこの形式のオブジェクトになります。アラビア数字順に配置されているため、$(selector).get(0) の代わりに $(selector)[0] という形式を使用して DOM オブジェクトを取得できます。例:
<!doctype html>
<html>
<head>
<title></title>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
<script src='jquery-1.7.1.js'></script>
<script>
console.log($('div'));
/*[div, div, div, prevObject: jQuery.fn.jQuery.init[1], context: document, selector: "div", constructor: function, init: function…]
0: div
1: div
2: div
context: document
length: 3
prevObject: jQuery.fn.jQuery.init[1]__proto__: jQuery[0]
selector: "div"
.
*/
</script>
</html>
3. パラメータは特殊な文字列「body」です
ドキュメントオブジェクトには body 要素が 1 つしかないため、処理のために個別にリストされます
// The body element only exists once, optimize finding it
if ( selector === "body" && !context && document.body ) {
this.context = document;
this[0] = document.body;
this.selector = selector;
this.length = 1;
return this;
}
ここには同時に満たさなければならない条件が 3 つあります。$('body',document) のような一見普通の書き方でも、コンテキストが存在してはならないという 2 番目の条件がよくわかりません。この状況では「無視」されます。」
console.log($('body',document));
/*
jQuery.fn.jQuery.init[1]
0: body
context: document
length: 1
prevObject: jQuery.fn.jQuery.init[1]
selector: "body"
__proto__: jQuery[0]
*/
結果は $('body') と同じですが、body にはコンテキストが 1 つしかなく、ドキュメントしか追加できないためかもしれません。コンテキストが文書であるかどうかを判断する必要があります。 3 番目の条件は、document.body が存在する必要があることです。では、最初の 2 つの条件は満たされるが、document.body が存在しないのはどのような状況でしょうか。 1 つ目は、js コードが html コードよりも前にロードされる場合、これは初心者がよく犯す間違いです。通常、次のように書かなければなりません。
$(function(){...})
または
$(document).ready(function(){...})
実際、これら 2 つは同じであり、同じメソッドを呼び出します。DOM はこの部分をロードして、後で分析します。このために、次のようなテスト HTML コードを作成できます:
<!doctype html>
<html>
<head>
<title></title>
<script src='jquery-1.7.1.js'></script>
<script>
$('body')
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
console.log(selector+context+document.body);
// The body element only exists once, optimize finding it
if ( selector === "body" && !context && document.body ) {
this.context = document;
this[0] = document.body;
this.selector = selector;
this.length = 1;
return this;
}
を読み込まずに実行できないようにするためのようです。
4 番目のタイプは、上記の文字列シチュエーション以外の文字列です。次の記事でさらに多くのシチュエーションを残します。以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。