Contoh analisis penggunaan noConflict() dalam jQuery_jquery

Contoh dalam artikel ini menerangkan penggunaan noConflict() dalam jQuery. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

jQuery menggunakan operator "$" secara lalai Simbol $ hanyalah rujukan kepada objek window.jQuery, jQuery.noConflict(). Ini membantu memastikan jQuery tidak bercanggah dengan $objek perpustakaan lain. Selepas menjalankan fungsi ini, anda hanya boleh mengakses objek jQuery menggunakan pembolehubah jQuery. Sebagai contoh, apabila $("div p") digunakan, ia mesti digantikan dengan jQuery("div p").

1. pengendali "$"

1. jQuery menggunakan operator "$" secara lalai, dan rangka kerja lain seperti prototaip juga menggunakan "$". Keadaan ini mudah difahami, lagipun, JS dilaksanakan dari atas ke bawah.

2. Jika jQuery diperkenalkan sebelum perpustakaan lain yang menggunakan "$", maka jQuery tidak akan menduduki "$".

Petua: Kaedah ini berguna apabila perpustakaan JavaScript lain menggunakan $ untuk fungsinya.

Kita semua menggunakan $ apabila mendapatkan pembolehubah dalam jquery, tetapi terdapat banyak pemalam yang boleh menggunakan simbol $ Jika kita ingin merujuknya pada masa yang sama, ia akan menyebabkan masalah yang diperkenalkan berlaku

2. Definisi jQuery.noConflict
Kaedah jQuery.noConflict mengandungi parameter boolean pilihan yang menentukan sama ada untuk menyerahkan rujukan $ bersama objek jQuery itu sendiri:

jQuery.noConflict([removeAll])

Penerangan fungsi:

Secara lalai, melaksanakan noConflict akan memindahkan kawalan pembolehubah $ ke perpustakaan pertama yang menjana $ apabila removeAll ditetapkan kepada benar, melaksanakan noConflict akan memindahkan semua kawalan $ dan objek jQuery itu sendiri ke Pustaka pertama untuk menjananya .

3. Analisis kod sumber jQuery.noConflict
Pada permulaan kod sumber jQuery, perkara pertama yang perlu dilakukan ialah ini:

// Map over jQuery in case of overwrite
_jQuery = window.jQuery,
// Map over the $ in case of overwrite
_$ = window.$,

Adalah mudah untuk memahami bahawa jQuery memetakan dua objek jQuery dan $ dalam persekitaran tetingkap melalui dua pembolehubah peribadi untuk mengelakkan pembolehubah daripada ditulis ganti secara paksa. Setelah kaedah noConflict dipanggil, perbezaan antara _jQuery, _$, jQuery, $ digunakan untuk menentukan kaedah pemindahan kawalan Kod khusus adalah seperti berikut:

noConflict: function( deep ) {
 if ( window.$ === jQuery ) {
 window.$ = _$;
 }
 if ( deep && window.jQuery === jQuery ) {
 window.jQuery = _jQuery;
 }
 return jQuery;
}

Melihat isu tetapan parameter yang dinyatakan di atas, jika deep tidak ditetapkan, _$ meliputi tetingkap.$ Pada masa ini, alias jQuery $ menjadi tidak sah, tetapi jQuery itu sendiri adalah utuh. Jika perpustakaan atau kod lain mentakrifkan semula pembolehubah $, kawalan ke atasnya dipindahkan sepenuhnya. Sebaliknya, jika deep ditetapkan kepada benar, _jQuery menimpa window.jQuery, dan kedua-dua $ dan jQuery akan menjadi tidak sah.

Kelebihan operasi ini ialah sama ada ia adalah gabungan rangka kerja atau persekitaran pelaksanaan yang sangat bercanggah seperti kewujudan bersama pelbagai versi jQuery, disebabkan oleh mekanisme penyerahan yang disediakan oleh kaedah noConflict dan pengembalian objek jQuery yang tidak dilindungi, ia boleh diselesaikan sepenuhnya melalui konflik pemetaan.

4. Contoh jQuery.noConflict
1. Petakan objek yang dirujuk oleh $ kembali ke objek asal:

jQuery.noConflict();
jQuery("div p").hide(); // 使用 jQuery
$("content").style.display = "none"; // 使用其他库的 $() 

2. Pulihkan penggunaan alias $, dan kemudian buat dan laksanakan fungsi, masih menggunakan $ sebagai alias untuk jQuery dalam skop fungsi ini. Dalam fungsi ini, objek $ asal tidak sah. Fungsi ini berfungsi dengan baik untuk kebanyakan pemalam yang tidak bergantung pada perpustakaan lain:

jQuery.noConflict();
(function($) { 
 $(function() {
  // 使用 $ 作为 jQuery 别名的代码
 });
})(jQuery);
... // 其他用 $ 作为别名的库的代码

3. Anda boleh menggabungkan jQuery.noConflict() dengan singkatan sedia untuk menjadikan kod lebih padat:

jQuery.noConflict()(function(){
  // 使用 jQuery 的代码
});
... // 其他库使用 $ 做别名的代码

4. Cipta alias baharu untuk menggunakan objek jQuery dalam pustaka seterusnya:

var j = jQuery.noConflict();
j("div p").hide();  // 基于 jQuery 的代码
$("content").style.display = "none";// 基于其他库的 $() 代码

5. Alihkan sepenuhnya jQuery ke ruang nama baharu:

var dom = {};
dom.query = jQuery.noConflict(true);
//结果:
dom.query("div p").hide();  // 新 jQuery 的代码
$("content").style.display = "none";  // 另一个库 $() 的代码
jQuery("div > p").hide();  // 另一个版本 jQuery 的代码

Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang.