Använd alltid samma kodningskonventioner för all din JavaScript projekt.
Kodkonventioner är stilriktlinjer för programmering. De täcker vanligtvis:
Namn- och deklarationsregler för variabler och funktioner.
Regler för användning av blanksteg, indrag och kommentarer.
Programmeringsmetoder och principer.
Kodningskonventioner säker kvalitet:
Förbättra kodläsbarheten
Gör kodunderhållet enklare
Kodkonventioner kan vara dokumenterade regler för team att följa, eller bara vara din individuella kodningsövning.
Den här sidan beskriver de allmänna JavaScript-kodkonventionerna som används av W3Schools.
Du bör också läsa nästa kapitel "Bästa praxis" och lära dig hur du undviker kodningsfällor.
På W3schools använder vi camelCase för identifierarnamn (variabler och funktioner).
Alla namn börjar med en bokstav.
Längst ner på denna sida hittar du en bredare diskussion om namngivning regler.
firstName = "John";
lastName = "Doe";
price = 19.90;
tax = 0.20;
fullPrice = price + (price * tax);
Sätt alltid mellanslag runt operatorer (=+ - */) och efter kommatecken:
let x = y + z;
const myArray = ["Volvo", "Saab",
"Fiat"];
Använd alltid 2 mellanslag för indrag av kodblock:
function toCelsius(fahrenheit) {
return (5 / 9) * (fahrenheit - 32);
}
Använd inte flikar (tabulatorer) för indragning. Olika redaktörer tolkar flikar olika.
Allmänna regler för enkla påståenden:
Avsluta alltid ett enkelt påstående med semikolon.
const cars = ["Volvo", "Saab",
"Fiat"];
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor:
"blue"
};
Allmänna regler för komplexa (sammansatta) påståenden:
Sätt öppningsfästet i slutet av den första raden.
Använd ett utrymme före öppningsfästet.
Sätt stängningsfästet på en ny linje, utan inledande mellanslag.
Avsluta inte ett komplext påstående med 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";
}
Allmänna regler för objektdefinitioner:
Placera öppningsparentesen på samma rad som objektets namn.
Använd kolon plus ett mellanslag mellan varje egenskap och dess värde.
Använd citattecken runt strängvärden, inte runt numeriska värden.
Lägg inte till ett kommatecken efter det sista egenskapsvärdeparet.
Placera stängningsfästet på en ny linje, utan ledande utrymmen.
Avsluta alltid en objektdefinition med semikolon.
Korta objekt kan skrivas komprimerade på en rad, endast med blanksteg mellan egenskaper, så här:
För läsbarheten bör du undvika rader längre än 80 tecken.
Om ett JavaScript-uttryck inte får plats på en rad är det bästa stället att bryta det är efter en operator eller ett kommatecken.
document.getElementById("demo").innerHTML =
"Hello Dolly.";
Prova själv →
<!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>
Använd alltid samma namnkonvention för all din kod. Till exempel:
Variabel- och funktionsnamn skrivna som camelCase
Globala variabler skrivna med VERSORER (Det gör vi inte, men det är det ganska vanligt)
Konstanter (som PI) skrivna med VERSORER
Ska du använda hyp-hens, camelCase eller under_scores i variabelnamn?
Detta är en fråga som programmerare ofta diskuterar. Svaret beror på vem du fråga:
Beststreck i HTML och CSS:
HTML5-attribut kan börja med data- (data-kvantitet, data-pris).
CSS använder bindestreck i egenskapsnamn (font-size).
Bindestreck kan misstas som subtraktionsförsök. Bindestreck är inte tillåtna i JavaScript-namn.
Understreck:
Många programmerare föredrar att använda understreck (datum_of_birth), särskilt i SQL databaser.
Understreck används ofta i PHP-dokumentation.
PascalCase:
PascalCase föredras ofta av C-programmerare.
camelCase:
camelCase används av JavaScript själv, av jQuery och annan JavaScript bibliotek.
Börja inte namn med ett $-tecken. Det kommer att sätta dig i konflikt med många JavaScript-biblioteksnamn.
Använd enkel syntax för att ladda externa skript (typattributet är det inte nödvändig):
<script src="myscript.js"></script>
En konsekvens av att använda "stökiga" HTML-stilar kan resultera i JavaScript-fel.
Dessa två JavaScript-satser ger olika resultat:
const obj = getElementById("Demo")
const obj = getElementById("demo")
Om möjligt, använd samma namnkonvention (som JavaScript) i HTML.
Besök HTML Style Guide.
HTML-filer bör ha tillägget .html (.htm är tillåtet). <p>CSS-filer bör ha filtillägget .css.
JavaScript-filer bör ha filtillägget .js.
De flesta webbservrar (Apache, Unix) är skiftlägeskänsliga för filnamn:
london.jpg kan inte nås som London.jpg.
Andra webbservrar (Microsoft, IIS) är inte skiftlägeskänsliga:
london.jpg kan nås som London.jpg eller london.jpg.
Om du använder en blandning av versaler och gemener måste du vara extremt konsekvent.
Om du går från en skiftlägeskänslig server till en skiftlägeskänslig server, även liten fel kan skada din webbplats.
För att undvika dessa problem, använd alltid filnamn med små bokstäver (om möjligt).
Kodningskonventioner används inte av datorer. De flesta regler har liten inverkan på genomförandet av program.
Indrag och extra mellanslag är inte signifikanta i små skript.
För kod under utveckling bör läsbarhet föredras. Större produktion skript bör minimeras.