jQuery での noConflict() の使用法を共有する

この記事では、主に jQuery での noConflict() の使用法を紹介します。noConflict() の関数、定義、および関連する使用スキルを例とともに分析します。必要な方は参考にしてください。 ) jQuery の例を示します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

jQuery はデフォルトで "$"

演算子

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

1. "$" 演算子

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

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

ヒント: このメソッドは、他の

JavaScript

ライブラリが関数に $ を使用する場合に便利です。 私たちはjqueryで変数を取得するときに$を使用しますが、これを防ぐために$記号を同時に参照したい場合は、多くのプラグインが問題を引き起こします。 jquery は noconflict を導入しました。()

2. 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 つのプライベート変数 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("p 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("p p").hide();  // 基于 jQuery 的代码
$("content").style.display = "none";// 基于其他库的 $() 代码

5. jQuery を新しい

namespace
に完全に移動します:

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

以上がjQuery での noConflict() の使用法を共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。