ホームページ > ウェブフロントエンド > jsチュートリアル > jquery バージョンの競合を解決する効果的な方法_jquery

jquery バージョンの競合を解決する効果的な方法_jquery

WBOY
リリース: 2016-05-16 16:38:04
オリジナル
1448 人が閲覧しました

jQuery を使用したことのある友人は、jQuery のバージョンが異なると競合が発生する可能性があることを知っています。この記事では、次のようにこの問題に対する効果的な解決策を提案します。

ケース: jQuery 1.3.2 と 1.4.2 の間の競合を解決します。 (この例はテストされ、合格しています!)

ステップ 1: 1.4.2 ソース コードの最後に文を追加します:


var $j4 = jQuery.noConflict(true);
ログイン後にコピー
ほとんどの記事で説明されているように、使用時に追加するのではなく、ここにソース コードに追加する理由は、1.4.2 ベースの多くのプラグインを追加する必要があるためです。ここに追加すると、追加を避けることができるためです。プラグインが多いと文コードが重複してしまいます。この文は、1.4.2 の jQuery と $ の参照権限をすべて放棄します。つまり、1.4.2 ベースのプラグインでは jQuery と $ を使用できなくなります。同時に、$j4 に新しい名前空間を与えます。これは window の属性であることに注意してください。 1.4.2 のソース コードを見ると、実際に次の 2 つの文が実行されていることがわかります:


window.$=_$;
window.jQuery=_jQuery;
ログイン後にコピー
原理は window.$=_temp$ (名前空間を返す) と同じですが、名前が異なります。

ステップ 2: 1.4.2 フレームワークに基づくすべてのプラグインの先頭に次のコードを追加します。


var _temp$ = window.$,_tempjQuery = window.jQuery;
ログイン後にコピー
jQuery1.3.2の$とjQueryを一時変数スペースに入れます:

window.$ = $j4;

ログイン後にコピー
この文と以下の文はすべて、jQuery と $ を正しく使用するための中間コードです。次の $j4 は、正しい参照を与えるためのものです。

window.jQuery = $j4;

ログイン後にコピー

最初に一時変数を保存する必要がある理由は 3 つあります:

①. jQuery プラグインのソースコードはあまり変更したくないので、変更するとしてもできるだけ変更しない方が良いです。また、途中の元のコードを変更せずに、先頭と末尾に変更したコードを追加することも良い方法です。

②. 1.4.2 では jQuery と $ の制御を放棄しましたが、他のプラグインとの競合があったとしてもプラグインは競合を予測できないため、既存のプラグイン コードはそれらを参照として使用します。 . jQuery 下のプラグインでない場合は、$ または jQuery を使用して参照します。

③. プラグインが直接 window.$ や window.jQuery を使用して 1.3.2 の jQuery や $ を参照することを防ぐため、このような状況は比較的まれではありますが、念のためです。

中央の元のコードは変更されず、次のコードが最後に追加されます:

window.$ = _temp$;//将$的引用权限返还给jQuery1.3.
window.jQuery = _tempjQuery;//将jQuery的引用权限返还给jQuery1.3.

ログイン後にコピー
ステップ 3: 将来的に jQuery1.4.2 ベースの選択関数を使用する場合は、$j4(element) のみを使用できます。

要約: これまでのところ実現可能な解決策: jQuery1.4.2 は $ と jQuery の制御権限を完全に放棄します。 1.3.2 $ の制御権限は放棄するが、jQuery の権限は放棄しない 実際には、jQuery も放棄できますが、別名 $j3 を与える必要があります。 $ の制御権限を取得するプロトタイプを jQuery1.3.2 の後ろに配置するのが最善です。ただ、今後 jQuery1.4.2 を使いたい場合は $j4 を使って参照する必要があります。しかし、この方法では、jQuery フレームワークのバージョンの競合がどれほど多くても、それらはすべて解決されます。 jQuery 1.2 が登場した場合は (2) の実行手順を参照してください。ただし、最初の手順は次のように変更されます:


var $j2 = jQuery.noConflict(true);
ログイン後にコピー
3 番目のステップで $j2(element) を使用するだけです。原則は同じです。

この記事で説明されている内容は、皆さんの jQuery プログラミングにとって一定の参考になると思います。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート