Membuat OOP di Javascript supaya terstruktur

Nah bagaimana supaya lebih enak kita pakai dan untuk future enhancement nya lebih mudah ???

Pertama kita buat file saya.js, isi file ini yang akan berfungsi seperti objek global bagi Anda dengan isi seperti berikut :

(function(){
if (window.Saya) {var Saya = window.Saya;}

var Saya = window.Saya = function() {return new Saya.init();};

Saya.apply = function(o, c, defaults){
if(defaults){Saya.apply(o, defaults);}
if(o && c && typeof c == 'object'){for(var p in c){o[p] = c[p];}}
return o;
};

Saya.apply(Saya, {
version: '1.0.0',
init: function() {return this.version;}
});

Saya.ui = Saya.ui || {};
})();

Objek global ini akan memasang objet “Saya” pada objek window, sehingga kita tidak perlu melakukan inisialisasi lagi ketika akan menggunakan nya, contoh :

alert(Saya.init());

Akan memunculkan dialog alert dengan isi “1.0.0″.

Pada javascript diatas terdapat “Saya” bisa diganti sesuka Anda, mau jadi “Maneh” ato “Kehed” ato “Parah”, tapi nanti saja setelah Anda paham pemakaiannya. Juga terdapat Saya.ui = Saya.ui || {}; ini nanti kita bahas.

Kemudian buat file lagi dengan nama oop_saya.js, isi file ini akan berfungsi sebagai objek yang Anda pakai tergantung kebutuhan pada halaman dengan isi sebagai berikut :

Saya.ui.OOP_Saya = function() {
return {

method_saya: function() {
alert("Saya Tea !!!!");
},

method_anda: function() {
alert("Anda Saja !!!");
}

}
}();

Nah pada code diatas terdapat dua fungsi method_saya dan method_anda, maka ketika memakai tinggal melakukan include file javascript terlebih dahulu pada html :

<script src="saya.js" type="text/javascript"></script>
<script src="oop_saya.js" type="text/javascript"></script>

Kemudian tinggal pada link diatas kita rubah jadi seperti ini :

<a href="javascript:;" onclick="javascript:Saya.method_saya();">Saya</a>

<a href="javascript:;" onclick="javascript:Saya.method_anda();">Anda</a>

Nah kenapa harus ada Saya.ui. pada oop_saya.js, ini dimaksudkan bagi kita membedakan/mengelompokan mana javascript yang kita pakai untuk mengolah User Interface (UI) atau HTML, mana javascript yang akan kita pakai sebagai Utility atau fungsi – fungsi bantuan, karena mungkin jika kita membuat Utility akan dipakai di objek javascript untuk mengolah UI yang lainnya.

Bagaimana cara menambah supaya kita bisa membuat Saya.utility.

Pertama kita tambahkan :

Saya.utility = Saya.utility || {};

Setelah :

Saya.ui = Saya.ui || {};

Pada file saya.js

Kemudian kita buat file utility.math.js, dengan isi sebagai berikut :

Saya.utility.Math = function() {
return {

roundNumber: function (num, dec) {
var snum=num.toString()+"000000000000000001";
var sep=snum.indexOf(".");
var beg=snum.substring(0,snum.indexOf("."));
snum=snum.substring(eval(snum.indexOf(".")+1),snum.length);
var dig=snum.substring(0,eval(dec-1));
snum=snum.substring(eval(dec-1),dec);
snum=parseInt(snum);
gohigher=false;
if (snum>4) {gohigher=true;}
if (gohigher) {snum=parseInt(snum);snum++;}
snum=snum.toString();
num=beg+"."+dig+""+snum;
return num;
},

rand32: function (){return Math.floor(Math.random()*4294967295);},

}
}();

Bagaimana kita menggunakan Utility ini pada object_saya.js :

method_saya: function() {
alert(Saya.utility.Math.rand32());
},

Kemudian kita bisa membuat, contoh :

- Saya.utility.Uri

- Saya.utility.Text

Tapi harus hati – hati ketika membuat fungsi pada objek ini, harus dispisahkan dengan tanda koma (,), kecuali fungsi yang paling terakhir jangan memakai tanda koma (,), karena akan menyebabkan error.

Tinggal dikembangkan lagi sesuai kebutuhan.

Terima Kasih, semoga bermanfaat.

“People Always Forget How Fast We Did A Job, But They Will Remember How well We Did It”

Category: Experience / Research