JS Best Practice

Beranda

...

Programmer Forum
JS Best Practice

poendung

06-12-2013 09:20

JS Best Practice

Gan ane mau share tentang cara coding Javascript yang baik

Make it Understandable

Quote:

Gunakan nama variable yang singkat dan mudah dimengerti
Variable yang buruk:

Spoiler for salah:

Code:

x1 fe2 xbqne

incrementerForMainLoopWhichSpansFromTbaikwenty

createNewMemberIfAgeOverTwentyOneAndMoonIsFull

Hindari penggunaan suatu nilai pada nama variable atau function
Belum tentu berlaku di semua negara:

Spoiler for salah:

Code:

isOverSeventeen()

Berlaku di seluruh tempat:

Spoiler for benar:

Code:

isLegalAge()

Code agan itu bagaikan sebuah cerita. maka buatlah sebuah cerita yang mudah diikuti

Avoid Globals

Quote:

Global variable merupakan ide yang benar-benar buruk

Alasan:Agan membahayakan code agan untuk di-overwrite code Javascript lain yang agan include setelah code Javascript agan
Solusi: Gunakan penutup dan modul pattern
Masalah: Semua variable adalah global dan bisa diakses; akses tidak bisa dibatasi, apapun yang terjadi di suatu halaman dapat meng-overwrite yang agan kerjakan

Spoiler for salah:

Code:

var current = null;

var labels = {

 'home':'home',

 'articles':'articles',

 'contact':'contact' 

};

function init(){

};

function show(){

 current = 1;

};

function hide(){

 show();

};

Semuanya bisa dibatasi namun bisa diakses melalui nama object
Masalah:Pengulangan nama modul mengarah pada code yang tebal dan mengganggu

Spoiler for salah:

Code:

demo = {

 current:null,

 labels:{

 'home':'home',

 'articles':'articles',

 'contact':'contact'

 },

 init:function(){

 },

 show:function(){

 demo.current = 1;

 },

 hide:function(){

 demo.show();

 }

}

Agan harus menspesifikasikan mana yang global dan yang bukan
Masalah:Pengulangan nama modul, berbeda syntax namun dengan function dalam

Spoiler for salah:

Code:

module = function(){

 var labels = {

 'home':'home',

 'articles':'articles',

 'contact':'contact'

 };

 return {

 current:null,

 init:function(){

 },

 show:function(){

 module.current = 1;

 },

 hide:function(){

 module.show();

 }

 }

}();

Penggunaan Modul Pattern

Spoiler for benar:

Code:

module = function(){

 var current = null;

 var labels = {

 'home':'home',

 'articles':'articles',

 'contact':'contact'

 };

 var init = function(){

 };

 var show = function(){

 current = 1;

 };

 var hide = function(){

 show();

 }

 return{init:init, show:show, current:current}

}();

module.init();

Stick to a Strict Coding Style

Quote:

Browser adalah parser Javascript yang paling pemaaf. Namun bagaimanapun, style coding yang seenaknya bakal nyusahin agan ketika agan pindah ke lingkungan lain atau menyerahkan kerjaan agan ke developer lain. Code yang benar adalah code yang aman.

Quote:

Validasi code agan disini:JSLint

Comment as Much as Needed but Not More

Quote:

"Code yang baik menjelaskan dirinya" adalah mitos yang salah

Buat comment untuk sesuatu yang agan pikir perlu - tapi ngga perlu ceritain tentang hidup agan.
Hindari penggunaan //. /* */ jauh lebih aman digunakan karena tidak menyebabkan error ketika line break dihapus.
Kalau agan nge-debug menggunakan comment, ini ada tricknya:

Spoiler for benar:

Code:

module = function(){

 var current = null;

/*

 var init = function(){

 };

 var show = function(){

 current = 1;

 };

 var hide = function(){

 show();

 }

// */

 return{init:init, show:show, current:current}

}();

Comment tidak boleh sampai ke tangan end user sebagai plain HTML atau Javascript. Lihat bagian Development code is not live code

Avoid Mixing with Other Technologies

Quote:

Javascript bagus untuk perhitungan, konversi, akses ke source yang ada di luar (Ajax) dan mendefinisikan perlakuan dari sebuah tampilan (event handling). Sisanya berikan pada teknologi yang berwenang.

Contoh:
Beri border merah untuk class "mandatory" jika valuenya kosong

Spoiler for salah:

Code:

var f = document.getElementById('mainform');

var inputs = f.getElementsByTagName('input');

for(var i=0,j=inputs.length;i<j;i++){

 if(inputs[i].className === 'mandatory' && inputs.value === ''){

 inputs[i].style.borderColor = '#f00';

 inputs[i].style.borderStyle = 'solid';

 inputs[i].style.borderWidth = '1px';

 }

}

