Forbedre læsbarheden og vedligeholdelsen af ​​din JavaScript-kode ved at følge disse navnekonventioner.

Det er vigtigt at opretholde enkelhed, læsbarhed og nem vedligeholdelse i din kode for at administrere komplekse JavaScript-projekter. Konsekvent overholdelse af navnekonventioner er nøglen til at nå dette mål.

Variabler, boolean, funktioner, konstanter, klasser, komponenter, metoder, private funktioner, globale variabler og filer er blandt de JavaScript-elementer, der kræver ensartede navnekonventioner. Du kan forbedre kodeorganisering og -forståelse ved at implementere standardiserede navnekonventioner på tværs af alle disse komponenter, hvilket sparer tid og kræfter i det lange løb.

1. Navngivning af variabler

I JavaScript lagres data i variabler. Det er vigtigt at vælge beskrivende navne for variabler, der nøjagtigt afspejler deres funktion. Du kan for eksempel erstatte brugernavn eller total pris for navnet på en variabel i stedet for x.

En god måde at navngive variable på er som følger:

instagram viewer 
lade samlet pris = 100;
lade brugernavn = "John";

Forbedret kodelæsbarhed kan opnås ved at bruge beskrivende variabelnavne

2. Navngivning af Boolean

Variabler, der kun kan have to værdier, dvs. enten rigtigt eller falsk, er kendt som Boolean. Det er afgørende at vælge passende navne til booleske variabler, der udtrykker deres formål.

For at illustrere, i stedet for at vælge et variabelnavn som f.eks er sandt, bør du foretrække at gå med er gyldig eller har Værdi.

Overvej dette eksempel:

lade er gyldig = rigtigt;
lade harVærdi = falsk;

I dette eksempel gør beskrivende booleske variabelnavne det klart, hvad de repræsenterer.

3. Navngivningsfunktioner

En funktion i JavaScript refererer til en selvstændig kodeenhed, der er beregnet til at udføre en bestemt opgave. Det er en kodeblok, der kan kaldes eller påberåbes af andre dele af koden og fungerer som en uafhængig enhed.

For effektivt at navngive funktioner skal du bruge beskrivende navne, der formidler deres formål. For eksempel i stedet for oprette en funktionfoo, vælg mere illustrative navne som valider brugerinput eller beregnTotalPris.

For eksempel:

fungereberegnTotalPris(pris, mængde) {
Vend tilbage pris * mængde;
}
fungerevalider brugerinput(input) {
Vend tilbage input !== udefineret && input !== nul;
}

4. Navngivning af konstanter

Konstanter er variabler, der ikke kan gentildeles. Når du navngiver konstanter, er det vigtigt at bruge alle store bogstaver og understregninger til at adskille ord.

For eksempel:

konst MAX_PRICE = 1000;
konst MIN_PRICE = 0;

I dette eksempel er alle store bogstaver og understregninger blevet brugt til at adskille ord i konstantnavnene.

5. Navneklasser

I JavaScript kan objekter oprettes ved hjælp af tegninger kaldet klasser. For at opnå en pletfri navngivningspraksis er det yderst vigtigt at udføre PascalCase, en navnekonvention, der kræver, at det første bogstav i hvert ord skal bruges med store bogstaver.

Tag for eksempel:

klasseIndkøbskurv{
konstruktør(fabrikat, model) {
det her.make = lave;
det her.model = model;
 }
}

I dette eksempel er klassen Indkøbskurv er blevet navngivet ved hjælp af PascalCase, hvilket betyder, at det første bogstav i hvert ord i klassenavnet er blevet skrevet med stort, og der er ingen mellemrum eller understregninger mellem ordene.

6. Navngivning af komponenter

Komponenter er væsentlige byggesten i moderne softwareudvikling, især i rammer som React, som understreger genbrugelig kode.

Ved at nedbryde en kompleks brugergrænseflade eller applikation i mindre, håndterbare stykker, kan du oprette komponenter, der kan genbruges på tværs af forskellige projekter, hvilket reducerer udviklingstiden og øger kode effektivitet.

