Peperangan Framework JavaScript - Prototype v.s. jQuery

Suatu hari aku menemukan perpustakaan (baca:library) yang didalamnya begitu banyak buku (baca:code) yang menarik, kemudian aku baca dan aku terapkan didalam kehidupanku (baca:blogku). Perpustakaan tersebut diberi nama jQuery dan aku sangat suka dengan bacan-bacaan didalamnya. Petulanganpun aku lanjutkan, dalam petualangan tersebut aku menemukan kembali sebuah perpustakaan yang didalamnya juga ternyata banyak bacaan menarik, tidak kalah dengan perpustakaan jQuery. Perpustakaan tersebut diberi nama Prototype yang didalamnya penuh bacaan yang akan membawa pembacanya ke hal-hal baru.

Petualangan demi petualangan dilakukan dan satu persatu perpustakaan-perpustakaan ditemukan dibelantara dunia maya, berbagai kelebihan dan kekurangan dari setiap perpustakaan tersebut ditemukan. Maksud hati ingin menggabungkan kelebihan-kelebihan tersebut, tetapi ternyata tidak semudah itu. Library JavaScript tersebut ternyata tidak bersahabat satu dengan lainnya, peperangan pun terjadi, mereka saling menjatuhkan satu sama lain. Jika salah satu framework berjalan dengan baik maka framework yang lain dapat dipastikan tidak berjalan, satu kode mematikan kode yang lain.

Dalam kasus kali ini, kita akan mencoba mendamaikan dua framework yang saling menjatuhkan, yaitu jQuery Library dan Prototype Library. Kasus ini ditemukan pada saat Blogger TuneUp mencoba menggabungkan EFEK PAGEFEEL dan EFEK LIGHTBOXpada blog Electronic Project. Disaat mencoba mengaktifkan efek Pageflip dengan framework jQuery maka efek LightBox dengan framework Prototype tidak dapat bekerja, begitupun sebaliknya. Setelah ditelaah ternyata masalahnya terletak pada penggunaan shortcut yang sama, jQuery dengan Prototype bahkan beberapa framework lainnya menggunakan shortcut $. Hal ini entah kesengajaan atau memang masih satu developer?

Ada beberapa cara untuk mengatasi konflik jQuery dan Prototype, dibawah ini hanya kasus yang sudah ditemukan:

Dibawah ini script efek PageFlip dengan framework jQuery sebelum dimodifikasi:

<script src='jquery.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$("#pageflip").hover(function() {
$("#pageflip img , .msg_block").stop()
.animate({width: '307px',height: '319px'}, 500);}, function() {
$("#pageflip img").stop()
.animate({width: '50px',height: '52px'}, 220);
$(".msg_block").stop()
.animate({width: '50px',height: '50px'}, 200);
});
});
</script>

Dibawah ini script efek LightBox dengan framework Prototype sebelum dimodifikasi:

<script src='prototype.js' type='text/javascript'/>
<script src='scriptaculous.js?load=effects,builder' type='text/javascript'/>
<script src='lightbox.js' type='text/javascript'/>

Dengan cara diatas, dapat dipastikan ada efek yang tidak berjalan. Jika posisi penempatan jQuery di atas maka Prototype dapat berjalan dengan baik, tetapi jika posisi penempatan Prototype diatas maka jQuery yang berjalan dengan baik.

Pemecahannya dengan mengubah shortcut "$" menjadi "jQuery" dan menambahkan kode jQuery.noConflict(); sebagai berikut:
Modifikasi jQuery Library;

<script src='prototype.js' type='text/javascript'/>
<script src='jquery.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery("#pageflip").hover(function() {
jQuery("#pageflip img , .msg_block").stop()
.animate({width: '307px',height: '319px'}, 500);}, function() {
jQuery("#pageflip img").stop()
.animate({width: '50px',height: '52px'}, 220);
jQuery(".msg_block").stop()
.animate({width: '50px',height: '50px'}, 200);
});
});
</script>

Modifikasi Prototype Library;

<script src='scriptaculous.js?load=effects,builder' type='text/javascript'/>
<script src='lightbox.js' type='text/javascript'/>

Perhatikan:

* Prototype Library ditempatkan diatas jQuery Library.
* Tambahkan kode "jQuery.noConflict();" pada script jQuery.
* Ubah shortcut "$" menjadi "jQuery" pada script jQuery.

Sampai disini konflik yang terjadi sudah bisa diatasi dan kedua efek bisa berjalan bersamaan. Silahkan dibaca disini untuk mengetahui lebih lanjut tentang pemecahan konflik antar framework terutama jQuery.

Dibawah ini link yang menuju berbagai framework JavaScript Librarypopuler:

* jQuery
* Prototype
* MooTools
* Scriptaculous
* jQuerYUI
* Dojo

Mudah-mudahan cara diatas dapat membantu teman-teman yang punya permasalahan sama, Happy Blogging... :-)