Penyelesaian untuk kewujudan bersama berbilang jQuery versions_jquery

Bagaimana untuk membiarkan berbilang jQuery wujud bersama pada satu halaman? Seperti jquery-1.5 dan jquery-1.11.

Anda mungkin bertanya, mengapa anda memerlukan berbilang jQuery untuk wujud bersama pada satu halaman? Bukankah mungkin untuk terus memetik versi terkini jQuery?

Jawapannya, tidak. Kerana kehidupan sebenar sangat kejam. Beri saya contoh:

Tapak web sedia ada telah pun merujuk jQuery 1.5 dan pemalam yang berkaitan. Jika anda terus menaik taraf jQuery kepada versi terkini, pemalam ini tidak akan berfungsi melainkan anda boleh menaik taraf semua pemalam ini atau menunggu pengarang setiap pemalam mengeluarkan versi yang menyokong versi terkini jQuery.

Sekarang, jika kami ingin membangunkan pemalam baharu atau menulis kod JavaScript berdasarkan jQuery, menggunakan versi baharu akan menjimatkan masa dan usaha.

Tetapi versi lama tidak boleh dibuang, apa yang perlu saya lakukan?

Kaedahnya ialah menggunakan jQuery's noConflict() untuk membenarkan berbilang versi wujud bersama.

Apabila kami mengimport jQuery, jQuery hanya menyuntik dua pembolehubah ke dalam ruang global tetingkap:

Salin kod Kod adalah seperti berikut:

​ window.$ = window.jQuery = { objek jQuery };

Pada masa yang sama, jQuery secara dalaman mengekalkan rujukan kepada objek tetingkap lama.$ dan window.jQuery. Apabila kami memanggil:

Salin kod Kod adalah seperti berikut:

var $jq = $.noConflict();

window.$ dipulihkan, tetapi window.jQuery masih jQuery.

Apabila kami memanggil:

Salin kod Kod adalah seperti berikut:

var $jq = $.noConflict(true);

Kedua-dua window.$ dan window.jQuery dipulihkan, dan semuanya kelihatan seperti jQuery tidak pernah diimport, kecuali jQuery boleh digunakan melalui pembolehubah $jq.

Jadi, membenarkan versi baharu dan lama jQuery wujud bersama boleh dilaksanakan seperti ini:

Salin kod Kod adalah seperti berikut:

// Now window.$ dan window.jQuery ialah versi 1.11:
console.log($().jquery); // => '1.11.0'
var $jq = jQuery.noConflict(true);
// Now window.$ dan window.jQuery dipulihkan kepada versi 1.5:
console.log($().jquery); // => '1.5.0'
// Anda boleh mengakses jQuery versi 1.11 melalui $jq

Dalam myscript.js, gunakan $jq untuk mengakses versi 1.11 jQuery.

Pada ketika ini, masalah telah selesai.

Walau bagaimanapun, selepas memperkenalkan dua versi jQuery, halaman itu menjadi kucar-kacir. Bagaimana jika seseorang tidak memahami kod dan memadamkan var $jq = jQuery.noConflict(true);? Atau, jika anda menukar dua baris yang mengimport jQuery, anda tidak akan mendapat versi jQuery yang betul pada akhirnya.

Cara terbaik ialah dengan terus memetik fail js baharu yang kami tulis tanpa mengubah halaman:

Salin kod Kod adalah seperti berikut:

Dengan cara ini, kami akan merujuk versi terkini jQuery di dalam myscript.js, dan kami tidak peduli sama ada halaman itu mempunyai jQuery atau tidak, dan versi jQuery yang mana ada.

Mula menulis penyelesaian baharu dan lebih baik. Mula-mula, tentukan isi utama myscript.js:

Salin kod Kod adalah seperti berikut:

// myscript.js
(fungsi () {
// BERMULA
// TODO: kod javascript di sini...
// TAMAT
})();

グローバル変数の汚染を避け、外部コードへのアクセスを防ぐために、匿名関数を使用することは良い習慣です。

次のステップは、jQuery 1.11 コードを直接埋め込むことです:

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

// myscript.js
(関数() {
// 開始
/*! jQuery v1.11.1 */
!function(a,b){"object"==モジュールの種類&&"オブジェクト"==モジュールの種類.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 コード...
// 終了
})();

埋め込みコードはもちろん圧縮コードで、合計 3 行に次のコードを追加します。

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

var $ = jQuery.noConflict(true);

$ は、次のコードでいつでも参照できるローカル変数であることに注意してください。これは、ページの他のバージョンの jQuery のグローバル変数 $ と同じオブジェクトではありません。

最後のステップは、jQuery プロトコルで jQuery ソース コードを独自の JavaScript コードに直接埋め込むことができるかどうかを確認することです。

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。