Verbeter de leesbaarheid en onderhoudbaarheid van uw JavaScript-code door deze naamgevingsconventies te volgen.

Het is essentieel om eenvoud, leesbaarheid en onderhoudsgemak in uw code te behouden om complexe JavaScript-projecten te beheren. Het consequent naleven van naamgevingsconventies is de sleutel tot het bereiken van dit doel.

Variabelen, booleaanse waarden, functies, constanten, klassen, componenten, methoden, privéfuncties, globale variabelen en bestanden behoren tot de JavaScript-elementen die consistente naamgevingsconventies vereisen. U kunt de organisatie en het begrip van code verbeteren door gestandaardiseerde naamgevingsconventies te implementeren voor al deze componenten, wat op de lange termijn tijd en moeite bespaart.

1. Variabelen benoemen

In JavaScript worden gegevens opgeslagen in variabelen. Het is essentieel om beschrijvende namen voor variabelen te kiezen die hun functie nauwkeurig weergeven. Je kunt bijvoorbeeld vervangen gebruikersnaam of totale prijs voor de naam van een variabele in plaats van X.

instagram viewer

Een goede manier om variabelen een naam te geven is als volgt:

laten totalePrijs = 100;
laten gebruikersnaam = "John";

Verbeterde leesbaarheid van code kan worden bereikt door beschrijvende variabelenamen te gebruiken

2. Booleaans benoemen

Variabelen die slechts twee waarden kunnen hebben, dus geen van beide WAAR of vals, staan ​​bekend als Booleaans. Het is cruciaal om geschikte namen te kiezen voor booleaanse variabelen die hun doel uitdrukken.

Ter illustratie, in plaats van te kiezen voor een variabele naam zoals is waar, zou je liever meegaan is geldig of heeftWaarde.

Overweeg dit voorbeeld:

laten isGeldig = WAAR;
laten heeftWaarde = vals;

In dit voorbeeld maken beschrijvende Booleaanse variabelenamen duidelijk wat ze vertegenwoordigen.

3. Functies benoemen

Een functie in JavaScript verwijst naar een op zichzelf staande code-eenheid die bedoeld is om een ​​bepaalde taak uit te voeren. Het is een codeblok dat kan worden aangeroepen of aangeroepen door andere delen van de code en werkt als een onafhankelijke entiteit.

Om functies effectief te benoemen, gebruikt u beschrijvende namen die hun doel overbrengen. Bijvoorbeeld in plaats van het creëren van een functiefoe, kies voor meer illustratieve namen zoals validerenUserInput of berekenTotaalPrijs.

Bijvoorbeeld:

functieberekenTotaalPrijs(prijs kwantiteit) {
opbrengst prijs kwantiteit;
}
functievaliderenUserInput(invoer) {
opbrengst invoer!== ongedefinieerd && invoer !== nul;
}

4. Constanten benoemen

Constanten zijn variabelen die niet opnieuw kunnen worden toegewezen. Bij het benoemen van constanten is het belangrijk om alleen hoofdletters en onderstrepingstekens te gebruiken om woorden van elkaar te scheiden.

Bijvoorbeeld:

const MAX_PRICE = 1000;
const MIN_PRICE = 0;

In dit voorbeeld zijn alle hoofdletters en onderstrepingstekens gebruikt om woorden in de constantnamen te scheiden.

5. Klassen benoemen

In JavaScript kunnen objecten worden gemaakt met behulp van blauwdrukken die klassen worden genoemd. Om onberispelijke naamgevingspraktijken te bereiken, is het van het grootste belang om PascalCase uit te voeren, een naamgevingsconventie die het hoofdlettergebruik van de eerste letter van elk woord verplicht stelt.

Neem bijvoorbeeld:

klasWinkelmand{
constructeur(merk, model) {
dit.maken = maken;
dit.model = model;
 }
}

In dit voorbeeld de klas Winkelmand is benoemd met behulp van PascalCase, wat betekent dat de eerste letter van elk woord in de klassenaam een ​​hoofdletter is en dat er geen spaties of onderstrepingstekens tussen de woorden staan.

6. Componenten benoemen

Componenten zijn essentiële bouwstenen in moderne softwareontwikkeling, met name in frameworks zoals React, die herbruikbare code benadrukken.

Door een complexe gebruikersinterface of applicatie op te splitsen in kleinere, beheersbare stukken, kunt u creëren componenten die in verschillende projecten kunnen worden hergebruikt, waardoor de ontwikkeltijd wordt verkort en de code toeneemt efficiëntie.

