jQuery_jquery の全体的なアーキテクチャの理解と分析

jQuery スクリプトの全体的な構造は次の形式になります。

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

( function( window, unknown ) {
// jQueryvar のローカル コピーを定義します。 jQuery = function( selector, context
) { // jQuery オブジェクトは
実際には単なる init コンストラクター
'拡張' return new
jQuery.fn.init( selector, context ); },
// jQuery をグローバル objectwindow.jQuery =
window.$ =
}) に公開します。 (窓);

私はそのような構造をよく理解していません、そして、私は He He が何と呼んでいるのかしか知りません。

Technorati タグ: JQuery、Javascript、Web フロントエンド

今日、いくつかの情報を調べて得たものです。いくつかの基本的な理解。
実際には、グローバル関数が定義されています。最初の括弧は匿名関数であり、次の括弧は関数呼び出しです。これは次のように理解できます:

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

var fun=function(window, unknown ){
... ...
}
fun(window);

スクリプト全体は匿名関数 (ここでは mainFn と呼びます) )、関数はロード時に 2 つのパラメーターを受け取り、実行中に 1 つのパラメーター ウィンドウのみを渡します。この記述の意味を説明します。詳細:
2. ウィンドウ関数の実行 ウィンドウが渡される場合、渡されるウィンドウはグローバル オブジェクト (通常は Window)
3. 属性および window=this として mainFn 関数に渡されます。そのパラメータは
4 に格納されます。プロトタイプ チェーン内の変数を見つけるための戦略は次のとおりです (入れ子になっていない関数): まず、
5 を呼び出すオブジェクトを見つけます。グローバルオブジェクトを検索することで、mainFn全体で使用するウィンドウの検索効率が高くなります
6. unknown 実行時に第2引数が渡されないため、変数unknownの値は初期バージョンでは未定義になります
7このブラウザのグローバル オブジェクトには、unknown 属性がない可能性があるため、通常は
8 を使用しないようにします。最後に、jQuery ライブラリの最も重要なオブジェクトである jQuery を window オブジェクトのプロパティにし、「$」と省略できます。

その他の補足情報:
JQuery は優れた JavaScript ライブラリで、最近これを使って JavaScript を作成し、ソースコードを確認しました。
全体的かつグローバルなビューを見てみましょう。ほとんどすべての jQuery ソース コードは次のコードにあります。




コードをコピーします

コードは次のとおりです: (function() {

//...

})(); >最初の括弧内 これは匿名関数です。2 番目の括弧は、最初の括弧内のコードがすぐに実行されることを意味します。
まず、JavaScript には名前空間がないことを理解してください。JavaScript の関数とオブジェクトが他の関数と競合しないようにするために、ここでは JavaScript のトリックが使用されています。つまり、すべての JavaScript 関数とオブジェクトは匿名関数で定義されています。 、定義された関数とオブジェクトの有効なスコープを確保し、名前空間の役割を果たします。スコープはこの匿名関数内にあるので、他の人はどのように使用できるでしょうか。以下のコードを見てみましょう:

var jQuery = window.jQuery = function(selector, context) {
//… …
};

ここで、jQuery ライブラリの最も重要なオブジェクトである jQuery が wi​​ndow オブジェクトのプロパティになるため、jQuery はドキュメントと同じように他の場所でも使用できます (ドキュメントもウィンドウのプロパティ)。 jQuery を使用したことのある友人は驚かれるかもしれません。私は jQuery オブジェクトを使用せず、常に $ を使用します。はい、これは同じ名前の jQuery オブジェクトです:

window.$ = jQuery; これで理解できました。

このライブラリの構造は次のとおりです:




コードをコピーします


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

1. (function(window, unknown){ 2. var document = window.document; 3. var jQuery = ... 4. ... 5. .. . 6. })(ウィンドウ);

(関数(ウィンドウ、未定義){ var document = window.document; var jQuery = })(ウィンドウ) ;

The entire script is an anonymous function (let’s call it mainFn for now). It starts executing when the function is loaded. mainFn can receive two parameters and only passes one parameter window during execution.
1. Explain this in detail The meaning of writing:
2. When the window function is executed, the window will be passed in. This passed in window is the global object (usually Window)
3. An attribute and window=this, and passed into the mainFn function When used as its parameter, it will be stored in the calling object of
4. mainFn. The strategy for finding variables in the prototype chain is (non-nested functions): first look for the calling
5. object, and then look for the global object, so this makes the window used in the entire mainFn more efficient to search
6. undefined Since the second parameter is not passed during execution, the value of the variable undefined is undefined. Early version
7. This The global object in the browser may not have an undefined attribute, so it cannot be used directly. Usually avoid
8. The way to write this problem is window.undefined = window.undefined