Menjadikan Javascript lebih Modular

Menjadikan Javascript lebih Modular

Modularisasi kode javascript bisa dilakukan dengan teknik module pattern. Teknik ini diperkenalkan oleh Douglas Crockfold, orang sama yang memperkenalkan JSON sebagai data interchange format….

Modularisasi kode javascript bisa dilakukan dengan teknik module pattern. Teknik ini diperkenalkan oleh Douglas Crockfold, orang sama yang memperkenalkan JSON sebagai data interchange format. Sebenarnya tujuan utama dari teknik ini adalah menghindari penggunaan variabel global secara berlebihan. Sedikit variabel global yang kita ciptakan tentunya memiliki performa baik dari sebuah web aplikasi.

Dalam pemrograman javascript, baik variabel dan fungsi bersifat global atau publik, tidak ada scope private dan protected layaknya bahasa pemrograman lain seperti C, php, java. Tapi bukannya tidak bisa, kita bisa memberikan efek yang sama(scope variable) dengan memanfaatkan anonymous function dan single global variable yang nantinya juga memiliki efek sama dengan namespace.

Anonymous Function

(function () {
...
}());

Kode diatas merupakan bentuk dari anonymous function, ditambah dengan operator parentheses atau ‘()’ yg tujuan nya langsung meng-call anonymous function. Anonymous function merupakan bagian fundamental dari kode javascript, semua kode yang berada didalam fungsi merupakan kode tertutup(closure) yang tidak akan bisa diakses dari luar. Kode akan terlihat lebih bersih dan kekawatiran kode memiliki nama yang sama atau collisions objek/variabel akan kecil kemungkinannya.

Single Global Variable

var myApp = {}; // Definisi single global variable object
myApp.messageHello='Hello'; // Membuat variabel didalam objek
myApp.sayHello = function() { // Menciptakan objek method sayHello
console.log(myApp.messageHello); // Display properti objek di console
};
myApp.sayHello(); // Memanggil method objek

myApp merupakan single global variable yang mereferensikan sebuah objek. Efek dari teknik ini, variabel dan fungsi dalam objek akan aman dari modifikasi script laen diluar objek myApp dan pemborosan global variabel pun juga tidak akan terjadi.

Module Pattern

Dengan memahami anonymous function dan single global variable, kita bisa menentukan variabel-variabel mana yang bisa bersifat global dan mana yang cukup hanya diakses diwilayah fungsi/lokal saja. Bukan hanya itu, kode seperti ini dapat memiliki efek sama dengan saat kita bekerja dengan modul-modul kode yang independen. Berikut adalah contoh kode saat kita menggabungkan kedua teknik ini.

var MODULE = (function () {
var my = {},

privateVariable = 1;
function privateMethod() {
...
}

my.moduleProperty = 1;
my.moduleMethod = function () {
console.log('Private variable: '+privateVariable);
console.log('MODULE variable: '+my.moduleProperty);
};

return my;
}());
MODULE.moduleMethod();

MODULE adalah variabel global yang dibuat dengan anonymous function, dengan me-return objek my. Variabel yang berada langsung di bawah anonymous function memiliki sifat scope private sedangkan properti dan fungsi dari objek my, bisa diakses dari luar/publik, tentu saja dengan menyebutkan nama “modul” nya jika hendak mengaksesnya.

Hal ini sangat bagus, selain kode yang kita buat tampak seperti modular, ada banyak bentuk pengembangan dari teknik ini yang tentunya akan sangat bermanfaat saat kita berada di pemrograman front-end seperti nested namespacing dan lazy loading code. Dan berikut adalah manfaat dari apa yang bisa kita ambil dari module pattern yang saya kutip dari tulisan Brian Cray di blog-nya:

  1. Scalable. Modules are isolated pieces of code that when well designed.
  2. Team-ready. Building a large-scale javascript application is simpler with the module pattern.
  3. Localized. Anonymous wrappers automatically create a new “namespace” for the whole module.
  4. Cross-instantiation private variables.
  5. Extensible. Want to dynamically add additional methods to a module? No problem.
  6. Deferrable. Another advantage of its isolation and containment is that you can inject it on demand without worrying about its impact on other modules.
Tag: , ,

1 Comment

Leave Comment
  1. Shams says:

    jadi sekarang ini udah macam2 konsep modular kode untuk memastikan performa laman aplikasi tunggal beroperasi dengan baik. Antaranya CommonJs, AMD, UMD. Menraik tuk dicermati

Write Comment

Your email will not be published. The marked label is required.