jQuery.noConflict()_jquery を簡単に処理する

jQuery は最も広く使用されているフロントエンド フレームワークの 1 つであり、これに基づいて多数のサードパーティ ライブラリやプラグインが開発されています。グローバルな名前空間の汚染を避けるために、jQuery は変数の競合を解決する jQuery.noConflict() メソッドを提供します。この方法は間違いなく非常に効果的です。残念ながら、jQuery の公式ドキュメントではこのメソッドについて十分に明確に説明されておらず、多くの開発者は jQuery.noConflict() を呼び出したときに正確に何が起こるかを理解していないため、使用時に多くの問題が発生します。それにもかかわらず、jQuery.noConflict() の背後にある実装原則は、Web 開発者が学習して習得する価値があり、グローバルな名前空間汚染などの問題を解決する強力なツールになる可能性があります。

jQuery.noConflict() の役割は何ですか?
jQuery.noConflict() は 1 つの目的のためにのみ存在します。これにより、同じページに複数の jQuery インスタンス、特に異なるバージョンの jQuery をロードできるようになります。なぜ 1 つのページで複数の異なるバージョンの jQuery オブジェクトをロード/使用する必要があるのか​​と疑問に思われるかもしれません。一般的に、2 つの状況があります。 1 番目のケースでは、ビジネス コードは最新バージョンの jQuery ライブラリを使用し、選択したサードパーティ プラグインは以前のバージョンの jQuery ライブラリに依存しています。2 番目のケースでは、既に存在するシステムを保守しています。ビジネス さまざまな理由により、コードは古いバージョンの jQuery ライブラリを参照しており、新しく開発されたモジュールは他のバージョンの jQuery ライブラリを使用しています。いずれの場合も、jQuery オブジェクト/メソッドの競合の問題に直面する必要があります。幸いなことに、jQuery.noConflict() はこの問題の解決に役立ちます。

jQuery が読み込まれるとどうなりますか?
jQuery がページによって参照/ロードされると、jQuery は自己実行関数 (匿名関数) にカプセル化され、jQuery が提供するすべての変数、関数、オブジェクトは匿名関数内の実行可能環境内にあり、外部環境から呼び出すことはできません。 . グローバルな名前空間の汚染を防ぎます。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

jQuery は、匿名関数内で jQuery と $ という 2 つのグローバル オブジェクトを定義し、それ自体を外部環境に公開します。開発者が使用するさまざまなパブリック メソッド (jQuery.ajax()、jQuery.css() など) には、これら 2 つのオブジェクトを通じてアクセスします。最初は、それらは匿名関数内の同じオブジェクト jQuery (プライベート変数) を指しており、これを通じて匿名関数内のプライベート変数と関数にアクセスします。これにより、匿名関数の内部プライベート変数と関数は、実行後もメモリ内に残り、JavaScript ガベージ コレクション メカニズムによってクリアされなくなります。

window.jQuery = window.$ = jQuery;

ページによって jQuery が読み込まれると、現在のページにはすでに 2 つのグローバル変数 jQuery と $ が含まれている可能性があります (たとえば、他のサードパーティ ライブラリが読み込まれ、それらも内部的に定義されている)。これにより、既存のオブジェクトが上書きされます (グローバルな名前空間汚染)。この問題を解決するために、jQuery は既存のグローバル変数を内部的にキャッシュし、後続の呼び出しのためにプライベート変数 _jQuery および _$ に保存します。したがって、jQuery ライブラリがページにロードされたときに jQuery オブジェクトと $ オブジェクトがまだ存在しない場合、_jQuery と _$ は両方とも未定義になります。それ以外の場合は、既存の jQuery と $ への参照が保存されます (おそらくサードパーティからのもの)。以前に参照したライブラリ) または別のバージョンの jQuery ライブラリ)。その後、jQuery はこれら 2 つのグローバル変数を上書きし、上記のように自身を外部環境に公開します。この時点で、ページ上のグローバル変数 jQuery と $ は、導入したばかりの jQuery ライブラリを指しています。

// Map over jQuery in case of overwrite
_jQuery = window.jQuery,

// Map over the $ in case of overwrite
_$ = window.$,

// Otherwise expose jQuery to the global object as usual
window.jQuery = window.$ = jQuery;

jQuery.noConflict() の魔法の効果?
あなたが保守しているシステムではすでに jQuery ライブラリのバージョン 1.7.0 を参照しており、新たに追加する機能では jQuery ライブラリのバージョン 1.10.2 を参照しているとします。それでは、jQuery 1.7.0 を再利用したり、両方のバージョンの jQuery ライブラリを同時に使用したりする方法はあるのでしょうか?答えは「はい」です、それは jQuery.noConflict() です。実際、jQuery.noConflict() を使用すると、グローバル変数 jQuery と $ を以前に参照したオブジェクトに即座にリダイレクトできます。すごいですよね？これが、jQuery がそれ自体を外部に公開する前に、以前に参照したオブジェクトを内部的にキャッシュする理由です。
− jQuery.noConflict() はオプションのブールパラメータを受け入れます。通常、デフォルト値は false です。このパラメータはどのような影響を与えるのでしょうか?実際、それはとても簡単です。 jQuery.noConflict() または jQuery.noConflict(false) が呼び出された場合、グローバル変数 $ のみが以前の参照値にリセットされます。jQuery.noConflict() または jQuery.noConflict(true) が呼び出された場合、グローバル変数$ は以前の参照値にリセットされます。jQuery と $ は両方とも以前の参照値にリセットされます。これは非常に重要なので、覚えておくことをお勧めします。 jQuery.noConflict(false/true) を呼び出すと、現在の jQuery インスタンスが返されます。この機能を使用して、jQuery の名前を変更できます。

// "Renaming" jQuery
var jayquery = jQuery.noConflict( true );
// Now we can call things like jayquery.ajax(), jayquery.css(), and so on

別のコード スニペットを見て、魔法の noConflict() を本当に理解しているかどうかをテストしてみましょう

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>