Selalu gunakan konvensi coding yang sama untuk semua proyek JavaScript Anda.
Konvensi Coding JavaScript
Coding konvensi adalah panduan gaya untuk pemrograman. Mereka biasanya mencakup:
- Penamaan dan deklarasi aturan untuk variabel dan fungsi.
- Aturan untuk penggunaan ruang putih, lekukan, dan komentar.
- Pemrograman praktek dan prinsip-prinsip
Coding konvensi kualitas aman:
- Meningkatkan pembacaan kode
- Membuat pemeliharaan kode lebih mudah
Coding konvensi dapat didokumentasikan aturan untuk tim untuk mengikuti, atau hanya menjadi praktek coding individu.
Halaman ini menjelaskan tentang ketentuan kode umum JavaScript digunakan oleh w3ii.
Anda juga harus membaca bab berikutnya "Best Practices", dan belajar bagaimana untuk menghindari coding perangkap.
Nama variabel
Pada w3ii kita menggunakan CamelCase untuk nama identifier (variabel dan fungsi).
Semua nama dimulai dengan huruf.
Di bagian bawah halaman ini, Anda akan menemukan diskusi yang lebih luas tentang penamaan aturan.
firstName = "John";
lastName = "Doe";
price = 19.90;
tax = 0.20;
fullPrice = price + (price * tax);Spasi Sekitar Operator
Selalu menempatkan spasi di sekitar operator ( = + - * / ) , dan setelah koma:
contoh:
var x = y + z;
var values = ["Volvo", "Saab",
"Fiat"];kode Indentasi
Selalu gunakan 4 spasi untuk indentasi blok kode:
fungsi:
function toCelsius(fahrenheit) {
return (5 / 9) * (fahrenheit - 32);
}
Jangan gunakan tab (tabulasi) untuk lekukan. editor yang berbeda menafsirkan tab berbeda.
Aturan pernyataan
Aturan umum untuk pernyataan sederhana:
- Selalu mengakhiri pernyataan sederhana dengan titik koma.
contoh:
var values = ["Volvo", "Saab",
"Fiat"];
var person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor:
"blue"
};Aturan umum untuk kompleks pernyataan (compound):
- Menempatkan braket pembukaan di akhir baris pertama.
- Gunakan satu ruang sebelum braket pembukaan.
- Menempatkan kurung tutup pada baris baru, tanpa spasi terkemuka.
- Jangan mengakhiri pernyataan yang kompleks dengan titik koma.
fungsi:
function toCelsius(fahrenheit) {
return (5 / 9) * (fahrenheit - 32);
}
loop:
for (i = 0; i < 5; i++) {
x += i;
}conditional:
if (time < 20) {
greeting = "Good day";
} else {
greeting = "Good evening";
}Aturan objek
Aturan umum untuk definisi objek:
- Tempatkan braket pembukaan pada baris yang sama seperti nama objek.
- Gunakan usus ditambah satu ruang antara masing-masing properti dan nilainya.
- Gunakan tanda kutip di nilai string, tidak ada nilai-nilai numerik.
- Jangan menambahkan koma setelah pasangan properti-nilai terakhir.
- Tempatkan braket penutupan pada baris baru, tanpa spasi terkemuka.
- Selalu berakhir definisi objek dengan titik koma.
Contoh
var person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor:
"blue"
};benda singkat dapat tertulis dikompresi, pada satu baris, menggunakan ruang hanya antara sifat, seperti ini:
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};Jalur Panjang <80
Untuk dibaca, menghindari garis panjang dari 80 karakter.
Jika pernyataan JavaScript tidak muat pada satu baris, tempat terbaik untuk istirahat itu, adalah setelah operator atau koma.
Konvensi penamaan
Selalu menggunakan konvensi penamaan yang sama untuk semua kode Anda. Sebagai contoh:
- Variabel dan fungsi nama ditulis sebagai CamelCase
- Variabel global yang ditulis dalam huruf besar (Kami tidak, tapi itu cukup umum)
- Konstanta (seperti PI) ditulis dalam huruf besar
Jika Anda menggunakan hyp-ayam, CamelCase, atau garis bawah, di nama variabel?
Ini adalah pertanyaan programmer sering mendiskusikan. Jawabannya tergantung pada siapa Anda bertanya:
Tanda hubung dalam HTML dan CSS:
HTML5 atribut dapat mulai dengan data- (data-kuantitas, data harga).
CSS menggunakan tanda hubung di properti-nama (font-size).
Tanda hubung dapat keliru sebagai upaya pengurangan. Tanda hubung tidak diperbolehkan dalam nama JavaScript.
menggarisbawahi:
Banyak programmer lebih suka menggunakan garis bawah (date_of_birth), terutama di database SQL.
Garis bawah yang sering digunakan dalam dokumentasi PHP.
PascalCase:
PascalCase sering disukai oleh C programmer.
CamelCase:
CamelCase digunakan oleh JavaScript itu sendiri, oleh jQuery, dan perpustakaan lainnya JavaScript.
Jangan memulai nama dengan tanda $. Ini akan menempatkan Anda dalam konflik dengan banyak nama perpustakaan JavaScript.
Memuat JavaScript dalam HTML
Gunakan sintaks yang sederhana untuk memuat skrip eksternal (jenis atribut tidak diperlukan):
<script src="myscript.js">
Mengakses HTML Elements
Konsekuensi dari menggunakan "berantakan" gaya HTML, mungkin mengakibatkan kesalahan JavaScript.
Kedua pernyataan JavaScript akan menghasilkan hasil yang berbeda:
var obj =
getElementById("Demo")
var obj = getElementById("demo")
Jika memungkinkan, gunakan konvensi yang sama penamaan (seperti JavaScript) di HTML.
Ekstensi File
File HTML harus memiliki ekstensi .html (tidak htm).
File CSS harus memiliki ekstensi .css.
File JavaScript harus memiliki ekstensi js.
Gunakan Bawah Kasus Nama File
Kebanyakan server web (Apache, Unix) adalah case sensitif tentang nama file:
london.jpg tidak dapat diakses sebagai London.jpg .
server web lainnya (Microsoft, IIS) tidak case sensitif:
london.jpg dapat diakses sebagai London.jpg atau london.jpg .
Jika Anda menggunakan campuran huruf besar dan kecil, Anda harus sangat konsisten.
Jika Anda bergerak dari kasus sensitif, ke server kasus sensitif, bahkan kesalahan kecil dapat merusak situs web Anda.
Untuk menghindari masalah ini, selalu menggunakan nama file huruf kecil (jika mungkin).
prestasi
Coding konvensi tidak digunakan oleh komputer. Kebanyakan aturan berdampak kecil terhadap pelaksanaan program.
Indentasi dan spasi tambahan tidak signifikan dalam skrip kecil.
Untuk kode dalam pengembangan, pembacaan harus lebih disukai. skrip produksi yang lebih besar harus diminimalkan.