Bagaimana Sebenarnya jQuery Bekerja

Ketika orang-orang sudah cukup puas dengan markup dan style sheet language, pada akhirnya mereka memutuskan untuk tertarik dengan dunia pemrograman setelah mereka dipertemukan dengan bahasa pemrograman yang luar biasa dahsyat yang mereka kenal sebagai jQuery. Mereka jatuh cinta karena efek animasi yang diberikan: mereka jatuh cinta kepada slideshow, kepada efek dropdown menu, kepada efek gambar kabur, dan lain sebagainya; sebegitu jatuh cintanya mereka hingga mereka sanggup untuk duduk berlama-lama di depan komputer, ketagihan menggoyang-goyangkan pointer mouse mereka di permukaan menu navigasi dropdown berkali-kali hanya demi melihat efek slide-up dan slide-down yang begitu indah…

Biasanya mereka tidak tahu bahwa apa yang mereka anggap menarik tersebut sebenarnya adalah JavaScript, mungkin termasuk juga kamu — dan juga Saya pada awalnya. Generasi kita yang belakangan ini jauh lebih banyak mengenal jQuery dibandingkan dengan JavaScript mentah biasanya tidak begitu paham bahwa apa yang sedang kita utak-atik tersebut sebenarnya adalah JavaScript, sehingga kadang mereka suka terjebak untuk membagi-bagi bagan skill atau keahlian pemrograman mereka menjadi lebih banyak dari yang seharusnya. Misalnya seperti ini:

  • HTML 95%
  • CSS 86%
  • JavaScript 56%
  • jQuery 86%
  • PHP 75%

Padahal jQuery dan JavaScript adalah sama-sama JavaScript. Yang membedakan hanyalah bahwa jQuery adalah sekumpulan fungsi yang dibuat untuk meringkas perintah-perintah dalam JavaScript mentah, sedangkan JavaScript adalah … JavaScript.

jQuery adalah JavaScript

Dari situs resmi jQuery dapat terbaca dengan jelas bahwa jQuery adalah JavaScript library.

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

Ini berarti bahwa jQuery hanyalah sebuah bentuk perpustakaan berisi perintah-perintah JavaScript yang dibuat untuk mempermudah dalam penggunaan JavaScript, plus untuk membuat pengembangan kode menjadi lebih cepat dan terstruktur, lebih mudah untuk diperbaiki, dikontrol, dimodifikasi dan digunakan kembali.

Membandingkan antara jQuery dengan JavaScript Mentah

Berikut ini merupakan perintah JavaScript mentah untuk mengubah warna teks menjadi merah, warna latar belakang menjadi kuning dan menambahkan garis tepi berupa border setebal 4 piksel dengan warna hijau:

var el = document.getElementById("foo");
el.style.color = 'red';
el.style.backgroundColor = 'yellow';
el.style.border = '4px solid green';

Dalam jQuery, kita bisa menyederhanakannya menjadi seperti ini:

$('#foo').css({
'color': 'red',
'background-color': 'yellow',
'border': '4px solid green'
});

Keduanya akan memberikan hasil yang sama persis.

Tapi tahukah kamu apa yang sebenarnya terjadi di balik sintaks tersebut hingga perintah JavaScript yang pertama Saya tuliskan di atas bisa terjadi melalui sintaks yang berbeda?


Memulai dengan Mengenal $

Pada dasarnya, $ itu sama dengan jQuery. jQuery adalah versi asli yang paling aman digunakan untuk menghindari konflik variabel (namun lebih melelahkan untuk diketik) karena secara normal orang akan jarang menuliskan sembarang variabel global dengan nama jQuery. $ adalah duplikat dari jQuery yang lebih ringkas, dibuat untuk alasan kemudahan. Logikanya seperti ini:

window.$ = window.jQuery;

Sehingga kita bisa menggunakan keduanya untuk melakukan hal yang sama:

// menggunakan `$`
$('#foo').css('color', 'red');
// menggunakan `jQuery`
jQuery('#foo').css('color', 'red');
Menimpa nilai variabel $ dan jQuery akan secara otomatis merusak jQuery.

Dengan merenungkan pernyataan di atas, kamu akan mengerti bagaimana konflik antar-perpustakaan bisa terjadi, karena beberapa perpustakaan yang lain seperti Prototype juga memiliki variabel khusus yang sama yaitu $. Kode JavaScript mentah yang kamu tulis juga dapat menyebabkan hal semacam itu:

