Module Pattern Javascript

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 ada pada aplikasi, tentunya akan semakin meningkatkan performa dari aplikasi yang akan jalan pada browser.

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 menjadi lebih kecil.

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 lain 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 begitu banyak bentuk pengembangan teknik ini yang tentunya akan sangat bermanfaat saat kita berada di pemrograman front-end seperti nested namespacing dan lazy loading code. Berikut adalah manfaat dari module pattern seperti yang disampaikan oleh Brian Cray:

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.