Better Practice Javascript

Beranda
Komunitas
Tech
Programmer Forum
Better Practice Javascript

MorPhiNe

05-06-2012 15:35

hallo all, ane mau sharing tentang better practice di javascript yang banyak diantaranya adalah opini ane saja. pengalaman ane masih kurang banget, mungkin ada hal-hal yang salah atau kurang tepat. jadi ane sangat menghargai segala perbedaan pendapat tentang better practice yang ane tuliskan ini. oke deh ane mulai saja.. emoticon-Embarrassment

versi website tanpa javascript
kalo website ente adalah regular website, maka sebaiknya website tetap fungsional walaupun tanpa menggunakan javascript. yang ane maksud regular website adalah website yang hanya menampilkan informasi, sehingga javascript berperan sebagai pelengkap saja.

intinya gini saja gan, kalo website ente tetap bisa fungsional walaupun tanpa javascript, maka better practicenya adalah letakan semua kode javascript anda dibagian bawah HTML, temasuk librari2 seperti JQuery dll.

HTML Code:

<!DOCTYPE html>
<html>
<head>
<title>aksjhkasd</title>
</head>
<body>
asdhk askdkas ka sdjhkasdkas


<script src="JQuery.js"></script>
<script src="dll.js"></script>
<script src="dsb.js"></script>
<script src="dst.js"></script>
</body>
</html>

keuntungannya adalah halaman website lebih cepat terpampangke user, sehingga memungkinkan user tersugesti bahwa website ente loadingnya cepat. ketika semua javascriptnya terload, tampilan halaman website bisa saja berubah karena manipulasi DOM, memiliki interakasi dll.
hindari deklarasi variabel atau function secara global
deklarasi variabel atau function secara global itu menyesatkan gan. karena semua variabel atau function global tidak lain dan tidak bukan adalah properi atau methode dari object window. perhatikan contoh berikut.

HTML Code:

<!DOCTYPE html>
<html>
<head>
<title>aksjhkasd</title>
</head>
<body>
asdhk askdkas ka sdjhkasdkas


<script type="text/javascript">
var foo = "boo";
function bar() {
alert(window.foo);
}

window.bar();
bar();
</script>
</body>
</html>

nah, untuk masalah ini, ente bisa gunain function yang yang yang sung dipanggil dan dihapus saat function tersebut dibuat, seperti contoh dibawah ini.

HTML Code:

<!DOCTYPE html>
<html>
<head>
<title>aksjhkasd</title>
</head>
<body>
asdhk askdkas ka sdjhkasdkas


<script type="text/javascript">
// anonimous function yang langsung di panggil.
// karena tidak di assign dalam suatu variable (misalnya)
// maka function ini langsung di destroy
(function() {
// variabel dan function yang didefinisikan disini
// berada pada scope yang berbeda dari scope global
var foo = "boo";
function bar() {
alert(foo);
}

bar();
})();
</script>
</body>
</html>
kenali yang namanya minified
kalo buat kode javascript, salah satu hal HARUS anda pikirkan adalah banyaknya karakter yang anda gunakan selama proses ngoding. ya iya lah, semakin besar size javascript hasil kodingan ente, semakin lama pula browser me-load halaman websitenya.

tapi hal diatas jangan sampai membuat kode anda tidak readible. ketika ngoding silahkan buat comment dan whitespace sebanyak2nya, nama variabel dan function sebebas-bebasnya. kenapa? karena kode anda dapat dibuat versi minifiednya. minifiedmaksudnya menghilangkan semua comment dan whitespace yang tidak diperlukan (yang dapat memperbesar size file javascript), juga mengubah nama varibel dan function menjadi lebih sedikit karakternya, sehingga size dari javacript anda bisa direduksi. contohnya lihat saja JQuery, anda versi full dan versi minified nya.

akan tetapi, kalo anda membuat object, maka nama properti dan methodnya usahakan sesingkat mungkin. soalnya minified tidak akan mengubah nama properti ataupun method.
nama variabel global sama dengan parameter pada self-executing function
sebelumnya, yang ane maksud self-executing function itu yang seperti dibawah ini (terus terang ane gk tau apa namanya).

