jQuery の内部原理と実装方法の簡単な分析_jquery

私はこの期間に jQuery のソースコードを勉強してきました。jQuery の開発が進んだおかげで、学習教材も以前よりも見つけやすくなりました。 Gao Yun jQuery1.6.1 ソース コード分析シリーズなどの優れたリソース。これらのチュートリアルでは、jQuery の内部原理と実装方法が詳細に分析されており、jQuery の学習と理解に非常に役立ちます。ただし、個人的には、jQuery の全体的な結果を十分に理解していないチュートリアルが多いと考えており、jQuery の内部実装全体について説明するようにしています。

ご存知のとおり、jQuery を呼び出すには 2 つの方法があります。1 つは、$("h1") を介してすべての h1 要素を選択するなど、パラメーターを渡すことによって DOM 選択を実装する高レベルの実装です。 ajax 操作が $.ajax を通じて実装されている場合、これは比較的低レベルの実装です。では、これら 2 つの方法の違いは何でしょうか? typeof 関数を使用して $('h1') と $.ajax を検出します。型はそれぞれオブジェクトと関数です。jQuery を少し学習したことがある人なら、前者は jQuery オブジェクトを返します。 jQuery オブジェクトとは何ですか? jQuery と jQuery の関係は何ですか?まず、for(var i in $(”)) document.write(i ” :::” $(””)[i] ””); を通じて jQuery オブジェクトのプロパティと対応する値を出力しましょう。コンソールに $("*") を入力すると、jQuery オブジェクトが実際には次のようなオブジェクトであることがわかります。

それでは、jQuery の実装がこれに似ているのではないかと推測してみましょう:

function jQuery(){
 this[0]="Some DOM Element";
 this[1]="Some DOM Element";
 this[2]="Some DOM Element";
 this.length=3;
 this.prevObject="Some Object";
 this.context="Some Object";
 this.selector="Some selector";
}
jQuery.prototype={
get:function(){},
each:function(){},
......
}

これらのコードは new 演算子を使用して上記のプロパティを持つ jQuery オブジェクトを作成できますが、実際には jQuery を呼び出して jQuery オブジェクトを作成するときに new 演算子を使用しません。これはどのように実現されるのでしょうか? jQuery の実装を見てみましょう:

var jQuery = function( selector, context ) {
 // The jQuery object is actually just the init constructor 'enhanced'
 return new jQuery.fn.init( selector, context, rootjQuery );
}
jQuery.fn=jQuery.prototype={
 jquery: core_version,
 init:function(selector,context){
 //some code
 return this;
 }
 //some code there
 //......
}
jQuery.fn.init.prototype=jQuery.fn;

ここには非常に賢い点がいくつかあります。最初のポイントは、new を使用せずにオブジェクトを作成する目的を達成するために、jQuery プロトタイプ属性の init メソッドを使用してオブジェクトを作成することです。2 番目のポイントは、init で this ポインターを処理することです。方法。 init を呼び出して jQuery インスタンスを返すと、このインスタンスは jQuery.prototype のプロパティを継承する必要があり、init 内のこのインスタンスは jQuery.prototype のプロパティを継承することがわかります。ただし、init のこれにはスコープ制限があり、jQuery.prototype の他のプロパティにアクセスすることはできません。jQuery は、「jQuery.fn.init.prototype=jQuery.fn」という文を通じてそのプロトタイプを jQuery.fn にポイントします。 init によって生成されたオブジェクトには jQuery.fn のプロパティがあります。

この時点で、jQuery の基本的なプロトタイプが明らかになりました。ここには 2 つのオブジェクトがあり、次の関係図に示すように、1 つは jQuery コンストラクター、もう 1 つはこのコンストラクターによって生成されたオブジェクト (これを jQuery オブジェクトと呼び、通常のオブジェクトと変わりません) です。 >

jQuery コンストラクターと jQuery.prototype には独自のプロパティとメソッドがあることがわかります。これら 2 つのオブジェクトの呼び出しメソッドは異なります。これらのオブジェクトは、独自のプロパティとメソッドを拡張するために使用されます。 jQuery 内では、extend の実装は実際には同じコードに依存しています。これについては、後のソース コード分析で詳細に分析します。