Panduan Gaya JavaScript dan Konvensi Coding ~ KODELOVER

Selalu gunakan konvensi pengkodean yang sama untuk semua proyek JavaScriptmu.

Konvensi Coding JavaScript

Konvensi pengkodean adalah panduan gaya untuk pemrograman. biasanya mencakup:

    Aturan penamaan dan deklarasi untuk variabel dan function.
    Aturan untuk penggunaan white space, indentasi, dan komentar.
    Praktik dan prinsip pemrograman

Konvensi pengkodean menjamin kualitas:

    Meningkatkan keterbacaan kode
    Buat kode perawatan lebih mudah

Konvensi pengkodean dapat mendokumentasikan peraturan yang harus diikuti oleh tim, atau hanya menjadi praktik pengkodean individual Anda.

Nama variabel

Semua nama diawali dengan letter.

Di bagian bawah halaman ini, Anda akan menemukan diskusi yang lebih luas mengenai aturan penamaan.

firstName = "John";
lastName = "Doe";

price = 19.90;
tax = 0.20;

fullPrice = price + (price * tax);

Ruang di Sekitar Operator

Selalu menaruh spasi di sekitar operator (= + - * /), dan setelah koma:
Contoh:

var x = y + z;
var nilai= ["Volvo", "Saab", "Fiat"];

Kode Indentasi

Selalu gunakan 4 spasi untuk lekukan blok kode:
function:

function toCelsius(fahrenheit) {
return (5 / 9) * (fahrenheit - 32);
}

Catatan Jangan gunakan tab (tabulator) untuk indentasi. Editor yang berbeda menafsirkan tab secara berbeda.

Aturan Pernyataan

Aturan umum untuk pernyataan sederhana:

Selalu akhiri pernyataan sederhana dengan titik koma.

Contoh:

var nilai= ["Volvo", "Saab", "Fiat"];

var orang= {
    firstName: "John",
    lastName: "Doe",
    age: 50,
    eyeColor: "blue"
};

Aturan umum untuk pernyataan kompleks (majemuk):

Letakkan braket pembuka di akhir baris pertama.
Gunakan satu spasi sebelum braket pembuka.
Letakkan braket penutup pada baris baru, tanpa spasi utama.
Jangan mengakhiri pernyataan kompleks dengan titik koma.

function:

function toCelsius(fahrenheit) {
return (5 / 9) * (fahrenheit - 32);
}

Loops:

for (i = 0; i < 5; i++) {
x += i;
}

Kondom:

if(waktu <20){
Salam = "selamat siang";
} else{
Salam = "Selamat malam";
}

Aturan Objek

Aturan umum untuk definisi objek:

Tempatkan braket pembuka pada baris yang sama dengan nama objek.
Gunakan kolon ditambah satu spasi di antara masing-masing properti dan nilainya.
Gunakan tanda kutip di sekitar nilai string, bukan di sekitar nilai numerik.
Jangan menambahkan tanda koma setelah pasangan nilai properti terakhir.
Tempatkan braket penutup pada baris baru, tanpa spasi utama.
Selalu akhiri definisi objek dengan titik koma.

Contoh

var person = {
    firstName: "John",
    lastName: "Doe",
    age: 50,
    eyeColor: "blue"
};

Objek pendek dapat ditulis dikompres, pada satu baris, menggunakan spasi hanya antara properti, seperti ini:

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

Panjang Baris <80

Untuk keterbacaan, hindari garis lebih panjang dari 80 karakter.

Jika pernyataan JavaScript tidak sesuai pada satu baris, tempat terbaik untuk memecahkannya, adalah setelah operator atau koma.
Contoh

document.getElementById("demo").innerHTML =
"Hello Dolly.";

Konvensi Penamaan

Selalu gunakan konvensi penamaan yang sama untuk semua kode Anda. Sebagai contoh:

Nama variabel dan function ditulis sebagai camelCase
variabel global ditulis dalam UPPERCASE (Kami tidak, tapi ini sangat umum)
Konstanta (seperti PI) ditulis dalam UPPERCASE

Haruskah Anda menggunakan hyp-hens, camelCase, atau under_scores dengan nama variabel?

Ini adalah pertanyaan yang sering ditanyakan oleh programmer. Jawabannya tergantung pada siapa yang Anda tanyakan:

Tanda hubung dalam HTML dan CSS:

Atribut HTML5 bisa dimulai dengan data- (data-quantity, data-price).

CSS menggunakan tanda hubung pada nama properti (ukuran huruf).

Catatan Tanda hubung bisa salah sebagai upaya pengurangan. Tanda hubung tidak diperbolehkan dalam nama JavaScript.

Menggarisbawahi:

Banyak programmer lebih suka menggunakan underscore (date_of_birth), terutama di database SQL.

Underscore sering digunakan dalam dokumentasi PHP.

PascalCase:

PascalCase sering disukai oleh programmer C.

CamelCase:

CamelCase digunakan oleh JavaScript sendiri, oleh jQuery, dan pustaka JavaScript lainnya.

Catatan Jangan memulai nama dengan tanda $. Ini akan membuat Anda berkonflik dengan banyak nama perpustakaan JavaScript.

Memuat JavaScript dalam HTML

Gunakan sintaks sederhana untuk memuat skrip eksternal (atribut jenis tidak diperlukan):

<script src = "myscript.js">

Mengakses Elemen HTML

Konsekuensi menggunakan gaya HTML "berantakan", bisa mengakibatkan kesalahan JavaScript.

Kedua pernyataan JavaScript ini akan menghasilkan hasil yang berbeda:

var obj = getElementById ("Demo")

var obj = getElementById ("demo")

Jika memungkinkan, gunakan konvensi penamaan yang sama (seperti JavaScript) di HTML.

Kunjungi HTML Style Guide.
Ekstensi file

File HTML harus memiliki ekstensi .html (bukan .htm).

File CSS harus memiliki ekstensi .css.

File JavaScript harus memiliki ekstensi .js.
Gunakan Nama File Case yang Lebih Rendah

Sebagian besar server web (Apache, Unix) peka terhadap nama file:

London.jpg tidak dapat diakses sebagai London.jpg.

Server web lainnya (Microsoft, IIS) tidak sensitif huruf:

London.jpg dapat diakses sebagai London.jpg atau london.jpg.

Jika Anda menggunakan campuran huruf besar dan kecil, Anda harus sangat konsisten.

Jika Anda berpindah dari kasus yang tidak sensitif, ke server sensitif kasus, kesalahan kecil pun dapat merusak situs web Anda.

Untuk menghindari masalah ini, selalu gunakan nama file case yang lebih rendah (jika memungkinkan).
Kinerja

Konvensi pengodean tidak digunakan oleh komputer. Sebagian besar peraturan berdampak kecil terhadap pelaksanaan program.

Indentasi dan ruang ekstra tidak signifikan dalam skrip kecil.

Untuk kode dalam pengembangan, pembacaan harus lebih disukai. Skrip produksi yang lebih besar harus diminimalkan.

KODELOVER

Panduan Gaya JavaScript dan Konvensi Coding

Related Post