Bismillah. Sebenarnya artikel ini pernah dibahas sebelumnya dengan judul artikel "Peperangan Framework JavaScript - Prototype v.s. jQuery" tapi mungkin karena sangat sulit dijabarkan maka Blogger Tune-Up menyederhanakan artikel tersebut agar mudah untuk dipahami. Script-script yang dibuat menggunakan perintah dasar JavaScript memang rentan terjadi bentrok antar script baik karena kesamaan script, kesamaan fungsi ataupun kesamaan perintah sehingga script-script yang dibuat saling mengalahkan atau bahkan saling meniadakan satu sama lain dan itu juga terjadi pada turunan-turunan JavaScript seperti halnya jQuery. Hal ini bisa saja berakibat fatal, beberapa kasus yang Blogger Tune-Up pernah temukan bahkan membuat error halaman "Tata Letak - Elemen Laman" dengan keterangan "Error Page 404 Not Found" (dibahas menyusul).
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 tetapi tidak ada salahnya Blogger Tune-Up kembali membantu membahasnya, terutama bagi mereka yang menemukan fungsi-fungsi jQuery yang tidak bekerja dengan baik.
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.
Pemasangan Framework jQuery pada Blogger
Beruntunglah para webdesigner yang suka dengan framework jQuery karena framework ini didukung penuh oleh raksasa IT yaitu Google. Google menyediakan resource jQuery baik untuk digunakan maupun untuk dikembangkan, sehingga kita sebagai blogger yang lebih suka menggunakan tidaklah mengalami kesulitan untuk memasang framework jQuery pada blog kita. Untuk memasang framework jQuery pada blog kita, Google telah menyediakan beberapa cara yang mudah, diantaranya:
1. jQuery Google API
Cara kesatu ini adalah cara yang paling mudah dan paling aman dengan tingkat resiko error handle script paling kecil
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
2. jQuery Google API Load
Cara kedua ini adalah cara yang Google jelaskan sebagai teknik yang paling aman, cepat dan ringan untuk memanggil framework jQuery
<script src='http://www.google.com/jsapi'/>
<script>
google.load("jquery", "1.3.2");
</script>
3. jQuery Google API Autoload
Cara ketiga ini memiliki tingkat error handle script sangat tinggi tetapi merupakan teknik yang paling cepat dalam memanggil framework jQuery
<script src='http://www.google.com/jsapi?autoload={"modules" : [{"name" : "jquery","version" : "1.3.2"}]}' type='text/javascript'/>
Cara kedua dan ketiga pernah dibahas pada artikel "Mempercepat Pemuatan Perpustakaan JavaScript". Pilihlah salah satu dari ketiga cara diatas dan harus diperhatikan bahwa pemanggilan Framework jQuery hanya perlu satu kali, karena jika di panggil (load) berulang maka ini akan memberatkan proses Pageload (pemanggilan halaman). Periksalah template dan widget blog anda dari kemungkinan pemasangan script framework jQuery yang berulang, jika ditemukan maka hapuslah dan sisakan satu saja serta prioritaskan pemanggilan framework jQuery pada template saja.
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 sering Blogger Tune-Up gunakan 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:- var $jnoc = jQuery.noConflict(); adalah script untuk mendeklarasikan fungsi jQuery.noConflict yang berfungsi untuk mengatasi konflik-konflik JavaScript
- $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.
- $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.
Alhamdulillah. Mudah-mudahan artikel kali ini bisa dimengerti, jika masih bingung silahkan tinggalkan pada kotak komentar....
