javascript module pattern

[Guesuper]

pernah koding javascript ? klw pernah koding javascript dalam skala project menengah keatas, pasti pernah ngerasain betapa susah nya scaling menggunakan bahasa satu ini

apalagi klw cara programming kita di javascript asal-asalan .. misal nya asal bikin fungsi, asal bikin variable, etc



contoh code asal2an


HTML Code:



percayalah klw skala project membesar, cara koding diatas ga bakalan bisa di pake buat scaling



nah, untung nya seseorang dengan nama douglas crockford menciptakan sebuah teknik untuk men-tackle problema diatas .. teknik ini disebut module pattern .. dan fungsi utama teknik ini adalah menghindari global variable ..

siapa douglas crockford ? well, salah satu sumbangsih nya di dunia programming adalah memperkenalkan javascript object notation ato json sebagai data interchange format .. sumbangsih lain nya contoh nya module pattern ini ..



bagaimana module pattern di lakukan ?

module pattern di lakukan menggunakan closure yg berupa anonymous function di javascript ..




HTML Code:



pada code diatas, kita membuat sebuah variable global dengan nama GLOBAL, kemudian menempelkan module dengan nama firstModule kedalam nya ..

module di buat dengan sebuah anonymous function dan operator parentheses yg tujuan nya langsung meng-call anonymous function tersebut .. dan karena function itu mereturn sebuah object / {}, maka object tersebut akan di pass ke firstModule dan menjadi sebuah module yg ter-hook ke variable GLOBAL ..



terus apa guna nya ? javascript gampang kok di bikin ribet ?




HTML Code:



nah, contoh kedua lebih jelas ..

di contoh kedua kita membuat sebuah variable di dalam function, karena di buat di dalam function, maka scope nya hanya di function tersebut dan tidak ngotorin global scope, yg merupakan kendala utama dalam scaling project ..

kenapa disebut private ? javacscript ga mengenal access modifier .. tapi dengan pattern diatas, privateVar akan menjadi private variable pada function tersebut karena scope nya hanyalah di function tersebut .. jadi ini private modifier yang di emulasikan dengan closure ..



selanjut nya anonymous function akan mereturn object yang mengandung function getVar, object ini lah yg akan di hook sebagai firstModule ..

maka setelah code diatas di jalankan, untuk mengakses privateVar tadi, cukup dengan ..




HTML Code:



dengan teknik ini, global scope hanya mengenal 1 tambahan global variable di project kita, yaitu GLOBAL, semua code kita akan tersimpan sebagai module pada global variable ini ..

pengembangan teknik ini pada aplikasi masih banyak banget, contoh nya untuk lazy loading script .. di mana script tidak di load pada awal page load, tapi di load ketika ada request event dari user .. dan setelah di load, module yg di load tersebut akan nemplok / hooked sendiri ke dalam GLOBAL ..

lazy load pake module pattern ini prinsip nya mirip2 dengan plugin pada jquery ..



sekian deh, silakan klw ada yg mw nambahin atau ada yg mw di tanyain