10 essensielle JavaScript-navnekonvensjoner alle utviklere bør kjenne til

Det er viktig å opprettholde enkelhet, lesbarhet og vedlikeholdsvennlighet i koden din for å administrere komplekse JavaScript-prosjekter. Konsekvent overholdelse av navnekonvensjoner er nøkkelen til å nå dette målet.

Variabler, boolske, funksjoner, konstanter, klasser, komponenter, metoder, private funksjoner, globale variabler og filer er blant JavaScript-elementene som krever konsistente navnekonvensjoner. Du kan forbedre kodeorganisering og -forståelse ved å implementere standardiserte navnekonvensjoner på tvers av alle disse komponentene, noe som sparer tid og krefter i det lange løp.

1. Navngiving av variabler

I JavaScript lagres data i variabler. Det er viktig å velge beskrivende navn for variabler som nøyaktig gjenspeiler funksjonen deres. Du kan for eksempel erstatte brukernavn eller totalpris for navnet på en variabel i stedet for x.

En god måte å navngi variabler på er som følger:

la totalpris = 100;
la brukernavn = "John";

Forbedret kodelesbarhet kan oppnås ved å bruke beskrivende variabelnavn

2. Gi navn til boolsk

Variabler som bare kan ha to verdier, dvs. enten ekte eller falsk, er kjent som boolsk. Det er avgjørende å velge passende navn for boolske variabler som uttrykker deres formål.

For å illustrere, i stedet for å velge et variabelnavn som f.eks er sant, bør du foretrekke å gå med er gyldig eller har Verdi.

Tenk på dette tilfellet:

la er gyldig = ekte;
la har Verdi = falsk;

I dette eksemplet gjør beskrivende boolske variabelnavn det klart hva de representerer.

3. Navnefunksjoner

En funksjon i JavaScript refererer til en selvstendig kodeenhet som er ment å utføre en bestemt oppgave. Det er en kodeblokk som kan kalles eller påkalles av andre deler av koden og fungerer som en uavhengig enhet.

For effektivt å navngi funksjoner, bruk beskrivende navn som formidler deres formål. For eksempel i stedet for lage en funksjonfoo, velg mer illustrative navn som valider brukerinngang eller beregneTotalPris.

For eksempel:

funksjonberegneTotalPris(pris, mengde) {
komme tilbake pris * mengde;
}
funksjonvalider brukerinngang(input) {
komme tilbake input !== udefinert && input !== null;
}

4. Navngivning av konstanter

Konstanter er variabler som ikke kan tilordnes på nytt. Når du navngir konstanter, er det viktig å bruke alle store bokstaver og understreker for å skille ord.

For eksempel:

konst MAX_PRICE = 1000;
konst MIN_PRICE = 0;

I dette eksemplet har alle store bokstaver og understrek blitt brukt til å skille ord i konstantnavnene.

5. Navneklasser

I JavaScript kan objekter lages ved hjelp av tegninger kalt klasser. For å oppnå ulastelig navnepraksis, er det av ytterste viktighet å utføre PascalCase, en navnekonvensjon som krever bruk av store bokstaver i den første bokstaven i hvert ord.

Ta for eksempel:

klasseHandlevogn{
konstruktør(lag modell) {
dette.make = lage;
dette.modell = modell;
 }
}

I dette eksemplet er klassen Handlevogn har fått navn ved hjelp av PascalCase, som betyr at den første bokstaven i hvert ord i klassenavnet har blitt skrevet med stor bokstav, og det er ingen mellomrom eller understreking mellom ordene.

6. Navngi komponenter

Komponenter er viktige byggesteiner i moderne programvareutvikling, spesielt innen rammeverk som React, som legger vekt på gjenbrukbar kode.

Ved å bryte ned et komplekst brukergrensesnitt eller applikasjon i mindre, håndterbare deler kan du lage komponenter som kan gjenbrukes på tvers av ulike prosjekter, noe som reduserer utviklingstiden og øker kode effektivitet.

