Memahami struktur kode program function($) di jQuery

Malam sahabat cyber4rt
mimin sengaja upload 2 artikel mumpung internet lgi baek :v jdi tidurnya ditunda :v
langsung saja ya :D
cekidot

#Gambarhnya Pemanis Biar gx kosong ;v

------------------------------------------------------------------------------------------

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.