同じページに複数のJSライブラリを導入して発生する衝突解決策(転送)

6684 ワード

JSライブラリの衝突が発生した主な原因は、jQueryライブラリと同じで、多くのJSライブラリでは‘米ドル’記号をそのコードネームとして使用しています.したがって、一つのページに複数の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ライブラリを導入するとエラーが発生しますか?具体的な原因は何ですか?