Konflik Plugin jQuery Blog

Script-script yang dibuat menggunakan perintah dasar JavaScript memang sepertinya 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 pernah di temukan bahkan membuat error halaman "Tata Letak - Elemen Laman" dengan keterangan "Error Page 404 Not Found"...

jQuery sebagai salah satu framework turunan JavaScript yang paling banyak digunakan juga nyatanya 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 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:

1. jQuery Google API
Cara  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 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"/>
3. jQuery Google API Autoload
Cara 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"></script>

Pilih 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)

.Periksa 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 katanya harus di pake, dan 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 di gunakan untuk mengatasi konflik jQuery.


Perhatikan contoh script yang belum ditambahkan deklarasi untuk mengatasi konflik:


1. $(document).ready(function(){
2. $("a.slick").click(function () {
3. $(".active").removeClass("active");
4. $(this).addClass("active");
5. $(".content-slick").slideUp();var content_show =
6. $(this).attr("title");
7. $("#"+content_show).slideDown();
8. });
9. });


Script diatas sebenarnya sudah berjalan dengan baik akan tetapi nyatanya bentrok sangat mudah terjadi.


Perhatikan contoh script yang sudah ditambahkan deklarasi untuk mengatasi konflik:


1. var $jnoc = jQuery.noConflict();
2. $jnoc(document).ready(function(){
3. $jnoc("a.slick").click(function () {
4. $jnoc(".active").removeClass("active");
5. $jnoc(this).addClass("active");
6. $jnoc(".content-slick").slideUp();var content_show =
7. $jnoc(this).attr("title");
8. $jnoc("#"+content_show).slideDown();
9. });
10. });


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 "$"


Jika di 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, asalkan sesuai dengan kata yang dideklarasikan sebelumnya sebagai wakil dari script jQuery.noConflict pada baris 1.
Solusi Untuk mengatasi permasalahan diatas, berikut tips dan trik yang dapat Anda gunakan guna menghindari konflik antar plugin jQuery. Catatan : Penjelasan juga akan disertakan di komentar setiap perintah. Mohon dibaca dengan teliti dan seksama.

Solusi 1 – Mengatasi Konflik Antar Library Javascript

Cara 1 Solusi ini dapat Anda gunakan jika aplikasi web yang Anda bangun terdiri dari beberapa library Javascript (jQuery, Prototype, MooTools, ataupun YUI). Misalkan, Anda membangun aplikasi web menggunakan 2 library Javascript yaitu jQuery dan Prototype. Maka Anda cukup menambahkan perintah noConflict seperti berikut :

<script src="prototype.js"></script> <!-- Memasukkan library Prototype -->
<script src="jquery.js"></script> <!-- Memasukkan library jQuery -->
<script>
var $j = jQuery.noConflict(); // Membuat variabel baru untuk perintah jQuery yaitu $j
// Nantinya setiap menuliskan perintah jQuery, variabel jQuery yang Anda gunakan ialah $j bukan $
$j(document).ready(function() { // Perintah jQuery
$j( "div" ).hide();
});
 
// Sekarang variabel $ digunakan untuk mendeskripsikan setiap perintah library Prototype BUKAN jQuery
// Perintah dibawah merupakan perintah Prototype
window.onload = function() {
var mainDiv = $( "main" );
}
</script>

Cara 2 Cara lainnya yang bisa Anda gunakan ialah dengan membuat area lokal khusus untuk perintah jQuery. Misal :

 
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
jQuery.noConflict(); //
jQuery( document ).ready(function( $ ) {
// Silahkan tuliskan semua perintah jQuery disini. Variabel yang Anda gunakan tetap tanda $ tanpa ada perubahan
$( "div" ).hide();
});
 
// Untuk area global/luar, variabel $ akan digunakan sebagai perintah Prototype
window.onload = function(){
var mainDiv = $( "main" );
}
</script>

Cara ini cocok digunakan jika Anda tidak ingin ada perubahan pada setiap variabel jQuery.

Solusi 2 – Mengatasi Konflik Antar Versi Plugin jQuery

Ketika membangun aplikasi web, dengan berbagai sebab akhirnya developer memutuskan untuk menuliskan perintah jQuery dengan beberapa versi jQuery. Maksudnya ialah, aplikasi web yang dibangun memiliki perintah jQuery yang ditulis dalam beberapa versi misal ada perintah yang ditulis dan dapat berjalan pada versi 1.5. Ada pula beberapa perintah yang ditulis dan dijalankan pada versi terbaru jQuery.
Nah, jika aplikasi web ini dijalankan tentu akan terjadi konflik pada plugin jQuery-nya. Dikarenakan terdapat dua atau lebih versi jQuery yang dijalankan secara bersamaan. Untuk mengatasi hal tersebut berikut perintah yang dapat Anda guanakan.

 
<script src="jquery-1.5.1.js"></script> // jQuery versi 1.5.1
<script src="jquery-1.10.2.js"></script> // jQuery versi 1.10.2
<script type="text/javascript">
var jQuery_1_5_1 = $.noConflict(true); // Membuat variabel baru untuk perintah jQuery versi 1.5.1 yaitu jQuery_1_5_1
 
jQuery_1_5_1(document).ready(function(){ // Nantinya setiap perintah jQuery versi 1.5.1 selalu gunakan variabel jQuery_1_5_1
// Perintah jQuery yang dijalankan pada versi 1.5.1
});
 
// Variabel $ akan digunakan untuk menuliskan perintah jQuery versi 1.10.2
$(document).ready(function() { // Perintah jQuery yang dijalankan pada versi 1.10.2
$( "div" ).hide();
});
</script>

Kesimpulan Salah satu faktor yang menyebabkan library Javascript tidak berjalan ialah dikarenakan terjadi konflik antar library. Untuk mengatasi konflik tersebut silahkan pilih dan gunakan salah satu dari cara diatas. Semoga bermanfaat.

Tweet