複数の jQuery バージョンを共存させるためのソリューション

複数の jQuery バージョンを共存させるためのソリューション_jquery

WBOY

リリース： 2016-05-16 16:09:08

オリジナル

1106 人が閲覧しました

複数の jQuery を 1 つのページに共存させるにはどうすればよいですか? jquery-1.5 や jquery-1.11 など。

なぜ 1 つのページに複数の jQuery を共存させる必要があるのかと疑問に思われるかもしれません。最新版のjQueryを直接引用することはできないのでしょうか？

答えは「いいえ」です。現実の生活はとても残酷だからです。例を挙げてみましょう:

既存の Web サイトはすでに jQuery 1.5 と関連プラグインを参照しています。 jQuery を最新バージョンに直接アップグレードする場合、これらのプラグインをすべてアップグレードするか、各プラグインの作成者が最新バージョンの jQuery をサポートするバージョンをリリースするのを待たない限り、これらのプラグインは機能しません。

新しいプラグインを開発したり、jQuery に基づいて JavaScript コードを作成したりする場合は、新しいバージョンを使用すると時間と労力を節約できます。

でも、古いバージョンは捨ててはいけません。どうすればよいでしょうか?

その方法は、jQuery の noConflict() を使用して、複数のバージョンを共存させることです。

jQuery をインポートすると、jQuery は 2 つの変数のみをウィンドウのグローバル空間に挿入します。

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

window.$ = window.jQuery = { jQuery オブジェクト };

同時に、jQuery は古い window.$ オブジェクトと window.jQuery オブジェクトへの参照を内部的に保持します。電話をかけるとき:

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

var $jq = $.noConflict();

window.$ は復元されましたが、window.jQuery は jQuery のままです。

電話をかけるとき:

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

var $jq = $.noConflict(true);

window.$ と window.jQuery の両方が復元され、jQuery が変数 $jq を通じて使用できることを除いて、jQuery はまったくインポートされていないように見えます。

したがって、新しいバージョンと古いバージョンの jQuery を共存できるようにするには、次のように実装できます。

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

<スクリプト>

// 現在、window.$ と window.jQuery はバージョン 1.11 です:

console.log($().jquery); // => '1.11.0'

var $jq = jQuery.noConflict(true);

// これで、window.$ と window.jQuery がバージョン 1.5 に復元されました:

console.log($().jquery); // => '1.5.0'

// $jq
 を通じて jQuery バージョン 1.11 にアクセスできます

<スクリプト src="myscript.js">

myscript.js で、$jq を使用して jQuery の 1.11 バージョンにアクセスします。

この時点で、問題は解決されました。

しかし、2 つのバージョンの jQuery を導入した後、ページがめちゃくちゃになってしまいました。誰かがコードを理解せずに var $jq = jQuery.noConflict(true); を削除したらどうなるでしょうか?または、jQuery をインポートする 2 つの行を入れ替えると、最終的には正しい jQuery バージョンを取得できなくなります。

最良の方法は、ページを変更せずに作成した新しい js ファイルを直接引用することです。

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

<スクリプト src="myscript.js">

このようにして、myscript.js 内で最新バージョンの jQuery を参照します。ページに jQuery があるかどうか、またどのバージョンの jQuery があるかは気にしません。

新しくてより良いソリューションの作成を開始します。まず、myscript.js の本体を決定します。

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

// myscript.js

(関数() {

// 開始

// TODO: ここに JavaScript コード...

// 終了

})();

Es ist eine gute Angewohnheit, anonyme Funktionen zu verwenden, um die Verschmutzung globaler Variablen zu vermeiden und den Zugriff auf externen Code zu verhindern.

Der nächste Schritt besteht darin, den jQuery 1.11-Code direkt einzubetten:

Code kopieren Der Code lautet wie folgt:

// myscript.js

(Funktion () {

// BEGIN

/*! jQuery v1.11.1 */

​​ !function(a,b){"object"==typeof module&&"object"==typeof module.exports?...

If(k&&j[k]&&(e||j[k].data)||void 0!==d||"string"!=typeof b)return k||(k=...

},cur:function(){var a=Zb.propHooks[this.prop];return a&&a.get?a.get(thi...

      var $ = jQuery.noConflict(true);

// TODO: Javascript-Code hier...

// ENDE

})();

Der eingebettete Code ist natürlich der komprimierte Code, insgesamt 3 Zeilen, und dann hinzufügen:

Code kopieren Der Code lautet wie folgt:

var $ = jQuery.noConflict(true);

Beachten Sie, dass $ eine lokale Variable ist. Sie können im folgenden Code jederzeit auf dieses $ verweisen. Es handelt sich nicht um dasselbe Objekt wie die globale Variable $ von jQuery in anderen Versionen der Seite.

Der letzte Schritt besteht darin, zu prüfen, ob das jQuery-Protokoll es uns ermöglicht, den jQuery-Quellcode direkt in unseren eigenen JavaScript-Code einzubetten.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.