Memahami struktur kode program function($) di jQuery


JavaScript adalah bahasa yang fleksibel.  Dan saking fleksibelnya, kadang-kadang memungkinkan syntax yang terlihat agak aneh.  Misalnya, ini adalah syntax di jQuery yang saya temukan di sebuah buku:

jQuery.noConflict();
(function($) {
  $(function() {
      ... // isi kode program disini
  });
})(jQuery);

Apa maksud dari perintah di atas?  Saya butuh waktu untuk mencernanya!!

Pertama-tama, di JavaScript, dollar ($) dan underscore (_) adalah karakter yang valid sebagai nama variabel.  Dengan demikian, dollar($) adalah nama variabel yang diperbolehkan.  Bila saya membongkar kode program jQuery, saya akan menemukan baris seperti ini:

// Expose jQuery to the global object
window.jQuery = window.$ = jQuery;

Dengan demikian, isi variabel global window.jQuery dan window.$ pada dasarnya adalah sama dengan isi variabel jQuery.  Dan karena jQuery dan $ adalah variabel global, mereka bisa dipanggil tanpa menambahkan window.

Untuk memahami arti syntax referensi di atas, saya akan membuang beberapa bagian sehingga syntax tersebut terlihat seperti berikut ini:

jQuery.noConflict();
(function($){...})(jQuery);

Memanggil keyword function dengan cara ini menunjukkan pemakaian function expression.  Function expression ini akan menghasilkan sebuah anonymous function yang tidak bernama tetapi dapat langsung dipakai.  Versi lain yang lebih mudah dipahami adalah:

// mendeklarasikan anonymous function dengan function expression, dan
// langsung memanggilnya dengan melewatkan parameter berupa jQuery
(function($){...})(jQuery);

// sama saja dengan

// mendeklarasikan function secara eksplisit
function test($) { ... }
// memanggil function dengan melewatkan parameter berupa jQuery
test(jQuery);

Ok, sekarang saya sudah mulai memahaminya.  Ini hanya versi 1 baris untuk mendeklarasikan sebuah function dan langsung memanggilnya.  Sekarang, saya berusaha memahami isi function expression tersebut:

function($) {
  $(function() {
     ...
  }
}

Karena parameter $ akan dipanggil dengan melewatkan variabel jQuery, maka variabel $ didalam function expression akan merujuk pada variabel  jQuery.  Dengan demikian, sebenarnya kode program di atas sama saja dengan:

function($) {
  // karena $ === jQuery
  jQuery(function() {
     ...
  });
}

Seperti yang tertera di dokumentasi jQuery, memanggil jQuery(callback) sama dengan memanggil $(document).ready(callback) dimana callback akan dikerjakan setelah DOM selesai di-load.

Lalu, apa tujuannya?  Syntax yang berusaha saya pahami tersebut dipakai untuk menghindari konflik dimana ada framework lain yang sudah memakai variabel $.  Perlu diingat bahwa $ adalah sebuah nama variabel biasa, sama seperti variabel a,  b, c, dan sebagainya;  hanya saja karena dipilih oleh jQuery  ia menjadi agak ‘keramat’.  Bila ada kode program lain yang mengisi nilai variabel global $, bisa jadi nilai $ bukan lagi  jQuery.  Dengan sebuah function expression yang menerima parameter $ dimana dipanggil dengan melewatkan jQuery, maka nilai parameter $ bisa dipastikan adalah  jQuery.

Perihal Solid Snake
I'm nothing...

One Response to Memahami struktur kode program function($) di jQuery

  1. freddysidauruk mengatakan:

    Agak kurang nyambung tapi gak apalah buat nambah ilmu

Apa komentar Anda?

Please log in using one of these methods to post your comment:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: