jqueryプラグイン競合(jquery.noconflict)解決方法の共有
5299 ワード
多くのJSフレームワーククラスライブラリは、関数または変数名として$記号を使用することを選択しています.jQueryはその中で最も典型的なものです.jQueryでは$記号はwindowにすぎません.jQueryオブジェクトの参照があるので、$が削除されてもwindow.jQueryは依然としてクラスライブラリ全体の完全性を保証する強い後ろ盾である.jQueryのAPI設計はマルチフレームワーク間の参照競合を十分に考慮し,jQueryを用いることができる.NoConflictメソッドは、制御権の移行を容易に実現します.
jQuery.NoConflictメソッドには、オプションのブールパラメータ[1]が含まれており、$参照を渡しながらjQueryオブジェクト自体を渡すかどうかを決定するために使用されます.
デフォルトでは、noConflictを実行すると、変数$の制御権が最初に$を生成したライブラリに渡されます.removeAllがtrueに設定されている場合、noConflictを実行すると、$とjQueryオブジェクト自体の制御権が最初に生成されたライブラリにすべて移されます.
例えば,KISSYとjQueryを混用し,$=KISSYを慣用してAPI操作を簡略化した場合,この方法でネーミング競合の問題を解決できる.
では、このメカニズムはどのように実現されているのでしょうか.jQueryソースの先頭[2]を読むと、まず最初にしたことは次のようになります.
分かりやすいのは、jQueryが2つのプライベート変数を介してwindow環境下のjQueryと$の2つのオブジェクトをマッピングし、変数が強制的に上書きされないようにすることです.noConflictメソッドが呼び出されると、jQuery, _$, jQuery,$4者間の差異は,制御権の移譲方式を決定し,具体的なコードは以下の通りである.
noConflict: function( deep ) { if ( window.$ === jQuery ) { window.$ = _$; } if ( deep && window.jQuery === jQuery ) { window.jQuery = _jQuery; } return jQuery;}上記のパラメータ設定の問題を見て、deepが設定されていない場合、$Windows.$を上書きし、このときjQuery別名$は無効になりますが、jQuery自体は無傷です.他のクラスライブラリまたはコードが$変数を再定義した場合、その制御権は完全に引き継がれます.逆にdeepがtrueに設定されている場合、jQueryはwindowを上書きします.jQuery、この時点で$とjQueryは失効します.
このような操作の利点は,フレームワークの混用においてもjQueryマルチバージョンにおいても,このような高度な衝突が共存する実行環境が,noConflict法によって提供されるハンドオーバメカニズム,およびそれ自体が上書きされていないjQueryオブジェクトを返すため,変数マッピングによって衝突を完全に解決できることである.
しかし、避けられない事実は、プラグインの失効などの問題を引き起こす可能性があります.もちろん、コンテキストパラメータを簡単に変更することで$別名を復元することができます.
次の例は、この問題を解決するためのものです.
jQueryは誕生以来、バージョンが増えており、jQueryの公式サイトの新しいバージョンは絶えず更新され、発表されていますが、以前のプロジェクトでは古いバージョンのjQueryを使用していました.例えば、すでに登場しています:1.3.X、1.4.X、1.5.X、1.6.2など.
プロジェクトの必要性のため、必然的に比較的新しいjQueryを絶えず使用する必要がありますが、すでに存在し採用されている古いjQueryバージョンに対して、私たちはどのように複数の異なるjQueryバージョンを同じページに併存させて衝突しないようにしますか?
実は、jQuery.を利用してnoConflict()プロパティでは、jQueryをPrototypeなどの他のJSライブラリと併存させることができます.jQuery自体の他の異なるバージョンと競合することなく併存することもできます.
jQuery.NoConflictメソッドには、オプションのブールパラメータ[1]が含まれており、$参照を渡しながらjQueryオブジェクト自体を渡すかどうかを決定するために使用されます.
jQuery.noConflict([removeAll])
デフォルトでは、noConflictを実行すると、変数$の制御権が最初に$を生成したライブラリに渡されます.removeAllがtrueに設定されている場合、noConflictを実行すると、$とjQueryオブジェクト自体の制御権が最初に生成されたライブラリにすべて移されます.
例えば,KISSYとjQueryを混用し,$=KISSYを慣用してAPI操作を簡略化した場合,この方法でネーミング競合の問題を解決できる.
では、このメカニズムはどのように実現されているのでしょうか.jQueryソースの先頭[2]を読むと、まず最初にしたことは次のようになります.
// Map over jQuery in case of overwrite
_jQuery = window.jQuery,
// Map over the $ in case of overwrite
_$ = window.$,
分かりやすいのは、jQueryが2つのプライベート変数を介してwindow環境下のjQueryと$の2つのオブジェクトをマッピングし、変数が強制的に上書きされないようにすることです.noConflictメソッドが呼び出されると、jQuery, _$, jQuery,$4者間の差異は,制御権の移譲方式を決定し,具体的なコードは以下の通りである.
noConflict: function( deep ) { if ( window.$ === jQuery ) { window.$ = _$; } if ( deep && window.jQuery === jQuery ) { window.jQuery = _jQuery; } return jQuery;}上記のパラメータ設定の問題を見て、deepが設定されていない場合、$Windows.$を上書きし、このときjQuery別名$は無効になりますが、jQuery自体は無傷です.他のクラスライブラリまたはコードが$変数を再定義した場合、その制御権は完全に引き継がれます.逆にdeepがtrueに設定されている場合、jQueryはwindowを上書きします.jQuery、この時点で$とjQueryは失効します.
このような操作の利点は,フレームワークの混用においてもjQueryマルチバージョンにおいても,このような高度な衝突が共存する実行環境が,noConflict法によって提供されるハンドオーバメカニズム,およびそれ自体が上書きされていないjQueryオブジェクトを返すため,変数マッピングによって衝突を完全に解決できることである.
しかし、避けられない事実は、プラグインの失効などの問題を引き起こす可能性があります.もちろん、コンテキストパラメータを簡単に変更することで$別名を復元することができます.
var query = jQuery.noConflict(true);
(function ($) {
// ， jQuery
})(query);
次の例は、この問題を解決するためのものです.
jQueryは誕生以来、バージョンが増えており、jQueryの公式サイトの新しいバージョンは絶えず更新され、発表されていますが、以前のプロジェクトでは古いバージョンのjQueryを使用していました.例えば、すでに登場しています:1.3.X、1.4.X、1.5.X、1.6.2など.
プロジェクトの必要性のため、必然的に比較的新しいjQueryを絶えず使用する必要がありますが、すでに存在し採用されている古いjQueryバージョンに対して、私たちはどのように複数の異なるjQueryバージョンを同じページに併存させて衝突しないようにしますか?
実は、jQuery.を利用してnoConflict()プロパティでは、jQueryをPrototypeなどの他のJSライブラリと併存させることができます.jQuery自体の他の異なるバージョンと競合することなく併存することもできます.
jQuery
<br> var jQuery_New = $.noConflict(true);
<br>
<br> var jQuery_1_6_2 = $.noConflict(true);
<br>
<br> var jQuery_1_5_2 = $.noConflict(true);
<br>
<br> var jQuery_1_4_2 = $.noConflict(true);
<br>
<br> var jQuery_1_3_2 = $.noConflict(true);
<br>
<br> alert(jQuery_New.fn.jquery);
<br> alert(jQuery_1_6_2.fn.jquery);
<br> alert(jQuery_1_5_2.fn.jquery);
<br> alert(jQuery_1_4_2.fn.jquery);
<br> alert(jQuery_1_3_2.fn.jquery);
<br>
<br> jQuery_New(function($){$('<p> '+$.fn.jquery+' 。</p>').appendTo('body');});
<br> jQuery_1_6_2(function($){$('<p> '+$.fn.jquery+' 。</p>').appendTo('body');});
<br> jQuery_1_5_2(function($){$('<p> '+$.fn.jquery+' 。</p>').appendTo('body');});
<br> jQuery_1_4_2(function($){$('<p> '+$.fn.jquery+' 。</p>').appendTo('body');});
<br> jQuery_1_3_2(function($){$('<p> '+$.fn.jquery+' 。</p>').appendTo('body');});
<br>
jQuery