Igjen, vi anbefaler på det sterkeste å bruke PascalCase-navnekonvensjonen for å navngi komponenter. Dette betyr å bruke stor bokstav i hvert ord i komponentnavnet.

En slik konvensjon hjelper deg med å skille komponenter fra andre kodesegmenter, og forenkler identifisering og manipulering.

funksjonKnapp(Rekvisitter) {
komme tilbake<knapp>{props.label}knapp>;
}

I dette eksemplet har PascalCase-navnekonvensjonen blitt brukt til å navngi komponenten Knapp.

7. Navnemetoder

Når du navngir metoder, er det avgjørende å bruke beskrivende navn som vellykket kommuniserer hva metoden oppnår siden metoder er funksjoner som er knyttet til et objekt.

For eksempel:

klasseBil{
konstruktør(lag modell) {
dette.make = lage;
dette.modell = modell;
 }
 startEngine() {
// kode for å starte motoren 
 } 
 stopEngine() { 
// kode for å stoppe motoren 
 }
 }
}

Beskrivende navn (startmotor, stoppmotor) brukes for metodene i dette eksemplet, for å sikre at deres tiltenkte formål er lett å forstå.

8. Navngi private funksjoner

Funksjoner som er definert som private, er begrenset til kun tilgang innenfor objektet der de er definert. Det er avgjørende å legge til en ledende understreking (_) for å indikere at funksjonene er private.

Her er et eksempel:

klasseBil{
konstruktør(lag modell) {
dette.make = lage;
dette.modell = modell;
 }
 _startEngine() {
// kode for å starte motoren
 }
 _stopEngine() {
// kode for å stoppe motoren
 }
}

Ved å bruke en ledende understreking i dette eksemplet, indikeres det at funksjonene er private.

9. Navngivning av globale variabler

Variabler som er klassifisert som globale kan nås fra hvilken som helst del av kodebasen. Når man navngir slike globale variabler, er det avgjørende å bruke klare og beskrivende navn som effektivt formidler deres tiltenkte formål.

For eksempel:

konst MAX_PRICE = 1000;
konst MIN_PRICE = 0;
funksjonsjekkPris(pris) {
hvis (pris > MAX_PRICE) {
// kode for å håndtere høye priser
 } ellershvis (pris < MIN_PRICE) {
// kode for å håndtere lave priser
 }
}

10. Navngi filer

Effektiv filorganisering er et avgjørende aspekt ved vellykket JavaScript-prosjektledelse. For å sikre strømlinjeformede og konsistente navnekonvensjoner, er det viktig å skille ord i filnavn med små bokstaver og bindestreker.

Små bokstaver foretrekkes fordi JavaScript er et språk som skiller mellom store og små bokstaver, noe som betyr at språket behandler små og store bokstaver forskjellig. Bruk av små bokstaver for filnavn sikrer konsistens og unngår forvirring når du refererer til filer i koden.

Bindestreker brukes til å skille ord i filnavn fordi mellomrom ikke er tillatt i filnavn. Andre alternativer som understrek eller camelCase kan også brukes, men bindestreker er generelt foretrukket for deres lesbarhet.

Bruk av bindestreker gjør også filnavn mer tilgjengelige for brukere med skjermlesere eller andre hjelpeteknologier.

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

I dette eksemplet brukes små bokstaver og bindestreker for å skille ord i filnavnene.

Viktigheten av å følge navnekonvensjoner i JavaScript

Å følge gode navnekonvensjoner er et viktig aspekt ved å skrive ren og vedlikeholdbar kode i JavaScript. Ved å følge disse konvensjonene kan du gjøre koden mer lesbar og vedlikeholdbar, spesielt i noen JavaScript-rammeverk der du er pålagt å håndtere voluminøs kode, noe som kan spare deg for tid og krefter i lang sikt.