Code:
```
(function() {



})();
```
ya, itu adalah function yang langsung di panggil dan dihapus saat dibuat. nah dalam function tersebut mungkin anda menggunakan banyak variabel global. agar lebih optimal ketika di minified, dalam wrapper function tersebut letakkan paremeter2 variabel global yang sering anda gunakan dengan nama parameter yang sama dengan nama variabel globalnya.

HTML Code:

(function(window, document, Math, undefined) {

})(window, document, Math, undefined);
jangan membuat callback function dan hindari closure didalam iterator
contohnya seperti ini gan.

Code:
```
(function(window, document, Math, undefined) {

 var anchors = document.nangningnung("a");

 

 for(var i=0, ii=anchors.lenght; i<ii; i++) {

 var anchor = anchors[i];

 

 anchor.addEventListener("click", function(e) {

 alert(anchor.title);

 }, false);

 }

 })(window, document, Math, undefined);
```
dari contoh diatas, dalam setiap iterate nya, function untuk event dibuat baru. dan ini mengurangi perfoemance dan makan memori gan. ane sering lihat cara diatas sering banget dilakukan pemakai JQuery. cara yang lebih bagus itu kayak gini kali yak..

HTML Code:

(function(window, document, Math, undefined) {
var anchors = document.nangningnung("a");

// hanya satu function untuk setiap event
function callbackClickAnchor(e) {
alert(this.title);
}

for(var i=0, ii=anchors.lenght; i<ii; i++) {
var anchor = anchors[i];
anchor.addEventListener("click", callbackClickAnchor, false);
}
})(window, document, Math, undefined);
hindari onload event window dalam bentuk apapun
contohnya seperti ini..

HTML Code:

<!DOCTYPE html>
<html>
<head>
<title>aksjhkasd</title>
<script type="text/javascript">
window.addEventListenter("load", windowOnLoad, false);
function windowOnLoad() {
var foo = "boo";
function bar() {
alert(foo);
}

bar();
}
</script>
</head>
<body>
asdhk askdkas ka sdjhkasdkas

</body>
</html>

nah.. kode diatas mendaftarkan listener untuk event load window. masalahnya adalah terkadang website memiliki gambar2 yang waktu untuk load gambar lebih lama dari pada waktu load halaman. jadi event "load" akan difirejika semua komponen web termasuk gambar telah selesai diload. padahal dalam callback tersebut yang sering dilakukan mungkin adalah manipulasi DOM.

kode diatas kalo menurut ane bisa diubah dengan membuat self-executing function diakhir halaman..

HTML Code:

<!DOCTYPE html>
<html>
<head>
<title>aksjhkasd</title>
</head>
<body>
asdhk askdkas ka sdjhkasdkas

<script type="text/javascript">
(function /*windowOnLoad*/() {
var foo = "boo";
function bar() {
alert(foo);
}

bar();
})();
</script>
</body>
</html>

kalo ane biasanya membuat file javascript ekternal..

HTML Code:

<!DOCTYPE html>
<html>
<head>
<title>aksjhkasd</title>
</head>
<body>
asdhk askdkas ka sdjhkasdkas

<script type="text/javascript"src="main.js"></script>
</body>
</html>

Code:
```
// main.js

 (function /*windowOnLoad*/() {

 var foo = "boo";

 function bar() {

 alert(foo);

 }

 

 bar();

 })();
```

lain2nya nyusul saja deh.. mood ane nulis hilang mendadak emoticon-Ngacir

beberapa hal juga sepertinya akan ditambahkan mastah2 disini.. emoticon-Big Grin

TAMBAHAN DARI MASTAH2.. emoticon-Big Grin

4.4K

Kutip

Balasan

Guest

Tulis komentar menarik atau mention replykgpt untuk ngobrol seru

Urutan

Terbaru

Terlama

Guest

Tulis komentar menarik atau mention replykgpt untuk ngobrol seru

Komunitas Pilihan