JavaScript-stijlgids
Gebruik altijd dezelfde codeerconventies voor al uw JavaScript-projecten.
JavaScript-coderingsconventies
Codeerconventies zijn stijlrichtlijnen voor programmeren . Ze hebben meestal betrekking op:
- Naamgevings- en declaratieregels voor variabelen en functies.
- Regels voor het gebruik van witruimte, inspringing en opmerkingen.
- Programmeerpraktijken en -principes
Codeerconventies zorgen voor kwaliteit :
- Verbetert de leesbaarheid van de code
- Maak code-onderhoud eenvoudiger
Codeerconventies kunnen gedocumenteerde regels zijn die teams moeten volgen, of gewoon uw individuele codeerpraktijk zijn.
Deze pagina beschrijft de algemene JavaScript-codeconventies die door W3Schools worden gebruikt.
U moet ook het volgende hoofdstuk "Best Practices" lezen en leren hoe u valkuilen bij het coderen kunt vermijden.
Variabele namen
Bij W3schools gebruiken we camelCase voor identifier-namen (variabelen en functies).
Alle namen beginnen met een letter .
Onderaan deze pagina vindt u een bredere discussie over naamgevingsregels.
firstName = "John";
lastName = "Doe";
price = 19.90;
tax = 0.20;
fullPrice = price + (price * tax);
Ruimtes rond operators
Plaats altijd spaties rond operators ( = + - * / ), en na komma's:
Voorbeelden:
let x = y + z;
const myArray = ["Volvo", "Saab",
"Fiat"];
Code-inspringing
Gebruik altijd 2 spaties voor het inspringen van codeblokken:
Functies:
function toCelsius(fahrenheit) {
return (5 / 9) * (fahrenheit - 32);
}
Gebruik geen tabs (tabulatoren) voor inspringen. Verschillende editors interpreteren tabbladen anders.
Verklaring regels
Algemene regels voor eenvoudige uitspraken:
- Sluit een eenvoudige instructie altijd af met een puntkomma.
Voorbeelden:
const cars = ["Volvo", "Saab",
"Fiat"];
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor:
"blue"
};
Algemene regels voor complexe (samengestelde) uitspraken:
- Plaats de openingshaak aan het einde van de eerste regel.
- Gebruik één spatie voor de openingsbeugel.
- Zet het afsluitende haakje op een nieuwe regel, zonder voorloopspaties.
- Beëindig een complexe instructie niet met een puntkomma.
Functies:
function toCelsius(fahrenheit) {
return (5 / 9) * (fahrenheit - 32);
}
lussen:
for (let i = 0; i < 5; i++) {
x += i;
}
Voorwaarden:
if (time < 20) {
greeting = "Good day";
} else {
greeting = "Good evening";
}
Objectregels
Algemene regels voor objectdefinities:
- Plaats het openingshaakje op dezelfde regel als de objectnaam.
- Gebruik dubbele punt plus één spatie tussen elke eigenschap en de waarde ervan.
- Gebruik aanhalingstekens rond tekenreekswaarden, niet rond numerieke waarden.
- Voeg geen komma toe na het laatste eigenschap-waardepaar.
- Plaats het afsluitende haakje op een nieuwe regel, zonder voorloopspaties.
- Sluit een objectdefinitie altijd af met een puntkomma.
Voorbeeld
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor:
"blue"
};
Korte objecten kunnen gecomprimeerd worden geschreven, op één regel, met alleen spaties tussen eigenschappen, zoals deze:
const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
Lijnlengte < 80
Vermijd voor de leesbaarheid regels die langer zijn dan 80 tekens.
Als een JavaScript-statement niet op één regel past, kunt u het het beste afbreken na een operator of een komma.
Voorbeeld
document.getElementById("demo").innerHTML =
"Hello Dolly.";
Naamgevingsconventies
Gebruik altijd dezelfde naamgevingsconventie voor al uw code. Bijvoorbeeld:
- Variabele- en functienamen geschreven als camelCase
- Globale variabelen geschreven in HOOFDLETTERS (wij niet, maar het komt vrij vaak voor)
- Constanten (zoals PI) geschreven in HOOFDLETTERS
Moet je hyphens , camelCase of under_scores gebruiken in variabelenamen?
Dit is een vraag die programmeurs vaak bespreken. Het antwoord hangt af van wie je het vraagt:
Koppeltekens in HTML en CSS:
HTML5-attributen kunnen beginnen met data- (data-kwantiteit, data-prijs).
CSS gebruikt koppeltekens in eigenschapnamen (lettergrootte).
Koppeltekens kunnen worden aangezien voor aftrekpogingen. Koppeltekens zijn niet toegestaan in JavaScript-namen.
Onderstrepingstekens:
Veel programmeurs geven er de voorkeur aan underscores (datum_geboorte) te gebruiken, vooral in SQL-databases.
Underscores worden vaak gebruikt in PHP-documentatie.
Pascal zaak:
PascalCase heeft vaak de voorkeur van C-programmeurs.
kameelCase:
camelCase wordt gebruikt door JavaScript zelf, door jQuery en andere JavaScript-bibliotheken.
Begin geen namen met een $-teken. Het zal u in conflict brengen met veel JavaScript-bibliotheeknamen.
JavaScript laden in HTML
Gebruik een eenvoudige syntaxis voor het laden van externe scripts (het type-attribuut is niet nodig):
<script src="myscript.js"></script>
Toegang tot HTML-elementen
Een gevolg van het gebruik van "slordige" HTML-stijlen kan leiden tot JavaScript-fouten.
Deze twee JavaScript-statements zullen verschillende resultaten opleveren:
const obj = getElementById("Demo")
const obj = getElementById("demo")
Gebruik indien mogelijk dezelfde naamgevingsconventie (als JavaScript) in HTML.
Bestandsextensies
HTML-bestanden moeten de extensie .html hebben ( .htm is toegestaan).
CSS-bestanden moeten de extensie .css hebben .
JavaScript-bestanden moeten de extensie .js hebben .
Bestandsnamen in kleine letters gebruiken
De meeste webservers (Apache, Unix) zijn hoofdlettergevoelig wat betreft bestandsnamen:
london.jpg is niet toegankelijk als London.jpg.
Andere webservers (Microsoft, IIS) zijn niet hoofdlettergevoelig:
london.jpg is toegankelijk als London.jpg of london.jpg.
Als u een combinatie van hoofdletters en kleine letters gebruikt, moet u uiterst consistent zijn.
Als u overstapt van een hoofdletterongevoelige naar een hoofdlettergevoelige server, kunnen zelfs kleine fouten uw website kapot maken.
Om deze problemen te voorkomen, gebruikt u altijd bestandsnamen in kleine letters (indien mogelijk).
Prestatie
Codeerconventies worden niet door computers gebruikt. De meeste regels hebben weinig invloed op de uitvoering van programma's.
Inspringen en extra spaties zijn niet belangrijk in kleine scripts.
Voor code in ontwikkeling verdient leesbaarheid de voorkeur. Grotere productiescripts moeten worden verkleind.