jQuery コア アーキテクチャの設計について話す

jQuery は誰にとっても馴染みのあるものではないため、ここでは jQuery が何であるか、またその機能については多くを説明しません。この記事の目的は、ソース コードの簡単な分析を通じて jQuery の核心について説明することです。 、および jQuery が JavaScript の高度な機能を活用して、このような優れた JavaScript ライブラリを構築する方法について説明します。

1 jQuery の最初の紹介

コア関数の観点から見ると、jQuery は 1 つの単純かつ普通のこと、つまりクエリのみを実行します。その構文は非常に簡潔かつ明確であるため、JavaScript が何であるかを知らずに jQuery を使用している人は、一言で言えば「シンプルでシンプル」です。

設計の観点から、jQuery が提供するメソッドは、静的メソッドとインスタンス メソッドの 2 つの主要なカテゴリに分類できます。静的メソッドは、$ を介して直接アクセスされるメソッドです。これらのメソッドは通常、DOM 要素を操作しませんが、ajax リクエストや文字列に対するいくつかの一般的な操作などのいくつかの共通ツールを提供します。さらに、jQuery は独自の拡張メカニズムも提供します。 extend メソッドを通じて必要なコンポーネントを記述します。インスタンス メソッドは静的メソッドとは異なり、jQuery によってクエリされた DOM 要素を操作するために使用されます。jQuery は $() を実行して、クエリされたすべての DOM 要素を配列メソッドに格納します。 this オブジェクトのプロトタイプ チェーンは、これらの DOM を操作するためのメソッドを実装します。たとえば、各 DOM 要素を走査するために each() メソッドが使用されます。

このオブジェクトは「配列として」格納される、つまり、jQuery によって構築されたオブジェクトは配列ではない、と先ほど述べたことにお気づきかもしれません。では、このオブジェクトは正確には何でしょうか? 実際、このオブジェクトは jQuery の核心であり、「jQuery オブジェクト」とも呼ばれます。したがって、この記事の焦点は、jQuery オブジェクトを分析して説明することです。

2 jQuery オブジェクト

通常、jQuery は次のように使用します。

$('div').each(function(index){
  //this ...
});

$('div') は実行後に戻ります。 jQuery オブジェクト。 each() メソッドは、このオブジェクト内の DOM 要素を走査します。まず $('div') の実行プロセスを見てみましょう (この記事のソース コードは jQuery 3.0 から取得しています):

jQuery = function( selector, context ) {
 
 return new jQuery.fn.init( selector, context );

}

このメソッドは $('div') のエントリ メソッドです。 $ は jQuery('div') と同等です。 このメソッドが実行することは 1 つだけであることがわかります。 jQuery.fn.init () 関数インスタンス オブジェクトを返すには、jQuery.fn.init とは何でしょうか。次のコードを見てみましょう:

init = jQuery.fn.init = function( selector, context, root ) {
 //... 
 return this;
}
init.prototype = jQuery.fn;

jQuery.fn.init と init は同じメソッドを参照します。このメソッドは、セレクターが条件を満たす DOM 要素をクエリして返しますが、返される内容は次のとおりです。後で分析します。まず次の文を見てみましょう。

init.prototype = jQuery.fn;
この文は何を意味しますか?この文では、init メソッドのプロトタイプ オブジェクトが jQuery.fn オブジェクトを指すようにしていますが、jQuery.fn とは一体何でしょうか? 引き続きコードを見てみましょう:

jQuery.fn = jQuery.prototype = {

 // The current version of jQuery being used
 jquery: version,

 constructor: jQuery,

 // The default length of a jQuery object is 0
 length: 0,

 // Execute a callback for every element in the matched set.
 each: function( callback ) {
  return jQuery.each( this, callback );
 },
  
 splice: arr.splice
};

スペースを節約するために、コードの一部を省略しています。ここからわかるように、jQuery.fn は実際には jQuery のプロトタイプ オブジェクトです。オブジェクトは、オブジェクトが動作するメソッドへの参照をいくつか定義します。この時点で少し混乱していると感じても、心配しないでください。アイデアを整理しましょう。jQuery は最初に init メソッドを定義し、次に init プロトタイプ オブジェクト プロトタイプに対する一連の操作メソッドを定義します。最後に、init メソッドのインスタンス オブジェクトが返されます。したがって、上記のプロセスは次のように簡略化できます (擬似コード表現):

var init = function(selector,context,root){
 //...
 return this;
}

init.prototype = {
 length:0,
 each:function(callback){
  //...
 },
 splice:[].splice
}

jQuery = function(selector,context,root){

 return new init(selector,context,root);
}

そこで問題は、なぜ jQuery.fn のメソッドが init のプロトタイプで直接定義されず、プロトタイプで定義されているのかということです。 jQueryの？

実は、これの目的はjQueryのクエリ効率を向上させることです。initのプロトタイプオブジェクトに直接定義すると、クエリを実行するたびにこのような巨大なプロトタイプオブジェクトが作成されてしまいます。このオブジェクトが jQuery のプロトタイプで定義されている場合、このオブジェクトは jQuery がロードされるときに初期化され、今後 $() が実行されるたびに常にメモリ内に存在します。init でプロトタイプをポイントするだけで済みます。毎回同じオブジェクトを作成するのではなく、このオブジェクトを作成します。

init 関数で返される this を見てみましょう。前回のブログで、関数内の this は実行時に常に呼び出し元を指すと述べました。では、init の呼び出し元は誰でしょうか?上記のコードでは呼び出し元が見つからないようですが、この時点で新しいオペレーターの動作の仕組みを深く理解する必要があるので、前回のブログの新しいオペレーターの説明を借りて、 の実行処理を実行します。 new init() は次のように分類されます:

new init(selector,context,root) = {

 var obj = {};

 obj.__proto__ = init.prototype;

 init.call(obj,selector,context,root);

 return typeof result === 'obj'? result : obj;

}