API merupakan kependekan dari Application Programming Interface atau Antarmuka Pemrograman Aplikasi yang merupakan seperangkat aturan tertentu dan spesifik yang mengikuti program perangkat lunak untuk saling berkomunikasi satu sama lain. API berfungsi sebagai antar muka (interface) antara perangkat lunak yang berbeda dan memfasilitasi interaksi mereka, hal ini mirip dengan cara antar muka pengguna (user interface) yang mampu memfasilitasi interaksi antara manusia dengan komputer.
Perpustakaan Google API atau Google Libraries API adalah sebuah jaringan distribusi konten (Content Distribution Network - CDN) dan arsitektur pemanggilan dari perpustakaan JavaScript lisensi terbuka (open-source JavaScript libraries) yang paling populer dan banyak digunakan di dunia. Dengan menggunakan metode Google API Loader google.load() ini akan mampu meningkatkan kecepatan aplikasi yang kita buat dengan memberikan akses kedalam daftar terbaik yang paling populer.
Cara ini sebenarnya pernah dibahas pada artikel "Perpustakaan jQuery pada Blogger" tentang penggunaan jQuery Google API Load. Untuk dapat menggunakan berbagai script code jQuery maka terlebih dahulu website harus diintegrasikan dengan framework jQuery. Untuk mengintegrasikannya bisa dengan berbagai cara seperti yang pernah dibahas pada artikel diatas, namun pada kasus kali ini kita akan mencoba mengintegrasikan framework jQuery dengan metode Google API Load seperti dibawah ini:
<script src='https://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[
google.load('jquery', '1.4.2');
//]]></script>
Maksimalkan Kerja jQuery
Mulai keinti materi yang lumayan membuat pusing. Mungkin persiapkan dulu obat sakit kepala supaya agak ringan dalam berfikir. (hehehehe...)
Skenario I
Skenario-nya begini, bahwa kita akan membuat tiga buah efek yang berbeda dalam setiap event-nya. Misal; satu efek berpengaruh pada menu navigasi, satu efek berpengaruh pada gambar dan satu efek lagi berpengaruh pada tombol. Maka saya pun menuliskan script jQuery-nya seperti dibawah ini:
Script jQuery untuk memberikan efek pada gambar :<script type='text/javascript'>
$(document).ready(function() {
$('.post img').fadeTo('slow',0.5);
$('.post img').hover(function(){
$(this).fadeTo('slow',1.0);
},function(){
$(this).fadeTo('slow',0.5);
});
});
</script>
Script jQuery untuk memberikan efek pada menu navigasi:
<script type='text/javascript'>
$(document).ready(function() {
$('ul#navi li').hover(function() {
$(this).css({ 'background' : 'transparent'});
$(this).find('span').show();
}, function() {
$(this).css({ 'background' : 'none'});
$(this).find('span').hide();
});
});
</script>
Script jQuery untuk memberikan efek pada tombol:
<script type='text/javascript'>
$(document).ready(function () {
$('.drop-btn').click(function () {
$('.drop').slideToggle('medium');
});
});
</script>
Ketiga kelompok script code diatas semuanya ditulis dengan benar dan dapat berjalan normal pada website. Namun, logikanya begini; seandainya diumpamakan bahwa kelompok script diatas adalah muatan yang harus di antar sampai sebuah tempat (tempat=framework jQuery). Kemudian kita menggunakan sebuah kendaraan (browser) sebagai alat transportasinya maka kendaraan ini akan bolak-balik sebanyak enam kali (3 kali berangkat dan 3 kali pulang) untuk mengantar ketiga kelompok script tersebut sampai tujuan. Jika dalam satu perjalanan dibutuhkan 1 detik maka kendaraan tersebut membutuhkan 6 detik waktu yang diperlukan untuk memuat seluruh script dari ketiga kelompok tersebut.
Skenario II
Karena dibutuhkan waktu yang cukup banyak untuk memuat keseluruhan muatan (script) agar sampai tujuan (framework jQuery) maka saya pun akan mencoba memadatkan ketiga kelompok script tersebut menjadi satu muatan, maka script akan menjadi seperti dibawah ini:
<script type='text/javascript'>
$(document).ready(function() {
$('.post img').fadeTo('slow',0.5);
$('.post img').hover(function(){
$(this).fadeTo('slow',1.0);
}, function(){
$(this).fadeTo('slow',0.5);
});
$('ul#navi li').hover(function() {
$(this).css({ 'background' : 'transparent'});
$(this).find('span').show();
}, function() {
$(this).css({ 'background' : 'none'});
$(this).find('span').hide();
});
$('.drop-btn').click(function () {
$('.drop').slideToggle('medium');
});
});
</script>
Setelah kita mengumpulkan ketiga kelompok script diatas menjadi satu muatan maka kendaraan transportasi (browser) hanya akan mengirimkan script menuju ke tujuan (framework jQuery) hanya dengan satu kali pengiriman. Lebih cepat bukan? Sampai disini sebenarnya kita telah mampu membuat sekumpulan script jQuery yang lebih cepat di akses dari pada script sebelumnya dan browser pun hanya cukup satu kali mengirimkan script yang telah kita buat.
Skenario III
Adakah cara yang lebih cepat lagi untuk "mengantar" script-script jQuery yang kita buat menuju framework jQuery? Jawabannya "BISA". Metode yang digunakan bukan lagi "mengantar" namun "menjemput". Mengantar adalah pekerjaan yang cukup melelahkan bagi browser bahkan terkadang tidak semua script yang telah dibuat mampu diantar ke tujuan dengan baik, akibatnya akan ada script yang tidak mampu bekerja dengan baik pada website kita. (Pernahkah anda menemukan kasus seperti itu?) Semua script telah ditulis dengan baik atau bahkan hasil dari copy paste dari website lain yang sudah berjalan dengan baik, namun ketika script itu kita terapkan pada website kita, script tidak mampu bekerja dengan baik. Salah satu masalahnya adalah ketidaksempurnaan browser dalam "mengantarkan" script-script tersebut sampai ketujuan. Lalu bagaimana dengan "menjemput"? Kata menjemput bisa berarti bahwa pekerjaan dibagi menjadi dua, script-script yang ditulis pada website bukan lagi tugas browser untuk menyampaikannya ke framework, browser hanya bertugas menampilkan hasil dari proses eksekusi script-script yang ditulis. Lalu siapa yang "menjemput" script-script yang telah ditulis? Itu menjadi tugas Google API Loader.
Syntax dari Google API Loader untuk "menjemput" script-script jQuery mempunyai aturan spesifik yang wajib ditulis, yaitu:
google.setOnLoadCallback(function(){
//script jQuery disini
});
$(document).ready(function() {
//script jQuery disini
});
Sehingga penulisan script jQuery yang menggunakan Google API Loader menjadi seperti contoh dibawah ini:
google.setOnLoadCallback(function(){
$('.post img').fadeTo('slow',0.5);
$('.post img').hover(function(){
$(this).fadeTo('slow',1.0);
},function(){
$(this).fadeTo('slow',0.5);
});
$('ul#nav li').hover(function(){
$(this).css({'background':'transparent'});
$(this).find('span').show();
},function(){
$(this).css({'background':'none'});
});
$('.drop-btn').click(function(){
$('.drop').slideToggle('medium');
});
});
Dan total penulisan script jQuery dari mulai framework jQuery sampai dengan script jQuery Google API Loader akan menjadi seperti dibawah ini:
<script src='https://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[
google.load('jquery', '1.4.2');
google.setOnLoadCallback(function(){
$('.post img').fadeTo('slow',0.5);
$('.post img').hover(function(){
$(this).fadeTo('slow',1.0);
},function(){
$(this).fadeTo('slow',0.5);
});
$('ul#nav li').hover(function(){
$(this).css({'background':'transparent'});
$(this).find('span').show();
},function(){
$(this).css({'background':'none'});
});
$('.drop-btn').click(function(){
$('.drop').slideToggle('medium');
});
});
//]]></script>
Kerja sebenarnya tidaklah seperti pada penjelasan skenario II dan skenario II, namun ini hanya bahasa penyampaian yang disederhanakan untuk memahami bagaimana script-script tersebut di eksekusi. Ma'af bagi para master jQuery yang merasa keberatan dengan perumpamaan diatas. Pembahasan teknis mendalam sebenarnya harus menyentuh debug dan debuger namun hal itu memang cukup rumit. Mungkin lain waktu My Information akan mencoba menyuguhkan bahasan yang lebih teknis.
Tugas buat para sahabat blogger, apakah anda menemukan kejanggalan pada script diatas? Bandingkanlah script antara Skenario II dan Skenario III. Jika ditemukan kejanggalan script, itulah bug (kesalahan script) yang ditemukan pada saat sudah menggunakan Google API Loader.
Mari belajar dan berdiskusi. Happy Blogging :)
Mari belajar dan berdiskusi. Happy Blogging :)
2 Responses to "Maksimalkan Kerja Jquery Dengan Google API Loader"
mantap.... http//:gemarmencariilmu.blogspot.com/
bener juga baru baca aja udah pusing..gmn klu nyoba,,,gk sanggup dechh,,
Post a Comment