Dalam sebuah lembaga Saya pernah sekali diajari mengenai cara tersingkat untuk menangani perintah-perintah jQuery di dalam peraturan kondisi yang biasa dituliskan menyerupai ini:
if (statement) { $(selector).method1(); } else { $(selector).method2(); }Kode di bawah ini yaitu jalan pintas untuk kondisional di atas:
$(selector)[statement ? "method1" : "method2"]();Pada awalnya Saya merasa resah dengan sudut pandang yang orang tersebut berikan, hingga lalu Saya menyadari bahwa intinya ini hanyalah sebuah jalan pintas peraturan if/else untuk memanggil item objek yang berbeda menurut kondisi tertentu.
jQuery, intinya hanyalah sekumpulan fungsi yang dinyatakan di dalam objek. Kurang lebihnya menyerupai ini (memang tidak sama persis menyerupai ini, tapi setidaknya tidak mengecewakan mirip):
var foo = { addClass: function(param) { ... }, removeClass: function(param) { ... }, toggleClass: function(param) { ... }, hasClass: function(param) { ... } ... }Sehingga setiap fungsi dapat dipanggil dengan cara menyerupai ini:
foo.addClass('bar'); foo.removeClass('bar');Atau menyerupai ini:
foo["addClass"]('bar'); foo["removeClass"]('bar');Katakanlah kita ingin memanggil fungsi tertentu di dalam foo hanya jikalau suatu kondisi terpenuhi. Jika kondisi tidak terpenuhi, maka fungsi cadangan yang lain akan dijalankan:
if (abc === true) { foo["removeClass"]('bar'); } else { foo["addClass"]('bar'); }Yang mana jikalau diubah ke pernyataan kondisional ringkas akan menjadi menyerupai ini:
var x = (abc === true) ? "removeClass" : "addClass"; foo[x]('bar');Sehingga kita dapat menyimpulkannya menjadi menyerupai ini:
foo[abc === true ? "removeClass" : "addClass"]('bar');Contoh Penerapan
Berikut ini yaitu pola penerapan kondisional jalan pintas untuk menangani perintah .slideDown() dan .fadeOut() menurut visibilitas panel:
Sebelum
$('h2').click(function() { $(this).toggleClass('active'); if ($(this).next().is(':hidden')) { $(this).next().slideDown(); } else { $(this).next().fadeOut(); } });Sesudah
$('h2').click(function() { $(this).toggleClass('active') .next()[$(this).next().is(':hidden') ? "slideDown" : "fadeOut"](); });