Igen, vi anbefaler stærkt at bruge PascalCase-navnekonventionen til at navngive komponenter. Det betyder, at det første bogstav i hvert ord i komponentnavnet skal skrives med stort.

En sådan konvention hjælper dig med at skelne komponenter fra andre kodesegmenter, hvilket forenkler identifikation og manipulation.

fungereKnap(rekvisitter) {
Vend tilbage<knap>{props.label}knap>;
}

I dette eksempel er PascalCase-navngivningskonventionen blevet brugt til at navngive komponenten Knap.

7. Navngivningsmetoder

Når man navngiver metoder, er det afgørende at bruge beskrivende navne, der med succes kommunikerer, hvad metoden udretter, da metoder er funktioner, der vedrører et objekt.

For eksempel:

klasseBil{
konstruktør(fabrikat, model) {
det her.make = lave;
det her.model = model;
 }
 startEngine() {
// kode for at starte motoren 
 } 
 stopEngine() { 
// kode for at stoppe motoren 
 }
 }
}

Beskrivende navne (startmotor, stopmotor) bruges til metoderne i dette eksempel, hvilket sikrer, at deres tilsigtede formål er let at forstå.

8. Navngivning af private funktioner

Funktioner, der er defineret som private, er kun begrænset til adgang inden for det objekt, hvor de er defineret. Det er afgørende at tilføje en ledende understregning (_) for at angive, at funktionerne er private.

Her er et eksempel:

klasseBil{
konstruktør(fabrikat, model) {
det her.make = lave;
det her.model = model;
 }
 _startEngine() {
// kode for at starte motoren
 }
 _stopEngine() {
// kode for at stoppe motoren
 }
}

Ved at bruge en ledende understregning i dette eksempel angives det, at funktionerne er private.

9. Navngivning af globale variabler

Variabler, der er klassificeret som globale, kan tilgås fra enhver del af kodebasen. Når man navngiver sådanne globale variabler, er det afgørende at bruge klare og beskrivende navne, der effektivt formidler deres tilsigtede formål.

For eksempel:

konst MAX_PRICE = 1000;
konst MIN_PRICE = 0;
fungerecheckPris(pris) {
hvis (pris > MAX_PRICE) {
// kode til at håndtere høje priser
 } andethvis (pris < MIN_PRICE) {
// kode til at håndtere lave priser
 }
}

10. Navngivning af filer

Effektiv filorganisering er et afgørende aspekt af vellykket JavaScript-projektstyring. For at sikre strømlinede og konsistente navnekonventioner er det vigtigt at adskille ord i filnavne ved hjælp af små bogstaver og bindestreger.

Små bogstaver foretrækkes, fordi JavaScript er et sprog, der skelner mellem store og små bogstaver, hvilket betyder, at sproget behandler små og store bogstaver forskelligt. Brug af små bogstaver til filnavne sikrer konsistens og undgår forvirring, når der refereres til filer i koden.

Bindestreger bruges til at adskille ord i filnavne, fordi mellemrum ikke er tilladt i filnavne. Andre alternativer såsom understregninger eller camelCase kan også bruges, men bindestreger foretrækkes generelt for deres læsbarhed.

Brug af bindestreger gør også filnavne mere tilgængelige for brugere med skærmlæsere eller andre hjælpeteknologier.

min-app/
├── src/
 ├── komponenter/
 ├── knap.js
 ├── input-field.js
├── utils/
 ├── string-utils.js
 ├── date-utils.js
├── app.js
├── index.js

I dette eksempel bruges små bogstaver og bindestreger til at adskille ord i filnavnene.

Vigtigheden af ​​at følge navnekonventioner i JavaScript

At følge gode navnekonventioner er et væsentligt aspekt ved at skrive ren og vedligeholdelig kode i JavaScript. Ved at følge disse konventioner kan du gøre din kode mere læsbar og vedligeholdelig, især i nogle JavaScript-rammer, hvor du er forpligtet til at håndtere omfangsrig kode, hvilket kan spare dig tid og kræfter i lange løb.