JavaScript stilguide


Innehållsförteckning

    Visa innehållsförteckning


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.


Variabelnamn

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);

Utrymmen runt operatörer

Sätt alltid mellanslag runt operatorer (=+ - */) och efter kommatecken:

Exempel:

let x = y + z;
const myArray = ["Volvo", "Saab", 
 "Fiat"];


Kod indrag

Använd alltid 2 mellanslag för indrag av kodblock:

Funktioner:

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

Använd inte flikar (tabulatorer) för indragning. Olika redaktörer tolkar flikar olika.


Regler för uttalande

Allmänna regler för enkla påståenden:

  • Avsluta alltid ett enkelt påstående med semikolon.

Exempel:

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.

Funktioner:

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

Slingor:

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

Villkor:

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

Objektregler

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.

Exempel

Korta objekt kan skrivas komprimerade på en rad, endast med blanksteg mellan egenskaper, så här:


Linjelängd < 80

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.

Exempel

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>

Namnkonventioner

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.


Laddar JavaScript i HTML

Använd enkel syntax för att ladda externa skript (typattributet är det inte nödvändig):

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

Åtkomst till HTML-element

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.


Filtillägg

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.


Använd filnamn med gemener

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).


Prestanda

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.