jQuery と他のライブラリ間の競合の解決策_jquery-jsチュートリアル-php.cn

jQuery と他のライブラリ間の競合の解決策_jquery

WBOY

リリース： 2016-05-16 18:24:29

オリジナル

1122 人が閲覧しました

(注: デフォルトでは、jQuery はその略語として $ を使用します)
jQuery クラスライブラリが他のクラスライブラリと競合する場合は、jQuerynoConflict() 関数を使用して変数 $ の制御を他のライブラリに移すことができます。以下のコードの小さなスニペットを見てください。

JsCOM.js ライブラリにそのような関数があるとします

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

 
function $(objName) { 
if (document.getElementById) { 
return eval(' document.getElementById("' objName '")') 
} 
else { 
return eval("document.all." objName) 
} 

全員 jQuery にそのような関数があることを知り、競合を起こさないように jQuery の変数 $ の制御を他の JavaScript ライブラリに移管します

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

 
jQuery.noConflict() //変数 $ の制御を JsCOM.js に転送 
var $cr = jQuery ("#cr" ); //引き続き jQuery クラス ライブラリを使用します。元の $ を jQuery に置き換えるだけです。 
var JsCOM_cr = $("cr"); //JsCOM.js クラス ライブラリを使用します 

ここでは、jQuery() 関数を jQuery オブジェクトの製造ファクトリーとして使用できます。 >
ここで注意すべき点がいくつかあります
1. JavaScript クラスライブラリを参照する場合は、上記と同様に必ず最後に jQuery の参照を記述してください。 jQuery 参照の前 (具体的な理由はわかりませんが、確かに必要です) 2. jQuery() が $() を置き換える場合は特に注意してください。大文字と小文字を区別します (少し冗長に思えますが、この間違いをしないことを願っています)
基本的に、上記の
方法に従って、jQuery と他のライブラリ間の競合を解決できます。毎回 $ の代わりに jQuery を入力する必要があり、キーボード入力の負荷が増加するため、上記の方法に不快感を感じる場合は、読み続けてください。。
上記の他に、別のオプションがあります。 jQuery が他のライブラリと競合しないようにしたいが、ショートカットをカスタマイズしたい場合は、次の手順を実行できます。

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

var $j = jQuery.noConflict() //ショートカットをカスタマイズします 
var $j("#cr"); /jQuery クラス ライブラリを使用するには、カスタム ショートカットを使用する必要があります ----$j; 
var JsCOM_cr = $("cr") //JsCOM.js クラス ライブラリを使用する 
 
他の要件があり、他のクラス ライブラリと競合せずに元の $() を引き続き使用したい場合は、2 つの解決策があります 

1 つは:

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

jQuery.noConflict() //変数 $ の制御を JsCOM .js に渡します

jQuery (function($) 
{ 
$("p").click(function() //jquery クラス ライブラリの $() メソッドを使用して関数内を続行できます 
{ 
alert($(this).text()); 
}) 
}) 
var JsCOM_cr = $("cr"); // 関数の外でも JsCOM.js を使用できます。 $() メソッド

 
2 番目: 

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

jQuery.noConflict(); //変数 $ の制御を他のクラスライブラリに移す場合は jQuery("#id"); ($) { //匿名関数を定義し、仮パラメータを $

$(function() { //匿名関数内の $ はすべて jQuery
$("div").click(function) () { // $() メソッドの使用を継続します
alert($(this).text());
})
})
(jQuery); //匿名関数を使用し、実際のパラメータを渡します。 jQUery
alert($("cr")) //jsCOM.js クラスライブラリの $() 関数を使用します

2 番目の方法は、古いコードとの互換性を保つための最良の方法であり、コードの変更が最小限で済みます。
しかし、それが新しい jQuery コードである場合は、やはり最初に説明したコード (jQuery.noConflict() を使用し、次に jQuery("#id") を使用するこのメソッド) を使用することを好みます。
ページが最初に jQuery クラスライブラリを参照し、次に他のクラスライブラリを導入する場合、jQuery を直接使用して何らかの作業を行うことができ、同時に $() メソッドを他のライブラリへのショートカットとして使用できます。ここで jQuery.noConflict() 関数を呼び出す必要はありません。次のコードを参照してください

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

 
  
jQuery().ready(function() { //jQuery を呼び出す必要はありません。 noConflict() 関数 
var $cr = jQuery ("#cr"); 
$cr.click(function() { 
if ($cr.is(":checked")) { 
alert("サポートありがとうございます! 操作を続行できます。") 
} 
}) 
}) 
alert($("cr")); jsCOM.js クラス ライブラリの $() 関数 

 

わかりました。競合を解決するために上記のメソッドを読んだ後は、プロジェクトで jQuery を安全に参照できます:)