jqueryプラグインの競合（jquery.noconflict）解決策sharing_jquery

多くの JS フレームワーク ライブラリは、関数名または変数名として $ 記号を使用することを選択しており、jQuery が最も一般的なものです。 jQuery では、$ 記号は window.jQuery オブジェクトへの参照にすぎないため、$ が削除されても、window.jQuery は依然としてクラス ライブラリ全体の整合性を確保するための強力な支援となります。 jQuery の API 設計では、複数のフレームワーク間の参照の競合が十分に考慮されており、jQuery.noConflict メソッドを使用して簡単に制御を移すことができます。

jQuery.noConflict メソッドには、$ 参照を引き渡すときに jQuery オブジェクト自体を引き渡すかどうかを決定するオプションのブール パラメーター [1] が含まれています。

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

jQuery.noConflict([removeAll])

デフォルトでは、noConflict を実行すると変数 $ の制御が $ を生成する最初のライブラリに転送されます。removeAll が true に設定されている場合、noConflict を実行すると $ と jQuery オブジェクト自体のすべての制御がそれらを生成する最初のライブラリに転送されます。 。

たとえば、KISSY と jQuery が混在し、API 操作を簡略化するために $ = KISSY が使用される場合、この方法を使用して名前の競合の問題を解決できます。

では、このメカニズムはどのように実装されているのでしょうか? jQuery ソース コード [2] の冒頭を読んでください。最初に行うことは次のとおりです:

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

// 上書きの場合は jQuery にマップします
_jQuery = window.jQuery,

// 上書きの場合は $ をマップします
_$ = window.$,

jQuery が変数が強制的に上書きされるのを防ぐために、2 つのプライベート変数を介してウィンドウ環境の 2 つのオブジェクト jQuery と $ をマップすることは容易に理解できます。 noConflict メソッドが呼び出されると、_jQuery、_$、jQuery、$ の違いを使用して制御の転送方法が決定されます。具体的なコードは次のとおりです。

noconflict：function（deep）{

if（deep &&window。jquery=== jquery =🎜>上記のパラメーター設定の問題を見てみましょう。 $ は window.$ をオーバーライドします。この時点では jQuery エイリアス $ は無効ですが、jQuery 自体はそのままです。別のライブラリまたはコードが $ 変数を再定義すると、その制御は完全に移行されます。一方、 deep を true に設定すると、_jQuery が wi​​ndow.jQuery を上書きし、$ と jQuery の両方が無効になります。

この操作の利点は、noConflict メソッドによって提供されるハンドオーバー メカニズムと、カバーされていない jQuery オブジェクトを返すという事実により、フレームワークの混合や jQuery の複数バージョンの共存など、競合性の高い実行環境であっても問題がないことです。 、変数を使用して完全にマッピングして競合を解決できます。

ただし、プラグインの障害やその他の問題が発生する可能性があることは避けられません。もちろん、コンテキスト パラメーターを変更するだけで復元できます。





コードをコピー

コードは次のとおりです。

var query = jQuery.noConflict(true) ;

(function ($) {

// プラグインまたは他の形式のコード。パラメーターを jQuery

に設定することもできます。)(query);

次の例でもこの問題は解決されます

jQuery の誕生以来、ますます多くのバージョンが登場しており、jQuery 公式 Web サイトの新しいバージョンは今でも更新され、リリースされています。ただし、以前のプロジェクトでは、1.3 などの古いバージョンの jQuery をすでに使用しています。 .X、1.4.X、1.5.X、1.6.2など

プロジェクトのニーズにより、新しいバージョンの jQuery を引き続き使用する必要がありますが、すでに存在し、採用されている古い jQuery バージョンについて、複数の異なる jQuery バージョンを共存させるにはどうすればよいですか。同じページがありません 競合についてはどうですか?

実際、jQuery.noConflict() 機能を使用すると、jQuery を Prototype などの他の JS ライブラリと共存させることができるだけではありません。 jQuery 自体の他の異なるバージョンと競合することなく共存することもできます。

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

="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js">
jQuery_New = $.noConflict(true);
” http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
< ;script type="text/javascript">
var jQuery_1_6_2 = $.noConflict(true);

="http://ajax.googleapis.com/ajax/libs /jquery/1.5.2/jquery.min.js">

var jQuery_1_5_2 = $.noConflict(true) );

" src= "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">

/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery .min.js">