Kemudahan jQuery dengan Tagline-nya "write less, do more" telah membuat para web developer untuk menggunakan salah satu Framework Javascript yang terbaik ini. Sebelum hadirnya jQuery dalam dunia pemrograman website, pembuatan kode JavaScript tidak mudah untuk digunakan apalagi untuk mendapatkan kualitas yang maksimal pada Cross-Browser.

Kali ini saya akan coba membagikan beberapa Tips dan Tricks atau juga dapat dikatakan Teknik jQuery yang dapat kita gunakan untuk meningkatkan kualitas Code yang kita miliki.

Jika Anda sudah familiar menggunakan jQuery, mungkin ada beberapa hal yang Anda lewatkan untuk membuat Code Anda diproses secara optimal oleh Client-Side, Apalagi jika Anda mulai menggunakan jQuery hanya mendownload dan membaca dokumentasi penggunaannya secara singkat. Tapi tahukah Anda jika ada beberapa teknik yang dapat digunakan untuk menggunakan jQuery secara maksimal sehingga berdampak pada performa Code baik dari segi kecepatan, struktur, dan hal yang menguntungkan lainnya.

Berikut ini adalah beberapa teknik yang dapat Anda gunakan untuk melakukan hal tersebut.

Load jQuery langsung dari Server Google atau jQuery.com

Mungkin sebagian dari Anda telah banyak membaca dari blog-blog atau sumber yang lain bahwa teknik ini adalah salah satu cara yang optimal untuk meng-improve jQuery tapi untuk me-refresh Anda, saya tetap akan menuliskannya disini.

Contoh pertama misalnya kita ingin me-Load jQuery v1.10.2 dari server google, mungkin biasanya kita menuliskannya dengan cara berikut :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>

Sebenarnya, Anda cukup menuliskan code yang lebih sederhana seperti berikut :

<script src="http://code.jquery.com/jquery-latest.js"></script>

Cara Memastikan Inisialisasi Gambar Selesai

Memastikan gambar terinisialisasi merupakan cara yang dapat Anda gunakan untuk meningkatkan interaktivitas kepada para pengguna.

Jika Anda ingin membuat Loader dengan menggunakan Indikator gambar, sebaiknya Anda membaca Cara Membuat Loader seperti Youtube Menggunakan Loadie.js.

Untuk melakukan inisialisasi gambar dapat menggunakan .load() dan gunakan fungsi Callback untuk melakukan proses lanjut. Contoh dibawah ini, atribut "src" dari tag Gambar menjadi atribut selector untuk mendeteksi bahwa gambar telah selesai di load. Hal ini dapat Anda gunakan untuk menggunakan Captcha dengan teknik DOM.

$('#gambar').attr('src', 'gambar.jpg').load(function(){
	alert('Gambar telah selesai di load.');
	//Gunakan fungsi sesuai dengan yang Anda inginkan.
});

Vertical Alignment dengan jQuery

Jika Anda ingin meletakkan sebuah elemen di tengah-tengah, menggunakan jQuery akan terasa lebih mudah. Perhatikan contoh berikut ini :

$(document).ready(function(){
	//Mengambil angka tinggi window & elemen
	var tinggi_window 	= $(window).height();
	var tinggi_elm		= $('.vertical-center').height();
	//Implementasi pada selector
	$('.vertical-center').css({
		'position'	: 'relative',
		'top'		: tinggi_window/2 - tinggi_elm/2
	});
});

Replace <div> dengan jQuery

Cara sederhana yang dapat Anda gunakan adalah dengan cara menggunakan metode replaceWith.

$('#target-div').replaceWith('<div>Contoh pengganti div yang baru.</div>');

Manipulate Text menggunakan Regular Expression dan jQuery

Anda dapat mengganti atau membuat text baru dengan menggunakan Regular Expression untuk mencari target yang ingin dirubah tersebut.

Misalnya kita ingin menghindari spammer mengindex Email kita pada document. Kita dapat menggunakan sebuah metode ini untuk merubah text atau karakter khusus untuk ditimpa menjadi email kita (hanya dapat dibaca selain bot / crawler). Contoh yang digunakan adalah kita menggunakan text "-:email:-" untuk diganti menjadi "email_anda@domain.com".

$(document).ready(function(){
	var document_body = $('body');
	document_body.html(document_body.html().replace(/-:email:-/gi, 'email_anda@domain.com'));
});

Membuat Link eksternal membuka window baru

Sebenarnya, untuk membuka link baru Anda dapat menggunakan atribut target pada HTML (target="_blank"), tetapi cara ini membuat script Anda tidak Valid menggunakan validasi XHTML 1.0 sehingga kita harus menemukan cara lain.

Jika Anda membutuhkan sebuah alternatif untuk membuka link di eksternal window, Anda dapat menggunakan jQuery untuk melakukan hal ini. Pada Validator XHTML 1.0, atribut ini dianggap tidak valid. Beberapa alternatif berikut ini dapat Anda gunakan.

Contoh dibawah ini dengan menambahkan attribute rel="external" pada link Anda sehingga jQuery dapat membuka link ke eksternal window dengan script seperti berikut :

$('a[rel="external"]').click(function(){
	window.open( $(this).attr('href') );
	return false;
});
//Atau dapat menggunakan bind
$('a[rel="external"]').bind("click", function(){
	window.open( $(this).attr('href') );
	return false;
});

Atau jika Anda ingin membuka link pada sebuah selector misalnya <div id="eksternal-link">, jadi Anda cukup menunjuk semua tag <a> yang ada didalam selector tersebut seperti contoh script berikut ini :

$('div#eksternal-link a').click(function(){
	window.open( $(this).attr('href') );
	return false;
});
//Menggunakan bind()
$('div#eksternal-link a').bind("click", function(){
	window.open( $(this).attr('href') );
	return false;
});

Itulah beberapa Teknik yang dapat Anda gunakan untuk mengoptimalkan code website Anda. Banyak cara yang dapat Anda gunakan untuk dapat mengoptimalkan Code Anda, baik server-side scripting ataupun client-side scripting.

Sekian dulu dari saya, terima kasih.