Pedoman gaya JavaScript

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

Konvensi kode JavaScript

Konvensi kode (Coding conventions) mengacu kepadaPedoman gaya pemrograman。Prinsip-prinsip ini umumnya termasuk:

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

Konvensi kodeMemastikan kualitas:

  • Meningkatkan keterbacaan kode
  • Meningkatkan kepentingan kode

Konvensi kode dapat menjadi aturan tulis yang diikuti tim, atau kebiasaan pemrograman pribadi Anda.

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

Anda seharusnya terus membaca bab berikutnya 'Best Practices' untuk belajar bagaimana menghindari perangkap pemrograman.

Nama variabel

Pada CodeW3C.com, kami menggunakanCase-sensitive。

Semua nama denganHurufAwal.

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

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

Ruang sekitar operator

Pastikan untuk menambah ruang sekitar operator ( = + - * / ) dan setelah koma:

Contoh

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

Indentasi kode

Pastikan untuk menggunakan 4 ruang untuk indentasi blok kode:

Fungsi

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

Jangan gunakan tab untuk indentasi. Tab diantara editor berbeda dapat diartikan berbeda;

Kalimat aturan

Aturan kalimat sederhana

Pastikan untuk menutup kalimat tunggal dengan tanda 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 ruang setelah tanda buka kurung;
  • Tulis tanda kurung tutup di baris baru, tanpa ruang awal;
  • Jangan gunakan tanda titik koma untuk menutup kalimat kompleks;

Fungsi:

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

Pengulangan:

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 koma dan ruang setelah setiap properti dan nilai;
  • Jangan tulis tanda koma di belakang pasangan nilai properti terakhir;
  • Tulis tanda kurung tutup di baris baru, tanpa ruang awal;
  • Pastikan untuk mengakhiri definisi objek dengan tanda titik koma;

Contoh

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

Boleh mengurangkan objek pendek dalam satu baris, hanya gunakan ruang putih 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 yang melebihi 80 karakter.

Jika pernyataan JavaScript melebihi panjang baris, tempat terbaik untuk memantulkan 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. Misalnya:

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

Apakah kami seharusnya menggunakan di nama variabel?Garis gantikan、Huruf kapital berantaiatauGaris bawahkah?

Ini adalah masalah yang sering dibahas para pendekar. Jawabannya tergantung siapa yang menjawab pertanyaan ini:

Garis gantikan di HTML dan CSS:

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

CSS menggunakan garis gantikan di property-names (font-size).

Garis gantikan dapat disalahartikan sebagai operator pengurangan. Pemberian nama JavaScript tidak mengizinkan penggunaan garis gantikan.

Garis bawah:

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

Garis bawah sering digunakan di referensi PHP.

Metode penamaan Pascal (PascalCase):

Programmer bahasa C sering menggunakan metode penamaan Pascal.

Huruf kapital berantai (camelCase):

JavaScript sendiri, jQuery, dan pustaka JavaScript lainnya menggunakan huruf kapital berantai (camelCase).

Tolak menuliskan pemberian nama JavaScript dengan simbol $. Hal ini akan menyebabkan konflik pemberian nama JavaScript.

Memuat JavaScript di HTML

Gunakan sintaks yang sederhana untuk memuat skrip luar (aturan type bukan wajib):

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

Akses elemen HTML

Kerugian dari gaya HTML yang 'keliru', mungkin menyebabkan kesalahan JavaScript.

Kedua pernyataan 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 JavaScript).

访问 HTML 样式指南。

文件扩展名

HTML 文件应该使用 .html 扩展名（而非 .htm）。

CSS 文件应该使用 .css 扩展名。

JavaScript 文件应该使用 .js 扩展名。

使用小写文件名

大多数 web 服务器（Apache、Unix）对文件名的大小写敏感：

london.jpg 无法视作 London.jpg 进行访问。

其他 web 服务器（微软的 IIS）对大小写不敏感：

london.jpg 能够以 London.jpg 或 london.jpg 来访问。

如果您混合使用大小写，则必须严格保持连续和一致。

如果您将站点从大小写不敏感的服务器转移至对大小写敏感的服务器，即使这种小错误也可能破坏您的网站。

为了避免这些问题，请始终使用小写文件名（如果可能）。

性能

计算机不会使用代码约定。大部分规则对程序的执行影响很小。

缩进和额外的空格对小段脚本并不重要。

对于开发中的脚本，应该优先考虑可读性。应该缩小更大型的生产脚本。