jQueryソースコード解析-01 全体アーキテクチャ解析_jquery

1. 全体的なアーキテクチャ

1.1 自己呼び出し匿名関数
jQuery ソース コードを開くと、まず次のコード構造が表示されます:

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

(function( window, unknown) {
// jquery code
})(window); >

1. これは自己呼び出しの匿名関数です。何のこと？最初の括弧内で匿名関数を作成し、2 番目の括弧内でそれをすぐに実行します
2. なぜこのような「自己呼び出し匿名関数」を作成するのでしょうか?
匿名関数を定義すると、「プライベート」名前空間が作成されます。この名前空間の変数とメソッドはグローバル名前空間を破壊しません。これは非常に便利であり、jQuery は何千もの JavaScript プログラムで使用されており、jQuery をインポートするプログラムで使用される変数と競合しないようにする必要があります。
3. 匿名関数は、文法的には関数リテラルと呼ばれます。JavaScript 構文では、匿名関数を括弧で囲む必要があります。実際には、自己呼び出しの匿名関数を記述する方法が 2 つあります (赤色でマークされた右括弧に注意してください)。 >

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

console.info( this ) ;

console.info( 引数 );
}( window ) );
(function() {
console.info( this );
console.info( 引数 ); >})( window );


4. なぜ window で渡す必要があるのでしょうか?
ウィンドウ変数を渡すことにより、jQuery コード ブロックでウィンドウにアクセスするときに、ウィンドウがグローバル変数からローカル変数に変更され、スコープ チェーンを最上位スコープにロールバックする必要がなくなります。ウィンドウに高速にアクセスできるようにするためです。これは重要ではありません。さらに重要なのは、コードを圧縮するときにウィンドウを最適化できることです。 (a,b){} )(window); // ウィンドウが

5 に最適化されるのはなぜですか?
自己呼び出し匿名関数のスコープ内で、未定義が本当に未定義であることを確認します。未定義は上書きして新しい値を与えることができるためです。
未定義 = "現在は定義されています";
alert( unknown );

ブラウザ テスト結果:
ブラウザ
テスト結果
つまり
定義されています
変更可能
Firefox
未定義
変更できません
chrome
現在定義されています
変更可能です
opera
現在定義されています
変更可能

6. ソースコードの最後にあるセミコロンに気づきましたか?
セミコロンはオプションですが、これを省略することはプログラミングの良い習慣ではありません。互換性と堅牢性を高めるために、コードの各行の後にセミコロンを追加して習慣にしてください。
1.2 全体的なアーキテクチャ
自己呼び出し匿名関数にどのような関数が実装されているかをコード順に見てみましょう:




コードをコピー

コードは次のとおりです: (function( window, unknown ) { // jQuery オブジェクトを構築します var jQuery = function( selector, context ) { return new jQuery.fn.init( selector, context, rootjQuery );

}

// ユーティリティ
// 非同期キュー Deferred
// ブラウザ テスト サポート
//データキャッシュ データ
// キュー
// 属性操作 属性
// イベント処理 イベント
// セレクター シズル
// DOM トラバーサル
// DOM 操作
/ / CSS 操作
// 非同期リクエスト Ajax
// アニメーション FX
// 座標とサイズ
window.jQuery = window.$ =
})(window); >

上記のコメントから、jQuery のソース コード構造は非常に明確で整理されており、コードほど難解で混乱するものではありません。
以下の章は基本的にこの順序で展開します。

1.3 次のセクションのプレビュー

jQuery のソース コードを見てみると、正規表現が多く、多くの JavaScript 開発者が基本的な知識を無視していることがすぐにわかります。この障害をクリアするために、次の章ではまず JavaScript 正規表現の基本知識を確認し、次に jQuery の正規表現を詳しく分析します。

ソースコードの解析を正式に開始する前に、準備しておく必要のある基礎知識はありますか?
もちろんです。たとえば、JavaScript API のクラスとオブジェクトに詳しくない場合は、少なくともリファレンス マニュアルを手元に用意する必要があります。
通常のルールを除き、他の知識ポイントは分析プロセス全体を通じて説明され、新しい章は予定されていません。