Manajemen Script jQuery

Bismillah. Bagi para modifikator script jQuery melakukan copy, paste, delete, move dan lain sebagainya merupakan kegiatan yang paling sering dilakukan pada script-script yang telah dan akan dituliskan. Script-script yang telah kita tuliskan terkadang membuat kita bingung jika salah satu atau beberapa script yang telah kita buat ingin kita buang, tambahkan, atau dipindahkan, hal ini karena begitu banyaknya script yang sudah kita tuliskan. Jalan paling cepat adalah dengan mem-bakcup template blog kita sebelum kita lakukan perbaikan, penambahan atau sekedar modifikasi pada script-script jQuery yang sudah kita tuliskan. Backup template merupakan tindakan preventif sebelum kita melakukan modifikasi pada script yang sudah kita tuliskan, hal ini bermanfaat jika terjadi error pada template setelah dilakukan modifikasi maka kita bisa mengembalikan template ke posisi semula pada saat sebelum dilakukan modifikasi.

Untuk memudahkan dan mempercepat proses modifikasi pada script-script jQuery kita bisa memanajemen script-script tersebut dengan deklarasi nama-nama fungsi yang mudah diingat. Deklarasi nama-nama fungsi tersebut sangat bermanfaat karena kita bisa dengan mudah menemukan fungsi-fungsi script yang sudah kita tuliskan tanpa takut salah sasaran. Bagaimana cara memanajemen fungsi-fungsi pada script jQuery tersebut?

Ketentuan Umum Penulisan Script jQuery

Pada umumnya fungsi script jQuery dituliskan dengan ketentuan seperti dibawah ini:

$(document).ready(function(){
Script Fungsi 1
});
$(document).ready(function(){
Script Fungsi 2
});
$(document).ready(function(){
Script Fungsi 3
});

Dan atau ada juga yang menyederhakannya seperti dibawah ini:

$(document).ready(function(){
Script Fungsi 1

Script Fungsi 2

Script Fungsi 3
});

Dapat kita bayangkan jika masing-masing fungsi script diatas terdiri lebih dari 10 baris. (Hmmm bayangkan sendiri...)

Deklarasi Nama Fungsi Script jQuery

Agar fungsi-fungsi yang kita tuliskan mudah untuk ditemukan kembali disuatu hari, maka kita perlu membagi-bagi fungsi tersebut kedalam suatu frame (nama fungsi). Prinsip ini sama dengan prinsip folder file pada komputer kita. Jika kita memiliki folder dengan nama misalnya "gambar" maka dapat dipastikan isinya berupa file gambar. Demikian juga pada fungsi script jQuery, kita hanya perlu mengkategorikan atau memberi label fungsi tersebut dengan nama yang unik dan menggambarkan fungsi dari script-nya.

Misal, saya memiliki 3 kumpulan fungsi script jQuery yaitu; kumpulan script 1 adalah fungsi "Kwicks Menu", kumpulan script 2 adalah fungsi "Font Resizer", dan kumpulan script 3 adalah fungsi "Image Facebox". Awalnya saya menulis script tersebut seperti dibawah ini:

$(document).ready(function(){
Script Fungsi Kwicks Menu
});

$(document).ready(function(){
Script Fungsi Font Resizer
});

$(document).ready(function(){
Script Fungsi Image Facebox
});

Kemudian fungsi script diatas dikategorikan agar mudah diingat menjadi seperti dibawah ini:

function kwicks_menu(){
Script Fungsi Kwicks Menu
}

function font_resizer(){
Script Fungsi Font Resizer
}

function image_facebox(){
Script Fungsi Image Facebox
}

Dengan cara diatas kita dapat dengan mudah menemukan fungsi script yang ingin kita modifikasi. Tetapi fungsi diatas jelas tidak dapat bekerja, karena fungsi-fungsi itu tidaklah dideklarasikan sebagai fungsi jQuery, tetapi dideklarasi sebagai fungsi JavaScript biasa. Perhatikan script peng-kategorian diatas telah menghilangkan script dibawah ini:

$(document).ready(function(){ 

Sedangkan script ini digunakan untuk mendeklarasikan bahwa semua script yang ada diantaranya merupakan fungsi-fungsi jQuery yang akan melakukan sinkronisasi dengan framework jQuery-nya. Bagaimana agar script yang sudah kita kategorikan dapat di-load (panggil) lagi sebagai fungsi-fungsi jQuery? Maka kita hanya perlu menuliskan script yang hilang dan memasukan deklarasi nama fungsi yang sudah kita tuliskan diatas seperti dibawah ini:

$(document).ready(function(){
kwicks_menu();
font_resizer();
image_facebox();
});

Dengan script diatas maka script yang sudah dideklarasi nama fungsinya (dikategorikan) akan diload sebagai fungsi jQuery.

Sederhananya seperti dibawah ini:
Sebelum dideklarasikan nama fungsinya (dikategorikan):

$(document).ready(function(){
Script Fungsi Kwicks Menu
});
$(document).ready(function(){
Script Fungsi Font Resizer
});
$(document).ready(function(){
Script Fungsi Image Facebox
});

Setelah dideklarasikan nama fungsinya dan diload sebagai fungsi jQuery:

// Awal deklarasi nama fungsi (pengkategorian)
function kwicks_menu(){
Script Fungsi Kwicks Menu
}
function font_resizer(){
Script Fungsi Font Resizer
}
function image_facebox(){
Script Fungsi Image Facebox
}
// Akhir deklarasi nama fungsi (pengkategorian)

// Awal pemanggilan script sebagai fungsi jQuery
$(document).ready(function(){
kwicks_menu();
font_resizer();
image_facebox();
});
// Akhir pemanggilan script sebagai fungsi jQuery

Keterangan:

Fungsi-fungsi yang sudah dideklarasikan dengan nama sesuai fungsinya (pengkategorian) dapat disimpan sebagai file JavaScript (.js) terpisah tanpa perlu diintergrasikan pada template, sedangkan pada template kita hanya perlu memanggil (load) nama fungsinya saja.

Source Code Manajemen Script jQuery

Alhamdulillah... Demikianlah cara memanajemen script-script jQuery. Mudah-mudahan bermanfaat...