ホームページ >ウェブフロントエンド >jsチュートリアル >jQuery と他のライブラリ間の競合の解決策_jquery

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

WBOY
WBOYオリジナル
2016-05-16 18:24:291112ブラウズ

(注: デフォルトでは、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 を安全に参照できます:)
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。