Memahami dan Mengatasi Konflik pada Script jQuery

jQuery sebagai salah satu framework turunan JavaScript yang paling banyak digunakan juga rentan terhadap bentrok antar script baik script dengan script pada framework yang sama atau dengan script dengan framework berbeda. Sebenarnya website resmi jQuery sudah memberikan solusi yang sangat mudah untuk mengatasi bentrok antar script ini.

Perintah dasar jQuery selalu diawali dengan simbol "$" (tanpa tanda kutip) atau kita mengenal simbol ini dengan nama "Dollar". Ini sebagai identitas perintah-perintah jQuery, jadi jika teman-teman blogger menemukan script yang selalu diawali dengan tanda "$" maka ini adalah script jQuery. Dan sudah menjadi kewajiban bahwa script jQuery ini harus didampingi framework jQuery-nya sebagai sistem dasar.

Framework jQuery haruslah terlebih dahulu dipanggil (load) agar deklarasi-deklarasi script yang kita buat mampu berjalan normal. Ibaratnya jQuery itu adalah rumah dan script-script yang kita buat adalah isi dari rumah itu.

Memasang Framework jQuery

Untuk memasang framework jQuery, simpan kode seperti ini di atas </head> (saat ini versi terbaru adalah v.2.1.1)

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js' type='text/javascript'></script>

Harus diingat, pemasangan framework ini cukup satu saja. Apabila lebih dari satu, maka script tidak akan bekerja. Ada pertanyaan, versi mana yang paling baik digunakan? Tentunya versi terbaru memuat berbagai perbaikan. Akan tetapi terkadang tidak menjadi jaminan 100% script akan bekerja dengan framework terbaru. Terkadang ada saja script yang bekerja dengan framework versi sebelumnya.

Mengatasi Konflik Script jQuery

Seperti sudah dijelaskan diatas bahwa script jQuery selalu diawali dengan simbol "$", simbol inilah yang harus diperhatikan karena simbol ini merupakan sebuah deklarasi fungsi-fungsi jQuery. Maka ini pula yang menjadi solusi untuk mengatasi konflik script-script jQuery. Bagaimana mengatasi konfliknya? Contoh dibawah ini merupakan cara yang mudah untuk mengatasi konflik jQuery.

Perhatikan contoh script yang belum ditambahkan deklarasi untuk mengatasi konflik dibawah ini:

$(document).ready(function(){
$("a.slick").click(function () {
$(".active").removeClass("active");
$(this).addClass("active");
$(".content-slick").slideUp();
var content_show = $(this).attr("title");
$("#"+content_show).slideDown();
});
});

Script diatas sebenarnya sudah berjalan dengan baik akan tetapi kemungkinan bentrok sangat mudah terjadi. Perhatikan contoh script yang sudah ditambahkan deklarasi untuk mengatasi konflik dibawah ini:

var $jnoc = jQuery.noConflict();
$jnoc(document).ready(function(){
$jnoc("a.slick").click(function () {
$jnoc(".active").removeClass("active");
$jnoc(this).addClass("active");
$jnoc(".content-slick").slideUp();
var content_show = $jnoc(this).attr("title");
$jnoc("#"+content_show).slideDown();
});
});

Bandingkan contoh script diatas maka kita akan menemukan perbedaan yang sebenarnya sangat sederhana.

Penjelasan :

1. var $jnoc = jQuery.noConflict(); adalah script untuk mendeklarasikan fungsi jQuery.noConflict yang berfungsi untuk mengatasi konflik-konflik JavaScript
2. $jnoc pada script berikutnya merupakan script untuk menggantikan fungsi dasar simbol "$" sehingga jika kita perhatikan maka sebenarnya semua simbol "$" tergantikan oleh script jQuery.noConflict hanya diwakilkan kepada script $jnoc yang sudah dideklarasikan sebelumnya pada baris 1.
3. $jnoc bisa saja diganti dengan kata apapun sesuai dengan keinginan anda, asalkan sesuai dengan kata yang dideklarasikan sebelumnya sebagai wakil dari script jQuery.noConflict pada baris 1.

Semoga bermanfaat...