JavaScript Stil Kılavuzu
Tüm JavaScript projeleriniz için her zaman aynı kodlama kurallarını kullanın.
JavaScript Kodlama Kuralları
Kodlama kuralları, programlama için stil yönergeleridir . Genellikle şunları kapsar:
- Değişkenler ve işlevler için adlandırma ve bildirim kuralları.
- Boşluk, girinti ve yorumların kullanımına ilişkin kurallar.
- Programlama uygulamaları ve ilkeleri
Kodlama kuralları kaliteyi güvence altına alır :
- Kod okunabilirliğini iyileştirir
- Kod bakımını kolaylaştırın
Kodlama kuralları, ekiplerin uyması için belgelenmiş kurallar olabilir veya yalnızca sizin bireysel kodlama uygulamanız olabilir.
Bu sayfa, W3Schools tarafından kullanılan genel JavaScript kodu kurallarını açıklar.
Ayrıca bir sonraki "En İyi Uygulamalar" bölümünü okumalı ve kodlama tuzaklarından nasıl kaçınacağınızı öğrenmelisiniz.
Değişken Adları
W3schools'da tanımlayıcı adları (değişkenler ve işlevler) için camelCase kullanıyoruz.
Tüm isimler bir harfle başlar .
Bu sayfanın altında, adlandırma kuralları hakkında daha geniş bir tartışma bulacaksınız.
firstName = "John";
lastName = "Doe";
price = 19.90;
tax = 0.20;
fullPrice = price + (price * tax);
Operatörlerin Çevresindeki Boşluklar
Her zaman operatörlerin ( = + - * / ) etrafına ve virgüllerden sonra boşluk koyun:
Örnekler:
let x = y + z;
const myArray = ["Volvo", "Saab",
"Fiat"];
Kod Girintisi
Kod bloklarının girintisi için her zaman 2 boşluk kullanın:
Fonksiyonlar:
function toCelsius(fahrenheit) {
return (5 / 9) * (fahrenheit - 32);
}
Girinti için sekmeler (tablolar) kullanmayın. Farklı düzenleyiciler sekmeleri farklı yorumlar.
Bildirim Kuralları
Basit ifadeler için genel kurallar:
- Basit bir ifadeyi her zaman noktalı virgülle bitirin.
Örnekler:
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 koyun.
- Açılış braketinden önce bir boşluk kullanın.
- Kapanış parantezini, başında boşluk bırakmadan yeni bir satıra yerleştirin.
- Karmaşık bir ifadeyi noktalı virgülle sonlandırmayın.
Fonksiyonlar:
function toCelsius(fahrenheit) {
return (5 / 9) * (fahrenheit - 32);
}
döngüler:
for (let i = 0; i < 5; i++) {
x += i;
}
Şartlılar:
if (time < 20) {
greeting = "Good day";
} else {
greeting = "Good evening";
}
Nesne Kuralları
Nesne tanımları için genel kurallar:
- Açma parantezini nesne adıyla aynı satıra yerleştirin.
- Her özellik ile değeri arasında iki nokta üst üste 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, başında boşluk bırakmadan yeni bir satıra yerleştirin.
- Bir nesne tanımını her zaman noktalı virgülle sonlandırın.
Örnek
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor:
"blue"
};
Kısa nesneler, aşağıdaki gibi yalnızca özellikler arasındaki boşluklar kullanılarak tek satırda sıkıştırılmış olarak yazılabilir:
const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
Hat Uzunluğu < 80
Okunabilirlik için 80 karakterden uzun satırlardan kaçının.
Bir JavaScript ifadesi bir satıra sığmıyorsa, onu kırmak için en iyi yer bir işleç veya virgülden sonradır.
Örnek
document.getElementById("demo").innerHTML =
"Hello Dolly.";
Adlandırma Kuralları
Tüm kodunuz için her zaman aynı adlandırma kuralını kullanın. Örneğin:
- camelCase olarak yazılan değişken ve fonksiyon isimleri
- BÜYÜK HARF ile yazılmış global değişkenler (Yapmıyoruz, ancak oldukça yaygın)
- BÜYÜK HARF ile yazılmış sabitler (PI gibi)
Değişken adlarında kısa çizgi , camelCase veya under_scores kullanmalı mısınız?
Bu, programcıların sıklıkla tartıştığı bir sorudur. Cevap, kime sorduğunuza bağlıdır:
HTML ve CSS'de tireler:
HTML5 özellikleri data- (veri-miktar, veri-fiyat) ile başlayabilir.
CSS, özellik adlarında (yazı tipi boyutu) kısa çizgiler kullanır.
Tireler, çıkarma girişimleriyle karıştırılabilir. JavaScript adlarında tirelere izin verilmez.
Alt çizgi:
Birçok programcı, özellikle SQL veritabanlarında alt çizgi (date_of_birth) kullanmayı tercih eder.
Alt çizgiler genellikle PHP belgelerinde kullanılır.
Pascal Davası:
PascalCase genellikle C programcıları tarafından tercih edilir.
deve Kasası:
camelCase JavaScript'in kendisi, jQuery ve diğer JavaScript kitaplıkları tarafından kullanılır.
İsimlere $ işareti ile başlamayın. Sizi birçok JavaScript kitaplığı adıyla çatışmaya sokacaktır.
JavaScript'i HTML'ye yükleme
Harici komut dosyalarını yüklemek için basit sözdizimi kullanın (type niteliği gerekli değildir):
<script src="myscript.js"></script>
HTML Öğelerine Erişim
"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 olarak) kullanın.
HTML Stil Kılavuzunu ziyaret edin .
Dosya uzantıları
HTML dosyaları .html uzantısına sahip olmalıdır ( .htm'ye izin verilir).
CSS dosyalarının bir .css uzantısı olmalıdır.
JavaScript dosyaları bir .js uzantısına sahip olmalıdır.
Küçük Harf Dosya Adlarını Kullan
Çoğu web sunucusu (Apache, Unix) dosya adları konusunda büyük/küçük harf duyarlıdır:
london.jpg, London.jpg olarak erişilemez.
Diğer web sunucuları (Microsoft, IIS) büyük/küçük harfe duyarlı değildir:
london.jpg, London.jpg veya london.jpg olarak erişilebilir.
Büyük ve küçük harf karışımı kullanıyorsanız, son derece tutarlı olmalısınız.
Büyük/küçük harfe duyarlı olmayan bir sunucudan büyük/küçük harfe duyarlı bir sunucuya geçerseniz, küçük hatalar bile web sitenizi bozabilir.
Bu sorunları önlemek için her zaman küçük harfli dosya adları kullanın (mümkünse).
Verim
Kodlama kuralları bilgisayarlar tarafından kullanılmaz. Çoğu kuralın programların yürütülmesi üzerinde çok az etkisi vardır.
Küçük komut dosyalarında girinti ve fazladan boşluklar önemli değildir.
Geliştirme aşamasındaki kodlar için okunabilirlik tercih edilmelidir. Daha büyük üretim komut dosyaları küçültülmelidir.