JavaScript-stilguide

Använd alltid samma kodkonventioner för alla dina JavaScript-projekt.

JavaScript-kodkonventioner

Kodkonventioner (Coding conventions) innebärStilriktlinjer för programmeringDessa principer inkluderar i huvudsak:

  • Regler för namngivning och deklaration av variabler och funktioner
  • Regler för användning av blanksteg, indrag och kommentarer
  • Programmeringsvanor och riktlinjer

KodkonventionerSäkerställ kvalitet:

  • Förbättra kodläsbarheten
  • Förbättra kodunderhållbarheten

Kodkonventioner kan vara skriftliga regler som ett team följer, eller dina personliga kodvanor.

Denna sida introducerar de allmänna JavaScript-kodkonventioner som används på CodeW3C.com.

Du bör fortsätta läsa nästa kapitel "Bästa praxis" för att lära dig hur du undviker kodfällor.

variabelnamn

på CodeW3C.com använder vi identifierare namn (variabler och funktioner) medhuvudbokstav och gemensamma.

alla namn börjar medbokstäverbörja.

på denna sida kommer vi att diskutera namngivningsregler mer utförligt.

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

uttryck runt operatorer

använd alltid blanksteg runt operatorer ( = + - * / ) och efter kommatecken:

exempel

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

koddragning

använd alltid 4 blanksteg för indragning av kodblock:

funktion

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

använd inte tabulatorer för indragning. Olika redigerare tolkar tabulatorer olika.

instruktionereregler

allmänna regler för enkla instruktioner:

använd alltid semikoloner för att avsluta enskilda instruktioner:

exempel

var values = ["Volvo", "Saab",  "Fiat"];
var person = {
    firstName: "Bill",
     lastName: "Gates",
    age: 50,
    eyeColor:  "blue"
};

allmänna regler för komplexa uttryck (compound):

  • skriv öppningsparentesen på slutet av första raden
  • använd ett blanksteg innan öppningsparentesen
  • skriv stängningsparentesen på en ny rad, utan ledande blanksteg
  • använd inte semikoloner för att avsluta komplexa uttryck

funktion:

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

loop:

for (i = 0; i < 5; i++) {
    x += i;
}

villkor:

if (time < 20) {
    greeting = "Good day";
} else {
     greeting = "Good evening";
}

objektregor

allmänna regler för objektdefinieringar:

  • placera öppningsparentesen och objektnamnet på samma rad
  • använd kolon följt av ett blanksteg mellan egenskap och värde
  • skriv inte en komma efter sista egenskapsvärdeparen
  • skriv stängningsparentesen på en ny rad, utan ledande blanksteg
  • använd alltid semikoloner för att avsluta objektdefinieringar

exempel

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

kan korta objekt komprimeras på en rad, endast använda blanksteg mellan egenskaper, som så här:

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

radlängd mindre än 80

För att förbättra läsbarheten, undvik att varje rad överstiger 80 tecken.

Om JavaScript-satsen överstiger en radlängd, är det bästa stället att bryta raden efter operatorn eller komma.

exempel

document.getElementById("demo").innerHTML =
    "Hello Kitty.";

prova själv

namngivningskonventioner

Använd alltid samma namngivningskonventioner för ditt kod. Till exempel:

  • variabler och funktioner namnges medhuvudbokstavsbokstavskombinationatt skriva
  • globala variabler användsstora bokstäver(vi gör inte detta, men det är ganska vanligt)
  • konstanter (t.ex. PI) användsstora bokstäver

ska vi använda i variabelnamnhyphensochhuvudbokstavsbokstavskombinationellerUnderstreckja?

Detta är ett problem som programmerare ofta diskuterar. Svaret beror på vem som svarar på frågan:

Hyphens i HTML och CSS:

HTML5-egenskaper kan börja med data- (data-quantity, data-price).

CSS använder hyphens i property-namn (font-size).

Hyphens kan misstolkas som minuskelsemnale. JavaScript-namngivning tillåter inte användning av hyphens.

Understreck:

Många programmerare gillar att använda understreck (date_of_birth), särskilt i SQL-databaser.

Understreck används ofta i PHP-referenser.

Pascal-namngivning (PascalCase):

C-programmerare använder ofta Pascal-namngivning.

Huvudbokstavsbokstavskombination (camelCase):

JavaScript själv, jQuery och andra JavaScript-bibliotek använder huvudbokstavsbokstavskombination (camelCase).

JavaScript-namngivning bör inte börja med $-tecknet. Detta kan orsaka namnkonflikter för JavaScript-objekt.

Ladda JavaScript i HTML

Använd enkel syntax för att ladda externa skript (type-egenskapen är inte nödvändig):

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

Åtkomst till HTML-element

Konsekvenserna av "stökig" HTML-stil kan vara att orsaka JavaScript-fel.

Dessa två JavaScript-satser genererar olika resultat:

var obj = getElementById("Demo")
var obj = getElementById("demo")

Om möjligt, använd samma namngivningskonventioner i HTML (liksom i JavaScript).

Besök HTML-stils-guide.

filändelser

HTML-filer bör använda .html Tillägg (inte .htm)

CSS-filer bör använda .css Tillägg

JavaScript-filer bör använda .js Tillägg

Använd små filnamn

De flesta webbserverar (Apache, Unix) är känsliga för filnamnsstorlek och småskrivning:

london.jpg kan inte ses som London.jpg för åtkomst.

Andra webbserverar (Microsofts IIS) är inte känsliga för storlek och småskrivning:

london.jpg kan nås som London.jpg eller london.jpg.

Om du blandar användning av storlek och småskrivning måste du hålla sig strikt konsekvent och enhetlig.

Om du flyttar din webbplats från en server som inte är känslig för storlek och småskrivning till en som är känslig, kan även små fel förstöra din webbplats.

För att undvika dessa problem bör alltid små filnamn användas (om möjligt).

Prestanda

Datorer använder inte kodkonventioner. De flesta regler har ett mycket litet inflytande på programkörningen.

Indentering och extra blanksteg är inte viktigt för korta skript.

För skript under utveckling bör läsbarhet prioriteras. Större produktionskoder bör förenklas.