Pedoman gaya JavaScript

Pilih selalu konvensi kode yang sama untuk semua proyek JavaScript Anda.

Konvensi kode JavaScript

Konvensi kode (Coding conventions) adalah:Pedoman gaya pemrogramanPrinsip-prinsip ini umumnya termasuk:

  • Aturan penamaan dan deklarasi variabel dan fungsi
  • Aturan penggunaan spasi, indentasi, dan komentar
  • Adat pemrograman dan pedoman

Konvensi kodePastikan kualitas:

  • Memperbaiki bacaan kode
  • Meningkatkan kemanfaatan kode

Konvensi kode dapat menjadi aturan yang ditetapkan untuk diikuti tim, atau kebiasaan pengodean pribadi Anda.

Halaman ini memperkenalkan konvensi kode JavaScript yang digunakan di CodeW3C.com.

Anda harus terus membaca bab berikutnya 'Best Practices' untuk belajar bagaimana menghindari perangkap pengodean.

Nama variabel

Pada CodeW3C.com, kami menggunakanKapital huruf bergelombang.

Semua nama dimulai denganHurufAwalnya.

Pada bagian bawah halaman ini, kita akan mendiskusikan lebih lanjut tentang aturan penamaan.

firstName = "Bill";
lastName = "Gates";
price = 19.90;
tax = 0.20;
fullPrice = price + (price * tax);

Spasi di sekitar operator

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

Contoh

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

Indentasi kode

Selalu gunakan 4 spasi untuk indentasi blok kode:

Fungsi

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

Jangan gunakan tab untuk indentasi. Penjelasan tab diantara editor berbeda;

Kalimat aturan

Aturan kalimat sederhana

Selalu tutup kalimat tunggal dengan titik koma:

Contoh

var values = ["Volvo", "Saab",  "Fiat"];
var person = {
    firstName: "Bill",
     lastName: "Gates",
    age: 50,
    eyeColor:  "blue"
};

Aturan umum untuk kalimat kompleks (compound):

  • Tulis tanda buka kurung di akhir baris pertama;
  • Gunakan spasi sebelum tanda buka kurung;
  • Tulis tanda kurung tutup di baris baru, tanpa spasi pengawal;
  • Jangan tutup kalimat kompleks dengan titik koma;

Fungsi:

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

Perulangan:

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

Kondisi:

if (time < 20) {
    greeting = "Good day";
} else {
     greeting = "Good evening";
}

Aturan objek

Aturan umum untuk definisi objek:

  • Letakkan tanda buka kurung dan nama objek di baris yang sama;
  • Gunakan tanda titik dan spasi di antara properti dan nilai;
  • Jangan tulis koma di belakang pasangan nilai properti terakhir;
  • Tulis tanda kurung tutup di baris baru, tanpa spasi pengawal;
  • Selalu tutup definisi objek dengan titik koma;

Contoh

var person = {
    firstName: "Bill",
    lastName: "Gates",
    age: 19,
    eyeColor:  "blue"
};

Dapat disingkatkan objek pendek dalam satu baris, hanya gunakan spasi di antara properti, seperti ini:

var person = {firstName:"Bill", lastName:"Gates", age:50, eyeColor:"blue"};

Panjang baris kurang dari 80

Untuk meningkatkan keterbacaan, hindari panjang baris melebihi 80 karakter.

Jika kalimat JavaScript melebihi panjang satu baris, tempat terbaik untuk menyalin adalah setelah operator atau koma.

Contoh

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

Coba sendiri

Konvensi pemberian nama

Selalu gunakan konvensi pemberian nama yang sama untuk semua kode Anda. Contohnya:

  • Nama variabel dan fungsi menggunakanHuruf kapital campuruntuk menulis
  • Variabel global menggunakanhuruf besar（Kami tidak melakukan hal ini, tetapi cukup umum）
  • Konstanta (seperti PI) menggunakanhuruf besar

Apakah kami seharusnya menggunakan di nama variabel?Garis ganda、Huruf kapital campuratauGaris bawahmau?

Ini adalah masalah yang sering disebutkan para programmer. Jawabannya tergantung siapa yang menjawab pertanyaan ini:

Garis ganda di HTML dan CSS:

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

CSS menggunakan garis ganda di property-name (font-size).

Garis ganda dapat disalahartikan sebagai operator pengurangan. Penamaan JavaScript tidak mengizinkan penggunaan garis ganda.

Garis bawah:

Banyak programmer menyukai penggunaan garis bawah (date_of_birth), khususnya di database SQL.

Garis bawah sering digunakan di referensi PHP.

Penamaan Pascal (PascalCase):

Programmer bahasa C sering menggunakan penamaan Pascal.

Huruf kapital campur (camelCase):

JavaScript sendiri, jQuery serta pustaka JavaScript lainnya menggunakan huruf kapital campur (camelCase).

Jangan mulai pemberian nama JavaScript dengan simbol $. Hal ini akan menyebabkan konflik nama pustaka JavaScript.

Memuat JavaScript di HTML

Gunakan sintaks yang sederhana untuk memuat skrip eksternal (atribut type bukan wajib):

<script src="myscript.js"></script>

Akses elemen HTML

Akibat dari menggunakan gaya HTML yang 'kelihatan buruk', mungkin akan menyebabkan kesalahan JavaScript.

Kedua kalimat JavaScript ini akan menghasilkan hasil yang berbeda:

var obj = getElementById("Demo")
var obj = getElementById("demo")

Jika mungkin, gunakan konvensi pemberian nama yang sama di HTML (seperti di JavaScript).

Akses Panduan Gaya HTML.

Ekstensi berkas

Berkas HTML harus menggunakan .html ekstensi (bukan .htm).

Berkas CSS harus menggunakan .css Ekstensi.

Berkas JavaScript harus menggunakan .js Ekstensi.

Gunakan nama berkas kecil.

Sebagian besar layanan web (Apache, Unix) sensitif terhadap huruf besar dan kecil dalam nama berkas:

london.jpg tak dapat diakses seperti London.jpg.

Layanan web lainnya (Microsoft IIS) tak sensitif terhadap huruf besar dan kecil:

london.jpg dapat diakses dengan London.jpg atau london.jpg.

Jika Anda campur penggunaan huruf besar dan kecil, Anda harus mempertahankan konsisten dan terus-menerus.

Jika Anda memindahkan situs dari server yang tak sensitif terhadap huruf besar dan kecil ke server yang sensitif terhadap huruf besar dan kecil, bahkan kesalahan kecil ini dapat merusak situs Anda.

Untuk menghindari masalah ini, selalu gunakan nama berkas kecil (jika memungkinkan).

Kinerja

Komputer tidak menggunakan konvensi kode. Sebagian besar aturan hanya mempengaruhi eksekusi program secara kecil.

Indentasi dan spasi ekstra untuk skrip yang pendek tidak penting.

Untuk skrip pengembangan, seharusnya mempertimbangkan prioritas bacaan. Harus memperkecil skrip produksi yang besar.