jQuery_jquery での noConflict() の使用法の分析例

この記事の例では、jQuery での noConflict() の使用法について説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

jQuery はデフォルトで「$」演算子を使用します。$ 記号は window.jQuery オブジェクト jQuery.noConflict() への単なる参照です。この関数は変数 $ の制御をそれを実装する最初のライブラリに渡します。これは、jQuery が他のライブラリの $object と競合しないようにするのに役立ちます。この関数を実行した後は、jQuery 変数を使用してのみ jQuery オブジェクトにアクセスできます。たとえば、$("div p") が使用されている場合は、jQuery("div p") に置き換える必要があります。

1.「$」演算子

1. jQuery はデフォルトで "$" 演算子を使用し、プロトタイプなどの他のフレームワークも "$" を使用します。 したがって、jQuery が他のライブラリの後に導入された場合、jQuery は "$" を使用する権利を取得します。この状況はわかりやすいですが、結局のところ、JS は上から下に実行されます。

2. "$" を使用する他のライブラリよりも先に jQuery が導入された場合、jQuery は "$" を占有しません。

ヒント: このメソッドは、他の JavaScript ライブラリが関数に $ を使用する場合に便利です。

jquery で変数を取得するときは $ を使用しますが、それを同時に参照したい場合、jquery はこれを防ぐために $ 記号を使用できるプラグインを導入しました。 noconflict()

が発生しています。

2. jQuery.noConflict の定義

jQuery.noConflict メソッドには、jQuery オブジェクト自体とともに $ 参照を引き渡すかどうかを決定するオプションのブール値パラメーターが含まれています:

jQuery.noConflict([removeAll])

機能の説明:

デフォルトでは、noConflict を実行すると変数 $ の制御が $ を生成する最初のライブラリに転送されます。removeAll が true に設定されている場合、noConflict を実行すると $ と jQuery オブジェクト自体のすべての制御がそれらを生成する最初のライブラリに転送されます。 。

3. jQuery.noConflict ソースコード分析

jQuery ソース コードの先頭で、最初に行うことは次のとおりです:

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

jQuery が変数が強制的に上書きされるのを防ぐために、2 つのプライベート変数を介してウィンドウ環境の 2 つのオブジェクト jQuery と $ をマップすることは容易に理解できます。 noConflict メソッドが呼び出されると、_jQuery、_$、jQuery、$ の違いを使用して制御の転送方法が決定されます。具体的なコードは次のとおりです。

noConflict: function( deep ) {
 if ( window.$ === jQuery ) {
 window.$ = _$;
 }
 if ( deep && window.jQuery === jQuery ) {
 window.jQuery = _jQuery;
 }
 return jQuery;
}

上記のパラメータ設定の問題を見ると、deep が設定されていない場合、_$ が wi​​ndow.$ をカバーします。このとき、jQuery エイリアス $ は無効になりますが、jQuery 自体はそのままです。別のライブラリまたはコードが $ 変数を再定義すると、その制御は完全に移行されます。一方、 deep を true に設定すると、_jQuery が wi​​ndow.jQuery を上書きし、$ と jQuery の両方が無効になります。

この操作の利点は、フレームワークの混合であっても、複数バージョンの jQuery の共存などの非常に競合する実行環境であっても、 noConflict メソッドによって提供されるハンドオーバー メカニズムと、カバーされていない jQuery オブジェクトが返されるため、変数マッピングを通じて完全に解決されます。

4. jQuery.noConflict インスタンス
1. $ で参照されるオブジェクトを元のオブジェクトにマッピングします:

jQuery.noConflict();
jQuery("div p").hide(); // 使用 jQuery
$("content").style.display = "none"; // 使用其他库的 $() 

2. エイリアス $ の使用を復元し、関数を作成して実行します。この関数のスコープ内で $ を jQuery のエイリアスとして引き続き使用します。この関数では、元の $ オブジェクトは無効です。この関数は、他のライブラリに依存しないほとんどのプラグインでうまく機能します:

jQuery.noConflict();
(function($) { 
 $(function() {
  // 使用 $ 作为 jQuery 别名的代码
 });
})(jQuery);
... // 其他用 $ 作为别名的库的代码

3. コードをよりコンパクトにするために、jQuery.noConflict() を省略形の ready と組み合わせることができます。

jQuery.noConflict()(function(){
  // 使用 jQuery 的代码
});
... // 其他库使用 $ 做别名的代码

4. 次のライブラリで jQuery オブジェクトを使用するための新しいエイリアスを作成します:

var j = jQuery.noConflict();
j("div p").hide();  // 基于 jQuery 的代码
$("content").style.display = "none";// 基于其他库的 $() 代码

5. jQuery を新しい名前空間に完全に移動します:

var dom = {};
dom.query = jQuery.noConflict(true);
//结果:
dom.query("div p").hide();  // 新 jQuery 的代码
$("content").style.display = "none";  // 另一个库 $() 的代码
jQuery("div > p").hide();  // 另一个版本 jQuery 的代码

この記事が皆さんの jQuery プログラミングに役立つことを願っています。