Förbättra läsbarheten och underhållbarheten för din JavaScript-kod genom att följa dessa namnkonventioner.

Det är viktigt att bibehålla enkelhet, läsbarhet och underhållsvänlighet i din kod för att hantera komplexa JavaScript-projekt. Att konsekvent följa namnkonventioner är nyckeln till att uppnå detta mål.

Variabler, boolean, funktioner, konstanter, klasser, komponenter, metoder, privata funktioner, globala variabler och filer är bland JavaScript-elementen som kräver konsekventa namnkonventioner. Du kan förbättra kodorganisation och förståelse genom att implementera standardiserade namnkonventioner över alla dessa komponenter, vilket sparar tid och ansträngning i det långa loppet.

1. Namngivning av variabler

I JavaScript lagras data i variabler. Det är viktigt att välja beskrivande namn för variabler som korrekt återspeglar deras funktion. Du kan till exempel ersätta Användarnamn eller totalbelopp för namnet på en variabel snarare än x.

Ett bra sätt att namnge variabler är följande:

låta totalpris = 100;
låta användarnamn = "John";
instagram viewer

Förbättrad kodläsbarhet kan uppnås genom att använda beskrivande variabelnamn

2. Namnge Boolean

Variabler som bara kan ha två värden, dvs antingen Sann eller falsk, är kända som Boolean. Det är viktigt att välja lämpliga namn för booleska variabler som uttrycker deras syfte.

För att illustrera, istället för att välja ett variabelnamn som t.ex är sant, bör du föredra att åka med är giltig eller harVärde.

Tänk på det här fallet:

låta är giltig = Sann;
låta hasValue = falsk;

I det här exemplet gör beskrivande booleska variabelnamn det tydligt vad de representerar.

3. Namngivningsfunktioner

En funktion i JavaScript hänvisar till en fristående kodenhet som är avsedd att utföra en viss uppgift. Det är ett kodblock som kan anropas eller anropas av andra delar av koden och fungerar som en oberoende enhet.

För att effektivt namnge funktioner, använd beskrivande namn som förmedlar deras syfte. Till exempel istället för skapa en funktionfoo, välj mer illustrativa namn som validateUserInput eller beräknaTotalPris.

Till exempel:

fungeraberäknaTotalPris(pris, kvantitet) {
lämna tillbaka pris * kvantitet;
}
fungeravalidateUserInput(inmatning) {
lämna tillbaka ingång !== odefinierad && inmatning !== null;
}

4. Att namnge konstanter

Konstanter är variabler som inte kan tilldelas om. När du namnger konstanter är det viktigt att använda alla stora bokstäver och understreck för att separera ord.

Till exempel:

konst MAX_PRICE = 1000;
konst MIN_PRICE = 0;

I det här exemplet har alla stora bokstäver och understreck använts för att separera ord i konstantnamnen.

5. Namngivningsklasser

I JavaScript kan objekt skapas med hjälp av ritningar som kallas klasser. För att uppnå obefläckade namnpraxis är det av yttersta vikt att köra PascalCase, en namnkonvention som kräver att den första bokstaven i varje ord används med stor bokstav.

Ta till exempel:

klassKundvagn{
konstruktör(gör modell) {
detta.make = göra;
detta.model = modell;
 }
}

I det här exemplet, klassen Kundvagn har namngetts med PascalCase, vilket betyder att den första bokstaven i varje ord i klassnamnet har skrivits med stor bokstav, och det finns inga mellanslag eller understreck mellan orden.

6. Namnge komponenter

Komponenter är viktiga byggstenar i modern mjukvaruutveckling, särskilt inom ramverk som React, som betonar återanvändbar kod.

Genom att dela upp ett komplext användargränssnitt eller applikation i mindre, hanterbara delar kan du skapa komponenter som kan återanvändas över olika projekt, vilket minskar utvecklingstiden och ökar koden effektivitet.

Återigen, vi rekommenderar starkt att du använder PascalCases namnkonvention för att namnge komponenter. Detta innebär att man använder den första bokstaven i varje ord i komponentnamnet med stor bokstav.

En sådan konvention hjälper dig att skilja komponenter från andra kodsegment, vilket förenklar identifiering och manipulation.

fungeraKnapp(rekvisita) {
lämna tillbaka<knapp>{props.label}knapp>;
}

I det här exemplet har namnkonventionen PascalCase använts för att namnge komponenten Knapp.

7. Namngivningsmetoder

När man namnger metoder är det viktigt att använda beskrivande namn som framgångsrikt kommunicerar vad metoden åstadkommer eftersom metoder är funktioner som hänför sig till ett objekt.

Till exempel:

klassBil{
konstruktör(gör modell) {
detta.make = göra;
detta.model = modell;
 }
 startmotor() {
// kod för att starta motorn 
 } 
 stopEngine() { 
// kod för att stoppa motorn 
 }
 }
}

Beskrivande namn (startmotor, stoppa motor) används för metoderna i detta exempel, vilket säkerställer att deras avsedda syfte är lätt att förstå.

8. Namnge privata funktioner

Funktioner som definieras som privata är begränsade till åtkomst endast inom det objekt där de är definierade. Det är viktigt att lägga till ett ledande understreck (_) för att indikera att funktionerna är privata.

Här är ett exempel:

klassBil{
konstruktör(gör modell) {
detta.make = göra;
detta.model = modell;
 }
 _startmotor() {
// kod för att starta motorn
 }
 _stopEngine() {
// kod för att stoppa motorn
 }
}

Genom att använda ett ledande understreck i det här exemplet indikeras det att funktionerna är privata.

9. Namngivning av globala variabler

Variabler som klassificeras som globala kan nås från vilken del av kodbasen som helst. När man namnger sådana globala variabler är det viktigt att använda tydliga och beskrivande namn som effektivt förmedlar deras avsedda syfte.

Till exempel:

konst MAX_PRICE = 1000;
konst MIN_PRICE = 0;
fungeracheckPris(pris) {
om (pris > MAX_PRICE) {
// kod för att hantera höga priser
 } annanom (pris < MIN_PRICE) {
// kod för att hantera låga priser
 }
}

10. Namnge filer

Effektiv filorganisation är en avgörande aspekt av framgångsrik JavaScript-projektledning. För att säkerställa strömlinjeformade och konsekventa namnkonventioner är det viktigt att separera ord i filnamn med små bokstäver och bindestreck.

Små bokstäver är att föredra eftersom JavaScript är ett skiftlägeskänsligt språk, vilket innebär att språket behandlar gemener och versaler på olika sätt. Att använda gemener för filnamn säkerställer konsistens och undviker förvirring när man refererar till filer i koden.

Bindestreck används för att separera ord i filnamn eftersom mellanslag inte är tillåtna i filnamn. Andra alternativ som understreck eller camelCase kan också användas, men bindestreck är i allmänhet att föredra för deras läsbarhet.

Att använda bindestreck gör också filnamn mer tillgängliga för användare med skärmläsare eller andra hjälpmedel.

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

I det här exemplet används små bokstäver och bindestreck för att separera ord i filnamnen.

Vikten av att följa namnkonventioner i JavaScript

Att följa bra namnkonventioner är en viktig aspekt av att skriva ren och underhållbar kod i JavaScript. Genom att följa dessa konventioner kan du göra din kod mer läsbar och underhållbar, särskilt i vissa JavaScript-ramverk där du måste hantera skrymmande kod, vilket kan spara tid och ansträngning i långa loppet.