Kamis, 29 Maret 2012

TweetThis Button

Douglas Crockfold Menjadikan Javascript lebih Modular

Douglas Crockfold 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. 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
1(function () {
2...
3}());
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
1var myApp = {}; // Definisi single global variable object
2myApp.messageHello='Hello'; // Membuat variabel didalam objek
3myApp.sayHello = function() { // Menciptakan objek method sayHello
4console.log(myApp.messageHello); // Display properti objek di console
5};
6myApp.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.
01var MODULE = (function () {
02var my = {},
03 
04privateVariable = 1;
05function privateMethod() {
06...
07}
08 
09my.moduleProperty = 1;
10my.moduleMethod = function () {
11console.log('Private variable: '+privateVariable);
12console.log('MODULE variable: '+my.moduleProperty);
13};
14 
15return my;
16}());
17MODULE.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:
  • Scalable. Modules are isolated pieces of code that when well designed.
  • Team-ready. Building a large-scale javascript application is simpler with the module pattern.
  • Localized. Anonymous wrappers automatically create a new “namespace” for the whole module.
  • Cross-instantiation private variables.
  • Extensible. Want to dynamically add additional methods to a module? No problem.
  • Deferrable. Another advantage of its isolation and containment is that you can inject it on demand without worrying about its impact on other modules.
source: http://blog.uin-malang.ac.id/mustofa/2012/03/28/menjadikan-javascript-lebih-modular/

0 komentar:

Posting Komentar

.:Tutorial DHTML DLL:.

Tutorial tentang Dhtml scripts, Jquery plugins ,Javascript, CSS, CSS3, Html5 Library dll dan penerapannya pada Website, langsung aja kunjungi Website nya dan yang nggak kalah penting Free Yaa !!

.:distrowatch:.

Pengin Banyak tau tentang distro linux Langsung Aja Kunjungi DistroWatch Hmmm, banyak banget distronya, Download dan Pasang Linuxnya Lets Go Boss !!

.:jQuery Tutorial:.

Tutorial jQuery Widget ada disini semua Langsung Ke TKP Boss !!

.:Hirens Boot CD:.

Hiren's Boot CD cukup ampuh untuk membuat Clonning Atau Copy windows, dan banyak tool yang sangat berguna bagi para teknisi komputer maupun yang masih pemula silahkan Download filenya Disini kalo mau lihat tutorialnya membuat Flashdisc Bootable Disini Lumayan buat nambah ilmu dan Tool, Langsung aja Boss !!

Hiren’s BootCD

Bookmark and Share