Tüm JavaScript'leriniz için her zaman aynı kodlama kurallarını kullanın projeler.
Kodlama kuralları programlama için stil yönergeleridir. Genellikle şunları kapsarlar:
Değişkenler ve işlevler için adlandırma ve bildirim kuralları.
Beyaz boşluk, girinti ve yorum kullanımına ilişkin kurallar.
Programlama uygulamaları ve ilkeleri.
Kodlama kuralları kaliteyi güvence altına alır:
Kod okunabilirliğini iyileştirin
Kod bakımını kolaylaştırın
Kodlama kuralları, ekiplerin uyması gereken belgelenmiş kurallar olabilir veya yalnızca bireysel kodlama uygulamanız olabilir.
Bu sayfada W3Schools tarafından kullanılan genel JavaScript kod kuralları açıklanmaktadır.
Ayrıca bir sonraki bölüm olan "En İyi Uygulamalar"ı da okumalı ve kodlama tuzaklarından nasıl kaçınacağınızı öğrenmelisiniz.
W3schools'ta tanımlayıcı adlar (değişkenler ve işlevler) için camelCase'i kullanırız.
Tüm adlar bir harf ile başlar.
Bu sayfanın alt kısmında adlandırmayla ilgili daha geniş bir tartışma bulacaksınız tüzük.
firstName = "John";
lastName = "Doe";
price = 19.90;
tax = 0.20;
fullPrice = price + (price * tax);Her zaman operatörlerin (=+ - */) etrafına ve virgüllerden sonra boşluk koyun:
let x = y + z;
const myArray = ["Volvo", "Saab",
"Fiat"];Kod bloklarının girintisi için her zaman 2 boşluk kullanın:
function toCelsius(fahrenheit) {
return (5 / 9) * (fahrenheit - 32);
}Girinti için sekmeleri (tablolayıcıları) kullanmayın. Farklı düzenleyiciler sekmeleri farklı şekilde yorumlar.
Basit ifadeler için genel kurallar:
Basit bir ifadeyi her zaman noktalı virgülle bitirin.
const cars = ["Volvo", "Saab",
"Fiat"];
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor:
"blue"
};Karmaşık (bileşik) ifadeler için genel kurallar:
Açılış braketini ilk satırın sonuna yerleştirin.
Açılış braketinden önce bir boşluk kullanın.
Kapanış braketini boşluk bırakmadan yeni bir satıra yerleştirin.
Karmaşık bir ifadeyi noktalı virgülle sonlandırmayın.
function toCelsius(fahrenheit) {
return (5 / 9) * (fahrenheit - 32);
}for (let i = 0; i < 5; i++) {
x += i;
}if (time < 20) {
greeting = "Good day";
} else {
greeting = "Good evening";
}Nesne tanımlarına ilişkin genel kurallar:
Açılış parantezini nesne adıyla aynı satıra yerleştirin.
Her özellik ve değeri arasında iki nokta artı bir boşluk kullanın.
Sayısal değerlerin etrafında değil, dize değerlerinin etrafında tırnak işaretleri kullanın.
Son özellik-değer çiftinden sonra virgül eklemeyin.
Kapatma braketini yeni bir satıra, önde gelen alanlar.
Bir nesne tanımını her zaman noktalı virgülle sonlandırın.
Kısa nesneler yalnızca boşluklar kullanılarak tek satırda sıkıştırılmış olarak yazılabilir özellikler arasında şöyle:
Okunabilirlik açısından 80'den uzun satırlardan kaçının karakterler.
Bir JavaScript ifadesi tek bir satıra sığmıyorsa bölünecek en iyi yer bir operatörden veya virgülden sonra gelir.
document.getElementById("demo").innerHTML =
"Hello Dolly.";Kendiniz Deneyin →
<!DOCTYPE html>
<html>
<body>
<h2>My Web Page</h2>
<p>The best place to break a code line is after an operator or a comma.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Hello Dolly.";
</script>
</body>
</html>
Tüm kodunuz için daima aynı adlandırma kuralını kullanın. Örneğin:
camelCase olarak yazılan değişken ve işlev adları
BÜYÜK HARF ile yazılan global değişkenler (Biz yapmıyoruz ama öyle oldukça yaygın)
BÜYÜK HARF ile yazılan sabitler (PI gibi)
Kısa çizgi, camelCase veya kullanmanız gerekir mi? Değişken adlarında düşük puanlar mı var?
Bu, programcıların sıklıkla tartıştığı bir sorudur. Cevap kim olduğuna bağlı sormak:
HTML ve CSS'deki kısa çizgiler:
HTML5 nitelikleri data- (veri-miktarı, veri-fiyatı) ile başlayabilir.
CSS, özellik adlarında (yazı tipi boyutu) kısa çizgiler kullanır.
Kısa çizgiler çıkarma denemeleriyle karıştırılabilir. JavaScript adlarında tirelere izin verilmez.
Alt çizgi:
Birçok programcı özellikle SQL'de alt çizgi (doğum_tarihi) kullanmayı tercih eder veritabanları.
Alt çizgi genellikle PHP belgelerinde kullanılır.
PascalCase:
PascalCase C programcıları tarafından sıklıkla tercih edilmektedir.
camelCase:
camelCase, JavaScript'in kendisi, jQuery ve diğer JavaScript tarafından kullanılır kütüphaneler.
İsimlere $işaretiyle başlamayın. Sizi birçok JavaScript kitaplığı adıyla çatışmaya sokacaktır.
Harici komut dosyalarını yüklemek için basit sözdizimi kullanın (type özelliği gerekli):
<script src="myscript.js"></script>"Düzensiz" HTML stilleri kullanmanın bir sonucu, JavaScript hatalarına neden olabilir.
Bu iki JavaScript ifadesi farklı sonuçlar üretecektir:
const obj = getElementById("Demo")
const obj = getElementById("demo")Mümkünse HTML'de aynı adlandırma kuralını (JavaScript ile) kullanın.
HTML Stil Kılavuzunu ziyaret edin.
HTML dosyalarının .html uzantısı olmalıdır (.htm'ye izin verilir). <p>CSS dosyaları .css uzantısına sahip olmalıdır.
JavaScript dosyaları .js uzantısına sahip olmalıdır.
Çoğu web sunucusu (Apache, Unix) dosya adlarında büyük/küçük harfe duyarlıdır:
london.jpg'ye London.jpg olarak erişilemez.
Diğer web sunucuları (Microsoft, IIS) büyük/küçük harfe duyarlı değildir:
london.jpg'ye London.jpg veya london.jpg olarak erişilebilir.
Büyük ve küçük harflerin bir karışımını kullanırsanız, son derece dikkatli olmanız gerekir. tutarlı.
Küçük bile olsa, büyük/küçük harfe duyarlı olmayan bir sunucudan büyük/küçük harfe duyarlı bir sunucuya geçerseniz hatalar web sitenizi bozabilir.
Bu sorunları önlemek için her zaman küçük harfli dosya adları kullanın (mümkünse).
Kodlama kuralları bilgisayarlar tarafından kullanılmaz. Çoğu kural var programların yürütülmesi üzerinde çok az etki.
Küçük komut dosyalarında girinti ve fazladan boşluklar önemli değildir.
Geliştirme aşamasındaki kod için okunabilirlik tercih edilmelidir. Daha büyük üretim komut dosyaları en aza indirilmelidir.