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
		}
	};
}();

Baca selengkapnya...

Memahami Object dalam JavaScript

Object dalam bahasa yang paling disalahpahami di dunia

Banyak yang percaya, JavaScript adalah bahasa yang paling disalahpahami di dunia.. Contohnya dalam memahami Object dalam javaScript.

Mana sebenarnya "Object" dalam JavaScript?

JavaScript dibentuk dari object. Array adalah object. Fungsi adalah object. Object adalah Object. Jadi, mana object sebenarnya???

Object adalah pasangan nama dan nilai. Nama-nama adalah string, dan nilai dari string tersebut bisa bertipe string, angka, boolean, dan juga bertipe object (fungsi dan array).. Wahaha.. makin bingung kan?

Begini.., Object biasanya diimplementasikan sebagai hashtables sehingga nilai dapat diambil dengan cepat. Jika kamu masih bingung dengan hashtables, coba baca artikel yang bagus tentang hashtables disini.

Jika nilai merupakan sebuah fungsi, kita dapat menganggapnya sebagai method. Ketika method sebuah object dipanggil, variable ini kemudian akan dimasukkan kedalam object. Method dapat secara instan mengakses variable melalui variable lain.

Perlu diingat, Object hanya dapat diproduksi oleh Constructor, yang memang berfungsi untuk menginisialisasi object. Constructor menyediakan fitur yang memberikan class dalam bahasa yang berbeda, termasuk variable static dan method.

Tipe Object: Public dan Private

Public

Anggota atau member sebuah object bertipe public. Fungsi apapun dapat mengakses, memodifikasi, menambah atau menghapus anggota. Ada dua teknik untuk menambahkan anggota dalam object. Yaitu dengan menambahkan kedalam Constructor atau melalui Protoype..

Teknik Constructor

Teknik ini biasanya digunakan untuk menginisalisasi variable instan publik. Konstruktor variable ini digunakan untuk menambahkan anggota ke dalam object.
Contoh:

function myContainer(param){
   this.member = param;
}

Jadi, saat ingin membuat sebuah object baru, kita cukup menggunakan cara:

var myNewContainer = new myContainer('abc');

Object baru kita, "myNewContainer" adalah object yang dibangun dengan menggunakan konstruktor fungsi "myContainer".
Object myNewContainer secara otomatis mempunyai anggota bernilai 'abc'. (myNewContainer.member)

Teknik Prototype

Teknik ini biasanya digunakan untuk menambahkan method public. Ketika anggota dicari (dan tidak ditemukan) dalam sebuah object yang dicari, maaka anggota akan diambil dari anggota prototype Constructor itu sendiri. Mekanisme ini digunakan untuk pewarisan, yang dapat lebih menghemat memori dibandingkan dengan selalu membuat object baru.

Teknik protoype ini juga dapat digunakan untuk metode dari object yang dibuat oleh Constructor.
Contoh:

myContainer.prototype.stamp = function(string){
   return this.member + string;
}

dari contoh diatas, kita telah menambahkan sebuah method baru kedalam sebuah constructor, yaitu "stamp"... jadi nilai otomatis diwariskan ke object yang dibuat dengan constructor tersebut...Coba kita panggil object yang kita ciptakan sebelumnya dengan cara:

myNewContainer.stamp('def');

Maka, nilai dari object myNewContainer sekarang menjadi 'abcdef'.
Baca selengkapnya...

Membaca JSON dengan Ext JS

Ext JS memiliki fungsi yang memudahkan kita untuk membaca Call Back hasil request Ajax.

Dengan menggunakan fungsi decode(), sangat memudahkan kita membaca data JSON bahkan tanpa melakukan mapping sekalipun.

Misalnya callback ajax request menghasilkan JSON seperti berikut:

{"success":true,"data":[{"idpegawai":"8503030WB", "namapegawai":"Yudhi Armyndharis", "alamat":"Batam"}]}

Maka kita dapat mengambil data nama pegawai dengan cara seperti berikut:

Ext.Ajax.request({
	url: 'store/datapegawai.php',
	params: {
	    action: 'read',
	    idpegawai: '8503030WB'
	},
	success: function(resp, opt){ 
		var callbackdata = Ext.util.JSON.decode(resp.responseText.trim());
		//ambil namapegawai dan simpan sebagai variable
		var namapegawai = callbackdata.data[0].namapegawai;
		//tampilkan di console
		console.log(namapegawai);
	},
	failure: function(resp,opt) { 
	    Ext.Msg.alert('Error','Database server error..'); 
	}
});

Baca selengkapnya...