同じページに複数のJSライブラリを導入して発生する衝突解決策(転送)
6684 ワード
JSライブラリの衝突が発生した主な原因は、jQueryライブラリと同じで、多くのJSライブラリでは‘米ドル’記号をそのコードネームとして使用しています.したがって、一つのページに複数のJSライブラリを導入して、$をコードとして使用する場合、プログラムはどのライブラリを表しているかを識別できません.
ソリューション:
JSライブラリの衝突を解決するためには、以下のいくつかの方法に分けられます.
①‘米ドル’の表示子を渡し、jQueryをjQueryの対象とする表示符(別名)とします.
②別名を「$」とjQuery識別子の代わりに使用して、下のように$j(名前は任意に取ることができる).
方法:この場合、他のライブラリの識別子としてどのように「$」を使うかは、jQuery.noConflit()を使用してjQueryの「$」識別子に対する制御を解放して、最初の実装ライブラリに順位を譲る.
たとえば:
方法:この場合、jQuery.noConflit()を使用して‘米ドル’識別子を渡す必要はない.例えば、
また、jQuery.noConflit()方法は、bollanタイプのパラメータを持つこともできます.このパラメータの役割は、jQueryを完全に新しい名前空間に移動することです.
このパラメータは主に同じページに異なるバージョンのjQueryを導入する必要がある時に使うものです.すなわち、新しい空間を作成してjQueryを指します.(これはよく分かりません.)
たとえば:
①なぜjQueryは他のライブラリの前に導入するのですか?jQuery.noConflick()は使わなくてもいいです.他のライブラリの後に導入するならjQuery.noConflit()を使いますか?
②同じページに異なるバージョンのjQueryライブラリを導入し、jQuery.noConflit(true)を使って解決した詳細については?
③なぜ同じページに複数のJSライブラリを導入するとエラーが発生しますか?具体的な原因は何ですか?
ソリューション:
JSライブラリの衝突を解決するためには、以下のいくつかの方法に分けられます.
①‘米ドル’の表示子を渡し、jQueryをjQueryの対象とする表示符(別名)とします.
②別名を「$」とjQuery識別子の代わりに使用して、下のように$j(名前は任意に取ることができる).
var $j=jQuery.noConflict();
$j("#div").hide();
③匿名関数を使うjQuery.noConflict();
(function($) {
$(function() {
// $ jQuery
});
})(jQuery);
... // $
ケース1:もしjQueryライブラリが他のライブラリの後に導入されたら方法:この場合、他のライブラリの識別子としてどのように「$」を使うかは、jQuery.noConflit()を使用してjQueryの「$」識別子に対する制御を解放して、最初の実装ライブラリに順位を譲る.
たとえば:
<span style="color:#000000;">
$.noConflict(); </span><span style="color:#008000;">//</span><span style="color:#008000;"> $ 。</span>
<span style="color:#000000;">
jQuery(</span>"#div").hide(); <span style="color:#008000;">//</span><span style="color:#008000;"> jQuery jQuery </span>
<span style="color:#000000;">
$(</span>"#div").hide(); <span style="color:#008000;">//</span><span style="color:#008000;"> $ </span>
第二の方法、すなわち別名を使用することもできる.
<span style="color:#0000ff;">var</span> $j=$.noConflict(); <span style="color:#008000;">//</span><span style="color:#008000;"> $ 。</span><span style="color:#000000;">
$j(</span>"#div").hide(); <span style="color:#008000;">//</span><span style="color:#008000;"> $j jQuery </span><span style="color:#000000;">
$(</span>"#div").hide(); <span style="color:#008000;">//</span><span style="color:#008000;"> $ </span>
または、匿名関数を使用して、例えば、第3の方法を使用する.jQuery.noConflict();
(function($) { // ‘$’
$(function() {
// $ jQuery
});
})(jQuery); // jQuery
... // $
ケース2:もしjQueryが他のライブラリの前に導入されたら方法:この場合、jQuery.noConflit()を使用して‘米ドル’識別子を渡す必要はない.例えば、
<span style="color:#000000;">
jQuery(</span>"#div").hide(); <span style="color:#008000;">//</span><span style="color:#008000;"> jQuery jQuery </span>
<span style="color:#000000;">
$(</span>"#div").hide(); <span style="color:#008000;">//</span><span style="color:#008000;"> $ </span>
じゃ、ここで一つの疑問があります.どうしてjQueryは他の倉庫の前に導入されますか?jQuery.noConflitは使わなくてもいいです.他の倉庫の後に導入されたらjQuery.noConflit()を使いますか?また、jQuery.noConflit()方法は、bollanタイプのパラメータを持つこともできます.このパラメータの役割は、jQueryを完全に新しい名前空間に移動することです.
このパラメータは主に同じページに異なるバージョンのjQueryを導入する必要がある時に使うものです.すなわち、新しい空間を作成してjQueryを指します.(これはよく分かりません.)
たとえば:
var dom = {};
dom.query = jQuery.noConflict(true);
:
dom.query("div p").hide(); // jQuery
$("content").style.display = "none"; // $()
jQuery("div > p").hide(); // jQuery
まとめ:jQueryのJSライブラリの衝突については、どのように解決するかしか分かりません.具体的な原因は分かりません.そして、具体的な技術知識はまだ分かりません.これから解決方法を探すように努力します.jQueryの倉庫衝突については、まだ問題が残っています.①なぜjQueryは他のライブラリの前に導入するのですか?jQuery.noConflick()は使わなくてもいいです.他のライブラリの後に導入するならjQuery.noConflit()を使いますか?
②同じページに異なるバージョンのjQueryライブラリを導入し、jQuery.noConflit(true)を使って解決した詳細については?
③なぜ同じページに複数のJSライブラリを導入するとエラーが発生しますか?具体的な原因は何ですか?