Orang tidak boleh merubah code Javascript untuk mengubah tampilan

Spoiler for benar:

Code:

var f = document.getElementById('mainform');

var inputs = f.getElementsByTagName('input');

for(var i=0,j=inputs.length;i<j;i++){

 if(inputs[i].className === 'mandatory' && inputs.value === ''){

 inputs[i].className+=' error';

 }

}

Penggunaan turunan CSS dapat membantu menghindari loop pada banyak element

Use Shortcut Notations

Quote:

Shortcut notations membuat code agan cepat dan mudah dibaca ketika agan terbiasa dengan ini.

Code ini

Spoiler for salah:

Code:

var lunch = new Array();

lunch[0]='Dosa';

lunch[1]='Roti';

lunch[2]='Rice';

lunch[3]='what the heck is this?';

Sama dengan...

Spoiler for benar:

Code:

var lunch = [

 'Dosa',

 'Roti',

 'Rice',

 'what the heck is this?'

];

Code ini

Spoiler for salah:

Code:

if(v){

 var x = v;

} else {

 var x =10;

}

Sama dengan...

Spoiler for benar:

Code:

var x = v || 10;

Code ini

Spoiler for benar:

Code:

var direction;

if(x > 100){

 direction = 1;

} else {

 direction = -1;

}

Sama dengan...

Spoiler for benar:

Code:

var direction = (x > 100) ? 1 : -1;

Modularize

Quote:

Buat code agan modular dan khusus

Menggoda dan mudah untuk menulis sebuah function yang melakukan segalanya. Namun, karena agan memperluas fungsi tersebut agan akan menemukan bahwa agan melakukan hal yang sama dalam beberapa function.
Untuk mencegah hal itu, pastikan untuk menulis lebih kecil, function helper yang memenuhi salah satu tugas tertentu daripada method yang melakukan semuanya.
Pada tahap selanjutnya agan juga dapat mengekspos function-function ini ketika menggunakan modul pattern untuk membuat API untuk memperluas fungsionalitas utama.
Kode yang baik harus mudah untuk dibuat tanpa menulis ulang intinya.

Enhance Progressively

Quote:

Hindari pembuatan banyak html yang terlalu bergantung pada Javascript

Men-generate DOM itu lambat dan sangat memakan resource.
Element-element yang bergantung pada Javascript namun tetap ada pada saat Javascript dimatikan berarti kita telah melanggar janji pada para user

Allow for Configuration and Translation

Quote:

Segala yang kemungkinan berubah-ubah di code agan tidak boleh tersebar di seluruh code agan

Init termasuk label, class CSS, ID, dan nilai awal.
Dengan memasukan hal ini pada sebuah Object konfigurasi dan membuatnya public berarti kita membuat code kita mudah untuk di-maintenance dan bisa di-customize
Contoh:

Spoiler for benar:

Code:

carousel = function(){

 var config = {

 CSS:{

 classes:{

 current:'current',

 scrollContainer:'scroll'

 },

 IDs:{

 maincontainer:'carousel'

 }

 },

 labels:{

 previous:'back',

 next:'next',

 auto:'play'

 },

 settings:{

 amount:5,

 skin:'blue',

 autoplay:false

 },

 };

 function init(){

 };

 function scroll(){

 };

 function highlight(){

 };

 return {config:config,init:init}

}();

Avoid Heavy Nesting

Quote:

Code jadi tidak terbaca di tingkatan tertentu pada loop

Adalah sebuah ide buruk membuat loop bertingkat dalam sebuah loop yang berarti juga harus mengurusi banyak variable iterasi (i,j,k,l...).

Spoiler for salah:

Code:

function renderProfiles(o){

 var out = document.getElementById('profiles');

 for(var i=0;i<o.members.length;i++){

 var ul = document.createElement('ul');

 var li = document.createElement('li');

 li.appendChild(document.createTextNode(o.members[i].name));

 var nestedul = document.createElement('ul');

 for(var j=0;j<o.members[i].data.length;j++){

 var datali = document.createElement('li');

 datali.appendChild(

 document.createTextNode(

 o.members[i].data[j].label + ' ' + 

 o.members[i].data[j].value

 )

 );

 nestedul.appendChild(detali);

 }

 li.appendChild(nestedul);

 }

 out.appendChild(ul);

}

Agan bisa menghindari loop yang tebel ini dengan membuat sebuah method

Spoiler for benar:

Code:

