Brug altid de samme kodningskonventioner til al din JavaScript projekter.
Kodningskonventioner er stilretningslinjer for programmering. De dækker typisk:
Navngivnings- og deklarationsregler for variabler og funktioner.
Regler for brug af mellemrum, indrykning og kommentarer.
Programmeringspraksis og -principper.
Kodningskonventioner sikker kvalitet:
Forbedre kodelæsbarhed
Gør kodevedligeholdelse lettere
Kodningskonventioner kan være dokumenterede regler, som teams skal følge, eller bare være din individuelle kodningspraksis.
Denne side beskriver de generelle JavaScript-kodekonventioner, der bruges af W3Schools.
Du bør også læse næste kapitel "Bedste praksis" og lære, hvordan du undgår kodningsfælder.
På W3schools bruger vi camelCase til identifikationsnavne (variabler og funktioner).
Alle navne starter med et bogstav.
Nederst på denne side finder du en bredere diskussion om navngivning regler.
firstName = "John";
lastName = "Doe";
price = 19.90;
tax = 0.20;
fullPrice = price + (price * tax);Sæt altid mellemrum omkring operatorer (=+ - */), og efter kommaer:
let x = y + z;
const myArray = ["Volvo", "Saab",
"Fiat"];Brug altid 2 mellemrum til indrykning af kodeblokke:
function toCelsius(fahrenheit) {
return (5 / 9) * (fahrenheit - 32);
}Brug ikke faner (tabulatorer) til fordybning. Forskellige redaktører fortolker faner forskelligt.
Generelle regler for simple udsagn:
Afslut altid et simpelt udsagn med et semikolon.
const cars = ["Volvo", "Saab",
"Fiat"];
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor:
"blue"
};Generelle regler for komplekse (sammensatte) udsagn:
Sæt åbningsbeslaget for enden af den første linje.
Brug et mellemrum før åbningsbeslaget.
Sæt lukkebeslaget på en ny linje, uden mellemrum.
Afslut ikke et komplekst udsagn med et semikolon.
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";
}Generelle regler for objektdefinitioner:
Placer åbningsbeslaget på samme linje som objektnavnet.
Brug kolon plus et mellemrum mellem hver egenskab og dens værdi.
Brug anførselstegn omkring strengværdier, ikke omkring numeriske værdier.
Tilføj ikke et komma efter det sidste egenskab-værdi-par.
Placer lukkebeslaget på en ny linje, uden førende rum.
Afslut altid en objektdefinition med et semikolon.
Korte objekter kan skrives komprimeret på én linje med kun mellemrum mellem egenskaber, som denne:
Af hensyn til læsbarheden skal du undgå linjer længere end 80 tegn.
Hvis en JavaScript-erklæring ikke passer på én linje, er det bedste sted at bryde det er efter en operator eller et komma.
document.getElementById("demo").innerHTML =
"Hello Dolly.";Prøv det selv →
<!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>
Brug altid den samme navngivningskonvention for al din kode. For eksempel:
Variabel- og funktionsnavne skrevet som camelCase
Globale variable skrevet med STORE BOKSTAVER (Det gør vi ikke, men det er det ganske almindeligt)
Konstanter (som PI) skrevet med STORE BOKSTAVER
Skal du bruge hyp-hens, camelCase eller under_score i variabelnavne?
Dette er et spørgsmål, programmører ofte diskuterer. Svaret afhænger af, hvem du Spørg:
Beststreger i HTML og CSS:
HTML5-attributter kan starte med data- (data-mængde, data-pris).
CSS bruger bindestreger i egenskabsnavne (font-size).
Bindestreger kan forveksles som subtraktionsforsøg. Bindestreger er ikke tilladt i JavaScript-navne.
Understregninger:
Mange programmører foretrækker at bruge understregninger (dato_of_birth), især i SQL databaser.
Understregninger bruges ofte i PHP-dokumentation.
PascalCase:
PascalCase foretrækkes ofte af C-programmører.
camelCase:
camelCase bruges af JavaScript selv, af jQuery og andet JavaScript biblioteker.
Start ikke navne med et $-tegn. Det vil sætte dig i konflikt med mange JavaScript-biblioteksnavne.
Brug simpel syntaks til at indlæse eksterne scripts (type-attributten er ikke nødvendig):
<script src="myscript.js"></script>En konsekvens af at bruge "ryddelige" HTML-stile kan resultere i JavaScript-fejl.
Disse to JavaScript-udsagn vil give forskellige resultater:
const obj = getElementById("Demo")
const obj = getElementById("demo")Hvis det er muligt, så brug den samme navngivningskonvention (som JavaScript) i HTML.
Besøg HTML Style Guide.
HTML-filer skal have filtypenavnet .html (.htm er tilladt). <p>CSS-filer skal have filtypenavnet .css.
JavaScript-filer skal have filtypenavnet .js.
De fleste webservere (Apache, Unix) skelner mellem store og små bogstaver i filnavne:
london.jpg kan ikke tilgås som London.jpg.
Andre webservere (Microsoft, IIS) skelner ikke mellem store og små bogstaver:
london.jpg kan tilgås som London.jpg eller london.jpg.
Hvis du bruger en blanding af store og små bogstaver, skal du være ekstrem konsekvent.
Hvis du flytter fra en case-ufølsom server, til en case-sensitiv server, selv lille fejl kan ødelægge dit websted.
For at undgå disse problemer skal du altid bruge små bogstaver filnavne (hvis det er muligt).
Kodningskonventioner bruges ikke af computere. De fleste regler har ringe indflydelse på afviklingen af programmer.
Indrykning og ekstra mellemrum er ikke væsentlige i små scripts.
For kode under udvikling bør læsbarhed foretrækkes. Større produktion scripts skal minimeres.