Cara Mengatasi Konflik Pada JQuery

Pada kesempatan kali ini saya akan menjelaskan cara mengatasi konflik pada JQuery. perlu teman-teman ketahui sebelumnya, jika terlalu banyak menggunakan kode javascript di dalam website yang teman-teman buat, terkadang terdapat beberapa kendala konfliknya JQuery, atau yang biasa di sebut dengan istilah bentrok. Banyak pustaka JavaScript menggunakan $ sebagai nama fungsi atau variabel, sama seperti jQuery. Dalam kasus jQuery, $ hanya sebuah alias untuk jQuery, jadi semua fungsi tersedia tanpa menggunakan $. Jika teman-teman perlu menggunakan pustaka JavaScript lain bersama jQuery, kembalikan kontrol $ kembali ke perpustakaan lain dengan panggilan ke $ .noConflict (). Referensi lama $ disimpan selama inisialisasi jQuery; NoConflict () hanya mengembalikan mereka.

Jika karena beberapa alasan, dua versi jQuery dimuat (yang tidak disarankan), memanggil $ .noConflict (true) dari versi kedua akan mengembalikan variabel jQuery secara global ke versi yang pertama, seperti contoh kode di bawah ini :

<script src="other_lib.js"></script>
<script src="jquery.js"></script>
<script>
$.noConflict();
// Kode yang menggunakan library lain $ bisa ikuti disini
</script>

Teknik ini sangat efektif dalam hubungannya dengan kemampuan .ready() metode untuk alias objek jQuery, seperti dalam callback yang dilewatkan ke .ready(), teman-teman dapat menggunakan $ jika teman-teman menginginkannya tanpa takut konflik nantinya, seperti contoh kode di bawah ini :

<script src="other_lib.js"></script>
<script src="jquery.js"></script>
<script>
$.noConflict();
jQuery( document ).ready(function( $ ) {
  // Kode yang menggunakan jQuery's $ bisa ikuti di sini.
});
// Kode yang menggunakan library lain $ bisa ikuti disini.
</script>

Jika perlu, teman-teman bisa membebaskan nama jQuery juga dengan cara benar sebagai argumen metode ini. Dan ini jarang diperlukan, dan jika teman-teman harus melakukan ini (seperti halnya, jika teman-teman perlu menggunakan beberapa versi perpustakaan jQuery pada halaman yang sama), maka perlu mempertimbangkan bahwa sebagian besar plug-in bergantung kepada adanya variabel jQuery dan mungkin tidak beroperasi dengan benar dalam situasi ini.

Seperti Contoh Di Sini

jQuery.noConflict();
// Lakukan sesuatu dengan jQuery.
jQuery( "div p" ).hide();
// Lakukan sesuatu dengan perpustakaan lain $()
$( "content" ).style.display = "none";

Kembalikan $ alias dan buat dan jalankan fungsi untuk memberikan $ sebagai alias jQuery di dalam lingkup fungsi. Di dalam fungsi, objek $ asli tidak tersedia. Ini bekerja dengan baik untuk kebanyakan plugin yang tidak bergantung pada perpustakaan lain, seperti kode di bawah ini :

jQuery.noConflict();
(function( $ ) {
  $(function() {
    // Kode lebih banyak menggunakan $ sebagai alias untuk jQuery
  });
})(jQuery);
 
// Kode lainnya menggunakan $ sebagai alias ke library lainnya

Untuk penerapan pada kasus yang teman-teman temui dapat di sesuaikan lagi.

Sampai di sini penjelasan saya mengenai cara mengatasi konflik pada JQuery, semoga bermanfaat.