$ 記号と他の JS ライブラリ間の競合を回避するための jQuery のメソッドの比較

$ 記号と他の JS ライブラリ間の競合を回避するための jQuery のメソッドの比較_jquery

WBOY

リリース： 2016-05-16 16:59:09

オリジナル

966 人が閲覧しました

jQuery では $ 記号を使用する必要があります。他の js ライブラリ (有名なプロトタイプなど) でも $ 記号が定義されている場合、競合が発生し、js コードの通常の実行に影響します。 jqeury は、この問題を回避するためのいくつかのソリューションを提供しています。これらのソリューションの違いを見てみましょう。

オプション 1:
noConflict() を導入し、$ を他の記号に置き換えます。

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

 
var $j = jQuery.noConflict(); 
$j(document ); .ready(function(){ 
$j("#btn1").click(function(){ 
alert("Text: " $j("#test").text()); 
}); 
}); 

欠点: このコードを導入した後は、現在の js ファイルだけでなく、html によって参照されるすべての js も必要になります。 $j を使用して前の $

オプション 2:
ready 関数は jquery のエントリ関数です。$(document).ready(function(){
Replace を
変更できますwith
jQuery(document).ready(function($){}
短所: これは、ready ネスト内のコードに対してのみ有効で、ネストの外側のコードに対しては無効です。すべてのロジックがあれば、すべてがready関数内にあるのは問題ありませんが、通常はready関数の外にいくつかのサブ関数を記述し、これらの関数を呼び出します。そのため、この解決策には制限があります。
オプション 3 (特に js プラグインを開発する場合に推奨):

js コンテンツパッケージに関数を追加します

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

jQuery(function($){ 
// ここに js コードを入力します (たとえば、2 番目の解決策で説明した準備関数とサブ関数) 
//js ファイルの場合、実際にはファイルの先頭と末尾にコード行を追加します 
} 

 

または

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

(function($) { 
//あなたの js code
})(jQuery ); 

 

このメソッドには、上記の 2 つの解決策の欠点がなく、jQuery(function($){} でラップされたコードにのみ影響します。 🎜> は他の js コードには影響しません。これは非常に重要です。想像してみてください。堅牢性を向上させるために、jquery を使用する必要がある js パブリックコンポーネントを作成する場合は、$ 記号の競合を考慮する必要があります。オプション 1 を使用する場合、他の人がそれを使用するときは、そのユーザーは同意に従って、JS コードの $ を $ に変更する必要があります。オプション 3 を使用すると、コンポーネントへの $ 競合の影響を、要求することなく回避できます。パブリックコンポーネントを使用する人は自分のコードを変更します。