https://jsfiddle.net/tovic/prn4u3hk/

Atau kamu juga bisa membuat variabel versi-mu sendiri untuk menghindari konflik:

var wow = window.jQuery;

Sehingga kamu bisa menggunakannya seperti ini:

wow('#foo').css('color', 'red');

Dari situ, maka kita disarankan untuk selalu menggunakan closure:

(function(wow) {
wow('#foo').css('color', 'red'); // :)
})(jQuery);
var jQuery = null;

Di sini, seluruh metode yang ada di dalam variabel jQuery sudah dinyatakan kembali sebagai wow, sehingga sintaks apa saja yang kamu nyatakan di dalam cakupan tidak akan terpengaruh selama kamu menggunakan wow, meski nilai variabel jQuery pada akhirnya diubah juga.

Dalam kasus di bawah ini, $ yang berada di dalam cakupan berbeda dengan $ yang berada di luar cakupan. Ini hanya soal penamaan variabel… jadi jangan dibikin pusing:

(function($) {
$('#foo').css('color', 'red'); // :)
})(jQuery);
var $ = null, jQuery = null;
$('#bar').css('color', 'red'); // :(

Demo: https://jsfiddle.net/tovic/8knt5ywf/

Metode Berantai

Bagaimana cara membuat metode berantai seperti halnya dalam jQuery?

Jika kamu sudah mengenal konsep Object-Oriented JavaScript, maka kamu akan tahu bahwa ketika kamu mengakhiri setiap metode dengan mengeluarkan this, maka metode yang lain akan dapat diakses setelah metode sebelumnya dinyatakan, begitu seterusnya sampai mati.

Berikut ini adalah sebuah contoh …

var Calculator = function(input) {
    // cegah konflik cakupan dengan menyimpan
// this milik Calculator ke dalam variabel
// dengan nama base
var base = this;
    // keluaran (untuk nanti)
base.equalWith = input;
    // tambah
base.add = function(num) {
base.equalWith += num;
return base; // kembali ke base
};
    // kurang
base.subtract = function(num) {
base.equalWith -= num;
return base; // kembali ke base
};
};

… untuk digunakan seperti ini:

var xxx = new Calculator(10);
document.write(xxx.add(2).subtract(5).equalWith);

Nah, sekarang kita sembunyikan pernyataan new dengan memanfaatkan sebuah fungsi:

function $(input) {
return new Calculator(input);
}

dan…

var output = $(10).add(2).subtract(5);
document.write(output.equalWith);
Sudah mulai terlihat mirip seperti jQuery?

Sekarang Kita Buat $(selector) !

Jika kita ubah sudut pandang $(input) menjadi $(selector) dan menggunakan nilai selector sebagai parameter untuk perintah document.querySelector(), maka kita sudah bisa membuat selektor jQuery sedarhana!

var _init = function(selector) {
    var base = this,
element = document.querySelector(selector);
    // …

};
function $(selector) {
return new _init(selector);
}

Tambahkan metode-metode jQuery dengan memanfaatkan API javaScript yang ada seperti Element.classList untuk membuat metode addClass, removeClass, toggleClass dan hasClass dan Element.innerHTML untuk membuat metode html:

var _init = function(selector) {
    var base = this,
element = document.querySelector(selector);
    base.addClass = function(s) {
element.classList.add(s);
return base;
};
    base.removeClass = function(s) {
element.classList.remove(s);
return base;
};
    base.toggleClass = function(s) {
element.classList.toggle(s);
return base;
};
    base.hasClass = function(s) {
element.classList.contains(s);
return base;
};
    base.html = function(str) {
element.innerHTML = str;
return base;
};
    base.css = function(prop, val) {
if (typeof prop === "object") {
for (var i in prop) {
element.style[i] = prop[i];
}
} else {
element.style[prop] = val;
}
return base;
};
    base.click = function(callback) {
element.onclick = callback;
return base;
};
};
function $(selector) {
return new _init(selector);
}

Selesai sudah! jQuery versi sederhana dengan fitur berupa selektor CSS, dan metode-metode berupa addClass, removeClass, toggleClass, hasClass, html, css serta satu event click:

Demo: https://jsfiddle.net/tovic/s5px6j4a/