Minggu, 14 Agustus 2011

Namespace untuk memudahkan organisasi kode JavaScript

Sebagai Web Programmer, kita harus menyadari bahwa kadang programmer lain dapat berinteraksi dengan kode web yang kita buat ataupun sebaliknya, kadang kala kita sering kali "mencuri" potongan class, widget dari berbagai sumber untuk membentuk kode milik kita sendiri. Untuk itulah kita memerlukan namespaces.

Tunggu dulu... Sebenarnya, Apa itu Namespace?
Definisi Wikipedia, Namespace adalah "an abstract container providing context for the items (names, or technical terms, or words) it holds and allowing disambiguation of items having the same name [...] For many programming languages, a namespace is a context for identifiers. In an operating system, an example of namespace is a directory."

Jadi namespace itu dalam pemrograman cuma digunakan untuk memudahkan melakukan identifikasi dan organisasi kode. Layaknya kita mengatur semua file mp3 kedalam folder "My Music", dan file gambar dan photo ke dalam folder "My Picture".

Atau coba perhatikan gambar berikut yang merupakan diagram namespace Domain Name dan Filesystem Unix:


Mengapa menggunakan namespaces?

Menggunakan Namespace sangat penting bagi kita sebagai web programmer untuk memastikan bahwa kode yang kita buat tidak ditimpa ketika diproses oleh JavaScript intepreter. Jika ada programmer lain yang mendefinisikan sebuah variabel dengan nama yang sama dengan yang kita buat, maka variable tersebut akan ditimpa. Kode milik programmer terakhir yang diproses oleh JavaScript merupakan variable yang dianggap sah.

Ini terjadi karena JavaScript adalah bahasa fungsional yang menciptakan fungsi atau variabel yang tidak dibungkus dalam fungsi lain dan dibuat dalam lingkup global (window). Maka untuk mengatasi terjadinya konflik seperti ini, kita dapat menempatkan variable maupun fungsi milik kita kedalam object sehingga hanya berada di scope object yang kita buat.

Cara Membuat Namespace
Pertama tentunya kita harus menentukan "nama" sebagai namespace kita.. hehe :)
Buatlah nama yang merefer fungsi yang dimilik dari object namespace tersebut. Misal untuk menampilkan data pegawai, kita beri namespace "appPegawaiView", untuk mengedit data pegawai, kita beri namespace "appPegawaiEdit"...

Contoh:
var appPegawaiView = {};
var appPegawaiEdit = {};

Atau kita dapat memeriksa terlebih dahulu apakah sudah ada object yang memiliki nama yang sama dengan object namespace yang ingin kita buat dengan cara:
if (!appPegawaiView) appPegawaiView = {};
if (!appPegawaiView.form) appPegawaiView.form = {};
if (!appPegawaiView.data) appPegawaiView.data = {};

Contoh lengkap:
var appPegawaiView = function(){
	var private_var;
	function private_method(){
	}
	return {
		method_1: function(){
			// kode metode 1 disini
		},
		method_2: function(){
			// kode metode 2 disini
		}
	};
}();

Tidak ada komentar:

Posting Komentar