function renderProfiles(o){

 var out = document.getElementById('profiles');

 for(var i=0;i<o.members.length;i++){

 var ul = document.createElement('ul');

 var li = document.createElement('li');

 li.appendChild(document.createTextNode(data.members[i].name));

 li.appendChild(addMemberData(o.members[i]));

 }

 out.appendChild(ul);

}

function addMemberData(member){

 var ul = document.createElement('ul');

 for(var i=0;i<member.data.length;i++){

 var li = document.createElement('li');

 li.appendChild(

 document.createTextNode(

 member.data[i].label + ' ' +

 member.data[i].value

 )

 );

 }

 ul.appendChild(li);

 return ul;

}

Pikirkan tentang IDE yang buruk dan layar yang kecil

Optimize Loops

Quote:

Loop bisa benar-benar lambar di Javascript

Kenapa? karena kebanyakan kita melakukan hal yang sia-sia di dalam loop.
Jangan buat javascript membaca panjang suatu array di setiap iterasi pada loop 'for'. Simpan panjang array ini di sebuah variable lain.

Spoiler for salah:

Code:

var names = ['George', 

'Ringo', 

'Paul', 

'John'];

for(var i=0;i<names.length;i++){

 doSomethingWith(names[i]);

}

Spoiler for benar:

Code:

var names = ['George', 

'Ringo', 

'Paul', 

'John'];

for(var i=0,j=names.length;i<j;i++){

 doSomethingWith(names[i]);

}

Simpan perhitungan yang berat di luar loop. termasuk regular expression tapi yang paling utama ada manipulasi DOM.
Agan boleh bikin node DOM di dalam loop tapi hindari untuk memasukkannya ke document saat loop.

Keep DOM Access to a Minimum

Quote:

Kalau bisa dihindari, jangan akses DOM

Alasan:lambat dan banyak masalah-masalah browser mengenai akses dan perubahan DOM
Solusi: tulis dan gunakan method helper untuk mem-batch-convert data ke html.
simpan datanya sebanyak-banyakny lalu panggil method tersebut dan render seluruhnya sekaligus.

Don’t Yield to Browser Whims

Quote:

Daripada bergantung pada kelakukan browser yang rada nyusahin and berharap berjalan sesuai rencana...

Hindari melakukan hacking. Namun lakukan analisa yang detail.
Kebanyakan agan banyak nemuin function-function ekstra yang dibutuhin karena perencanaan yang buruk pada sebuah tampilan.

Don’t Trust Any Data

Quote:

Code yang baik tidak mempercayai data-data yang datang

Jangan percaya sama document HTML
User bisa ngubah-ngubah struktur HTML contohnya pakai firebug
Jangan percaya sama data yang masuk ke function agan adalah data dengan format yang benar
Test menggunakan typeof dan lakukan sesuatu terhadapnya
Jangan beranggapan element yang ada DOM selalu ada
Lakukan test element tersebut dan pastikan element tersebut benar sebelum mengubahnya
Jangan gunakan Javascript untuk melindungi sesuatu
Javascript mudah di krack semudah menulis code-nya

Add Functionality with Javascript Not Content

Quote:

Ketika agan membuat banyak sekali HTML dalam Javascript, kemungkinan ada yang salah dengan kerjaan agan.

Suatu hal yang kurang pantas membuat HTML menggunakan DOM, sangat kasar menggunakan innerHTML, dan sulit untuk melacak kualitas HTML yang agan buat.
Kalau agan benar-benar memiliki tampilan yang besar yang hanya bisa digunakan jika Javascript nyala, maka panggilah tampilan tersebut sebagai dokumen HTML statis melalui Ajax.
Dengan begitu agan dapat lebih mudah melakukan maintenance dan customization.

Build on the Shoulders of Giants

Quote:

Javascript itu menyenangkan, namun menulis Javascript untuk browser agak kurang menyenangkan, jadi... mulai dengan library yang bagus

library Javascript secara spesifik dibuat agar browser dan agan bisa coding lebih terprediksi dengan menambal lubang di browser.
library yang bagus membantu agan menulis code yang bekerja tanpa harus me-maintain efek samping dari perbedaan browser.

Development Code is Not Live Code

Quote:

Live code ditulis untuk mesin, sedangkan development code ditulis untuk manusia.

Susun, kecilkan, dan optimalkan code agan saat proses build
Jangan mengoptimasi terlalu dini atau agan bakal nyusahin temen-temen agan yang juga Kngerjain
Kalau kita bisa mempersingkat waktu coding, kita bakal punya waktu lebih buat menyempurnakan konversi ke code mesin.

OK sekian dulu sharingnya, nanti ane lanjut ke materi yang lain.
kalo yang merasa ini berguna boleh dong bagi emoticon-Blue Guy Cendol (L)