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 オブジェクトが実際には次のようなオブジェクトであることがわかります。

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(){},
......
}

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;

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