jQuery-noConflict の競合防止メカニズムの簡単な分析

出典: Taobao UED

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

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

1.

jQuery

noConflict

(

[removeAll])

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

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

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

JavaScript

1

2

3

4

5

// 上書きの場合は jQuery 上にマップします

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

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

JavaScript

1 2 3 4 5 6 7 8 9 10 11

noconflict ：function（deep） if ( 深い && ウィンドウ. jQuery === jQuery ) { ウィンドウ.jQuery = _jQuery ; } return jQuery ; }

🎜

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

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

しかし、プラグインの障害やその他の問題が発生する可能性があることは避けられません。もちろん、コンテキスト パラメーター $ Alias:

を変更するだけで復元できます。

JavaScript

1 2 3 4 5 6

var query = jQuery.noConflict(tru​​e ); (関数 ($) { // プラグインまたは他の形式のコード、パラメーターを jQuery に設定することもできます } ) (クエリ);

[1] http://api.jquery.com/jQuery.noConflict/#jQuery-noConflict-removeAll
[2] https://github.com/jquery/jquery/blob/master/ src/core.js

以上がjQuery-noConflict の競合防止メカニズムの簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。