JavaScript-stijlgids

Gebruik altijd dezelfde codeovereenkomsten voor al je JavaScript-projecten.

JavaScript-codeovereenkomsten

Codeovereenkomsten (Coding conventions) verwijzen naarStijlgidsen voor programmerenDeze principes omvatten in grote lijnen:

  • Naamgeving en declaratie van variabelen en functies
  • Regels voor het gebruik van spaties, inspringingen en commentaren
  • Programmeerhabituwen en richtlijnen

CodeovereenkomstenZorg voor kwaliteit:

  • Verbeter de leesbaarheid van de code
  • Verbeter de onderhoudbaarheid van de code

Codeovereenkomsten kunnen zowel schriftelijke regels zijn die door een team worden gevolgd, als je persoonlijke codinggewoonten.

Deze pagina introduceert de algemene JavaScript-codeovereenkomsten die worden gebruikt op CodeW3C.com.

U moet doorgaan met het lezen van het volgende hoofdstuk 'Beste Praktijken' om te leren hoe je codingsvalstrikken kunt vermijden.

Variabelen

Op CodeW3C.com gebruiken we CamelCase voor identifier-namen (variabelen en functies);CamelCase.

Alle namen beginnen metLettersBeginnend met een hoofdletter.

Aan het einde van deze pagina bespreken we uitgebreid de naamgevingseisen.

voorNaam = "Bill";
achterNaam = "Gates";
prijs = 19.90;
belasting = 0.20;
volledigePrijs = prijs + (prijs * belasting);

Spaties omheen van de operator

Gebruik altijd een spatie omheen van de operator ( = + - * / ) en na de komma;

Voorbeeld

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

Code-inspringing

Gebruik altijd 4 spaties voor inspringing van codeblokken:

Functie

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

Gebruik geen tabtoetsen voor inspringing. Verschillende editors interpreteren tabs verschillend;

Zinregels

Algemene regels voor eenvoudige zinnen:

Altijd eindig een enkelvoudige zin met een puntkomma:

Voorbeeld

var waarden = ["Volvo", "Saab",  "Fiat"];
var persoon = {
    voorNaam: "Bill",
     achterNaam: "Gates",
    leeftijd: 50,
    oogKleur:  "blauw"
};

Algemene regels voor complexe zinnen (compound):

  • Schrijf de openingsspaak op het einde van de eerste regel;
  • Gebruik een spatie voor de openingsspaak;
  • Schrijf de afsluitende rechte haken op een nieuwe regel, zonder leidende spaties;
  • Gebruik geen puntkomma om complexe zinnen te eindigen;

Functie:

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

Herhaling:

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

Voorwaarde:

if (tijd < 20) {
    groet = "Good day";
} else {
     groet = "Good evening";
}

Objectregels

Algemene regels voor objectdefinities:

  • Plaats de openingsspaak en de objectnaam op dezelfde regel;
  • Gebruik een dubbele punt en een spatie tussen elke eigenschap en zijn waarde;
  • Schrijf geen komma achter het laatste eigenschapswaardepaar;
  • Schrijf de afsluitende rechte haken op een nieuwe regel, zonder leidende spaties;
  • Altijd eindig een objectdefinitie met een puntkomma;

Voorbeeld

var persoon = {
    voorNaam: "Bill",
    achterNaam: "Gates",
    leeftijd: 19,
    oogKleur:  "blauw"
};

Kan een kort object op een regel worden samengeperst, alleen tussen de eigenschappen gebruik je spaties, zoals hieronder:

var persoon = {voorNaam:"Bill", achterNaam:"Gates", leeftijd:50, oogKleur:"blauw"};

Regel lengte minder dan 80

Om de leesbaarheid te verbeteren, vermijd dat elke regel langer is dan 80 tekens.

Als een JavaScript-staat meer dan één regel lang is, is de beste plek om te wrappen na een operator of komma.

Voorbeeld

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

Probeer het zelf uit

Naamconventie

Gebruik altijd dezelfde naamconventie voor al uw code. Bijvoorbeeld:

  • Variabelen en functienamen schrijven metkameleonschrijvingom te schrijven
  • Globale variabelen gebruikenHoofdletters(We doen dit niet, maar het is vrij algemeen)
  • Kостанти (bijvoorbeeld PI) gebruikenHoofdletters

Moeten we dit gebruiken in variabelennamen?koppeltekenenkameleonschrijvingofOnderstrepenja?

Dit is een vaak besproken vraag onder programmeurs. Het antwoord hangt af van wie deze vraag beantwoordt:

Koppeltekens in HTML en CSS:

HTML5-eigenschappen kunnen beginnen met data- (data-quantity, data-price).

CSS gebruikt koppeltekens in property-namen (font-size).

Koppeltekens kunnen ten onrechte worden gezien als reductietekens. JavaScript-namen mogen geen koppeltekens bevatten.

Onderstrepen:

Vele programmeurs gebruiken onderstrepen graag (date_of_birth), vooral in SQL-databases.

Onderstrepen wordt vaak gebruikt in PHP-documentatie.

Pascal-namen (PascalCase):

Programmeurs die C-schrijven gebruiken vaak Pascal-namen.

Kameleonschrijving (camelCase):

JavaScript zelf, jQuery en andere JavaScript-bibliotheken gebruiken kameleonschrijving.

JavaScript-namen mogen niet beginnen met het dollar-teken. Dit kan JavaScript-namenconflicten veroorzaken.

JavaScript laden in HTML

Gebruik een eenvoudige syntaxis om externe scripts te laden (het type-eigenschap is niet vereist):

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

Toegang tot HTML-elementen

De gevolgen van 'onnetiquet' HTML-stijl kunnen leiden tot JavaScript-fouten.

Deze twee JavaScript-staten produceren verschillende resultaten:

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

Indien mogelijk, gebruik in HTML dezelfde naamconventie (zoals JavaScript).

Toegang tot de HTML Stijlgids.

Bestandsextensie

HTML-bestanden moeten worden gebruikt .html Extensie (in plaats van .htm)

CSS-bestanden moeten worden gebruikt .css Extensie.

JavaScript-bestanden moeten worden gebruikt .js Extensie.

Gebruik kleine letter bestandsnamen

De meeste web servers (Apache, Unix) zijn case-sensitive voor bestandsnamen:

london.jpg kan niet als London.jpg worden bereikt.

Andere web servers (Microsoft IIS) zijn niet case-sensitive:

london.jpg kan worden bereikt via London.jpg of london.jpg.

Als je zowel hoofdletters als kleine letters mengt, moet je strikt consistent blijven.

Als je de site verhuist van een server die niet case-sensitive is naar een server die case-sensitive is, kunnen deze kleine fouten je site kunnen beschadigen.

Om deze problemen te voorkomen, gebruik dan altijd kleine letter bestandsnamen (indien mogelijk).

Prestaties

Computers gebruiken geen codeconventies. De meeste regels hebben een klein effect op de uitvoering van het programma.

Inkepingen en extra spaties zijn voor korte scripts niet belangrijk.

Voor scripts in ontwikkeling moet de leesbaarheid prioriteit hebben. Grotere productiescripts moeten worden verkleind.