En son web geliştirme öğreticiler
 

JavaScript Stil Kılavuzu ve Kodlama Kuralları


Her zaman tüm JavaScript projeleri için aynı kodlama kurallarını kullanabilirsiniz.


JavaScript Kodlama Kuralları

Kodlama kuralları programlama için stil kurallar vardır. Bunlar genellikle kapsamaktadır:

  • değişkenler ve fonksiyonlar için adlandırma ve beyan kuralları.
  • beyaz boşluk, girinti ve yorumların kullanımı için kurallar.
  • uygulamaları ve ilkeleri Programlama

Kodlama kuralları güvenli kalite:

  • Kod okunabilirliği artırır
  • Kod bakım kolaylaştırın

Takımlar izleyin ya da sadece bireysel kodlama uygulaması olabilmesi için Kodlama kuralları kuralları belgelenebilir.

Bu sayfa w3ii tarafından kullanılan genel JavaScript kodu kuralları da açıklar.
Ayrıca bir sonraki bölümde okumalı "Best Practices" ve tuzaklardan kodlama önlemek için öğrenirler.


Değişken Adları

W3ii anda tanımlayıcı isimleri için camelCase kullanmak (variables and functions) .

Bütün isimler bir harfle başlamalıdır.

Bu sayfanın alt kısmında, kuralları adlandırma 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örleri Around the Spaces

Her operatör çevresinde boşluk koymak ( = + - * / ) ve virgül sonra muayene:

Örnekler:

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

Kod Girinti

Her kod blokları girinti için 4 boşluk kullanımı:

Fonksiyonlar:

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

Sekmeleri kullanmayın (tabulators) girinti için. Farklı editörler farklı sekmeleri yorumlamak.


bildirimi Kurallar

Basit tablolar için genel kurallar:

  • Her zaman bir noktalı virgül ile basit deyimi sonunda.

Örnekler:

var values = ["Volvo", "Saab", "Fiat"];

var person = {
    firstName: "John",
    lastName: "Doe",
    age: 50,
    eyeColor: "blue"
};

Karmaşık için genel kurallar (compound) ifadeleri:

  • İlk satırın sonunda parantezi koyun.
  • Açılış parantezi önce bir boşluk kullanın.
  • lider boşluksuz, yeni bir satıra kapanış ayracı koyun.
  • noktalı virgül ile karmaşık bir açıklama bitirmeyin.

Fonksiyonlar:

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

döngüler:

for (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:

  • nesne adı ile aynı hat üzerinde parantezi yerleştirin.
  • kolon artı her özellik ve değeri arasında bir boşluk kullanın.
  • değil sayısal değerler etrafında, dize değerlerini tırnak içine alın.
  • Son özellik değer çiftinin sonra virgül eklemeyin.
  • önde gelen boşluksuz, yeni bir satırda kapama desteğini yerleştirin.
  • Her bir noktalı virgül ile bir nesne tanımını sona erer.

Örnek

var person = {
    firstName: "John" ,
    lastName: "Doe" ,
    age: 50,
    eyeColor: "blue"
};

Kısa nesneler böyle sırasıyla sadece özellikler arasında boşluk kullanılarak, tek bir hat üzerinde, sıkıştırılmış yazılabilir:

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

Hat Uzunluğu <80

okunabilirliği için, 80 karakterden uzun satırları önlemek.

bir JavaScript ifadesi bir satırda uymuyorsa, iyi yer kırmak, bir operatör veya virgül sonradır.

Örnek

document.getElementById("demo").innerHTML =
    "Hello Dolly.";
Kendin dene "

adlandırma kuralları

Her zaman tüm kodu için aynı adlandırma kuralı kullanın. Örneğin:

  • Değişken ve fonksiyon adları CamelCase olarak yazılır
  • Büyük yazılır Küresel değişkenler (Bilmiyoruz, ama oldukça yaygındır)
  • Sabitler (like PI) büyük yazılır

Eğer değişken adlarında hyp-tavuklar, camelCase veya under_scores kullanmalı mıyım?

Bu programcılar genellikle tartışmak bir sorudur. yanıtı kişiden kişiye göre değişir:

HTML ve CSS içinde tire:

HTML5 veriye ile başlayabilirsiniz nitelikleri (data-quantity, data-price) .

CSS mülkiyet adlarında tire kullanır (font-size) .

Tire çıkarma girişimi olarak karıştırılabilir. Tire JavaScript adlarında izin verilmez.

Underscores:

Birçok programcı çizgi kullanmayı tercih (date_of_birth) özellikle SQL veritabanlarında.

Altçizgilerin sıklıkla PHP belgelerinde kullanılmaktadır.

PascalCase:

PascalCase genellikle C programcıları tarafından tercih edilmektedir.

camelCase:

camelCase JavaScript kendisi jQuery tarafından ve diğer JavaScript kütüphaneleri tarafından kullanılır.

$ işareti ile isimleri başlamayın. Birçok JavaScript kitaplık adları ile çatışma halinde size koyacağız.


HTML JavaScript yükleniyor

(Harici komut yüklenmesi için basit bir sözdizimi kullanın type özellik gerekli değildir):

<script src="myscript.js">

HTML Elementleri Erişme

Kullanmanın bir sonucu "untidy" HTML stilleri, JavaScript hatalara neden olabilir.

Bu iki JavaScript ifadeleri farklı sonuçlar üretecektir:

var obj = getElementById("Demo")

var obj = getElementById("demo")

Mümkünse, aynı adlandırma kuralı kullanmak (as JavaScript) HTML.

HTML Stil Kılavuzu'na ziyaret .


Dosya Uzantıları

HTML dosyaları bir .html uzantılı olmalıdır (not .htm ) .

CSS dosyaları bir .css uzantılı olmalıdır.

JavaScript dosyaları bir .js uzantılı olmalıdır.


Küçük Harf Dosya Adları kullanın

Çoğu web sunucuları (Apache, Unix) dosya adları hakkında küçük harf duyarlıdır:

london.jpg olarak erişilemez London.jpg .

Diğer web sunucuları (Microsoft, IIS) küçük harfe duyarlı değildir:

london.jpg olarak erişilebilir London.jpg veya london.jpg .

Eğer büyük ve küçük harf karışımı kullanıyorsanız, son derece tutarlı olmalıdır.

Eğer bir harf duyarlı sunucuya duyarsız bir durumda, hareket halinde bile küçük hatalar web sitenizi kırabilir.

Bu sorunları önlemek için, her zaman küçük harf dosya adlarını kullanan (if possible) .


performans

Kodlama konvansiyonlar bilgisayarlar tarafından kullanılmaz. Çoğu kurallar programlarının yürütülmesi üzerinde çok az etkisi vardır.

Girinti ve fazladan boşluk küçük komut önemli değildir.

gelişiminde kodu için okunabilirliği tercih edilmelidir. Büyük üretim komut minified edilmelidir.