Nogmaals, we raden ten zeerste aan om de naamgevingsconventie van PascalCase te gebruiken voor het benoemen van componenten. Dit betekent dat de eerste letter van elk woord in de componentnaam met een hoofdletter wordt geschreven.

Een dergelijke conventie helpt u bij het onderscheiden van componenten van andere codesegmenten, waardoor identificatie en manipulatie worden vereenvoudigd.

functieKnop(rekwisieten) {
opbrengst<knop>{props.label}knop>;
}

In dit voorbeeld is de PascalCase-naamgevingsconventie gebruikt om de component een naam te geven Knop.

7. Naamgevingsmethoden

Bij het benoemen van methoden is het cruciaal om beschrijvende namen te gebruiken die met succes communiceren wat de methode bereikt, aangezien methoden functies zijn die betrekking hebben op een object.

Bijvoorbeeld:

klasAuto{
constructeur(merk, model) {
dit.maken = maken;
dit.model = model;
 }
 start motor() {
// code om de motor te starten 
 } 
 stopMotor() { 
// code om de motor te stoppen 
 }
 }
}

Beschrijvende namen (start motor, stopMotor) worden gebruikt voor de methoden in dit voorbeeld, zodat het beoogde doel gemakkelijk te begrijpen is.

8. Benoemen van privéfuncties

Functies die als privé zijn gedefinieerd, zijn alleen toegankelijk binnen het object waarin ze zijn gedefinieerd. Het is cruciaal om een ​​leidend onderstrepingsteken (_) toe te voegen om aan te geven dat de functies privé zijn.

Hier is een voorbeeld:

klasAuto{
constructeur(merk, model) {
dit.maken = maken;
dit.model = model;
 }
 _start motor() {
// code om de motor te starten
 }
 _stopEngine() {
// code om de motor te stoppen
 }
}

Door in dit voorbeeld een leidend onderstrepingsteken te gebruiken, wordt aangegeven dat de functies privé zijn.

9. Globale variabelen een naam geven

Variabelen die als globaal zijn geclassificeerd, zijn toegankelijk vanuit elk deel van de codebasis. Bij het benoemen van dergelijke globale variabelen is het cruciaal om duidelijke en beschrijvende namen te gebruiken die hun beoogde doel effectief overbrengen.

Bijvoorbeeld:

const MAX_PRICE = 1000;
const MIN_PRICE = 0;
functiecontroleer prijs(prijs) {
als (prijs > MAX_PRICE) {
// code om hoge prijzen aan te kunnen
 } andersals (prijs < MIN_PRICE) {
// code om lage prijzen te hanteren
 }
}

10. Bestanden benoemen

Efficiënte bestandsorganisatie is een cruciaal aspect van succesvol JavaScript-projectbeheer. Om gestroomlijnde en consistente naamgevingsconventies te garanderen, is het essentieel om woorden in bestandsnamen te scheiden met behulp van kleine letters en koppeltekens.

Kleine letters hebben de voorkeur omdat JavaScript een hoofdlettergevoelige taal is, wat betekent dat de taal kleine letters en hoofdletters verschillend behandelt. Het gebruik van kleine letters voor bestandsnamen zorgt voor consistentie en voorkomt verwarring bij het verwijzen naar bestanden in de code.

Koppeltekens worden gebruikt om woorden in bestandsnamen van elkaar te scheiden, omdat spaties niet zijn toegestaan ​​in bestandsnamen. Andere alternatieven zoals onderstrepingstekens of camelCase kunnen ook worden gebruikt, maar koppeltekens hebben over het algemeen de voorkeur vanwege hun leesbaarheid.

Het gebruik van koppeltekens maakt bestandsnamen ook toegankelijker voor gebruikers met schermlezers of andere ondersteunende technologieën.

mijn-app/
├── src/
 ├── componenten/
 ├── knop.js
 ├── invoerveld.js
├── hulpprogramma's/
 ├── string-utils.js
 ├── date-utils.js
├──app.js
├──index.js

In dit voorbeeld worden kleine letters en koppeltekens gebruikt om woorden in de bestandsnamen van elkaar te scheiden.

Belang van het volgen van naamgevingsconventies in JavaScript

Het volgen van goede naamgevingsconventies is een essentieel aspect van het schrijven van schone en onderhoudbare code in JavaScript. Door deze conventies te volgen, kunt u uw code beter leesbaar en onderhoudbaar maken, vooral in sommige JavaScript-frameworks waarbij u omvangrijke code moet verwerken, wat u tijd en moeite kan besparen bij het lange termijn.