10 convenzioni di denominazione JavaScript essenziali che ogni sviluppatore dovrebbe conoscere

È essenziale mantenere semplicità, leggibilità e facilità di manutenzione nel codice per gestire progetti JavaScript complessi. Aderendo costantemente alle convenzioni di denominazione è la chiave per raggiungere questo obiettivo.

Variabili, booleani, funzioni, costanti, classi, componenti, metodi, funzioni private, variabili globali e file sono tra gli elementi JavaScript che richiedono convenzioni di denominazione coerenti. Puoi migliorare l'organizzazione e la comprensione del codice implementando convenzioni di denominazione standardizzate in tutti questi componenti, risparmiando tempo e fatica a lungo termine.

1. Denominazione delle variabili

In JavaScript, i dati vengono memorizzati in variabili. È essenziale scegliere nomi descrittivi per le variabili che riflettano accuratamente la loro funzione. Potresti, ad esempio, sostituire nome utente O prezzo totale per il nome di una variabile anziché X.

Un buon modo per denominare le variabili è il seguente:

permettere prezzo totale = 100;
permettere nomeutente = "John";

È possibile ottenere una migliore leggibilità del codice utilizzando nomi di variabili descrittivi

2. Denominazione booleana

Variabili che possono avere solo due valori, ad es VERO O falso, sono noti come booleani. È fondamentale scegliere nomi appropriati per le variabili booleane che esprimano il loro scopo.

Per illustrare, invece di optare per un nome di variabile come è vero, dovresti preferire andare con è valido O hasValue.

Considera questa istanza:

permettere è valido = VERO;
permettere haValore = falso;

In questo esempio, i nomi descrittivi delle variabili booleane chiariscono cosa rappresentano.

3. Funzioni di denominazione

Una funzione in JavaScript fa riferimento a un'unità di codice autonoma destinata a eseguire una particolare attività. È un blocco di codice che può essere chiamato o richiamato da altre parti del codice e opera come entità indipendente.

Per denominare efficacemente le funzioni, utilizzare nomi descrittivi che trasmettano il loro scopo. Ad esempio, invece di creazione di una funzionepippo, optare per nomi più illustrativi come validateUserInput O calcola il prezzo totale.

Ad esempio:

funzionecalcola il prezzo totale(prezzo, quantità) {
ritorno prezzo * quantità;
}
funzionevalidateUserInput(ingresso) {
ritorno ingresso !== non definito && input !== nullo;
}

4. Denominazione di costanti

Le costanti sono variabili che non possono essere riassegnate. Quando si nominano le costanti, è importante utilizzare tutte le lettere maiuscole e i caratteri di sottolineatura per separare le parole.

Per esempio:

cost PREZZO_MAX = 1000;
cost PREZZO_MIN = 0;

In questo esempio, tutte le lettere maiuscole ei caratteri di sottolineatura sono stati utilizzati per separare le parole nei nomi delle costanti.

5. Classi di denominazione

In JavaScript, gli oggetti possono essere creati utilizzando blueprint chiamati classi. Per ottenere pratiche di denominazione immacolate, è della massima importanza eseguire PascalCase, una convenzione di denominazione che impone la maiuscola della prima lettera di ogni parola.

Prendi, ad esempio:

classeCarrello della spesa{
costruttore(fare il modello) {
Questo.make = crea;
Questo.modello = modello;
 }
}

In questo esempio, la classe Carrello della spesa è stato denominato utilizzando PascalCase, il che significa che la prima lettera di ogni parola nel nome della classe è stata scritta in maiuscolo e non ci sono spazi o caratteri di sottolineatura tra le parole.

6. Denominazione dei componenti

I componenti sono elementi costitutivi essenziali nello sviluppo del software moderno, in particolare in framework come React, che sottolineano il codice riutilizzabile.

Suddividendo un'interfaccia utente o un'applicazione complessa in parti più piccole e gestibili, puoi creare componenti che possono essere riutilizzati in diversi progetti, riducendo i tempi di sviluppo e aumentando il codice efficienza.

Ancora una volta, consigliamo vivamente di utilizzare la convenzione di denominazione PascalCase per la denominazione dei componenti. Ciò significa scrivere in maiuscolo la prima lettera di ogni parola nel nome del componente.

Tale convenzione ti aiuta a distinguere i componenti da altri segmenti di codice, semplificando l'identificazione e la manipolazione.

funzionePulsante(oggetti di scena) {
ritorno<pulsante>{props.label}pulsante>;
}

In questo esempio, la convenzione di denominazione PascalCase è stata utilizzata per denominare il componente Pulsante.

7. Metodi di denominazione

Quando si denominano i metodi, è fondamentale utilizzare nomi descrittivi che comunichino correttamente ciò che il metodo esegue poiché i metodi sono funzioni che riguardano un oggetto.

Ad esempio:

classeAuto{
costruttore(fare il modello) {
Questo.make = crea;
Questo.modello = modello;
 }
 motore di avvio() {
// codice per avviare il motore 
 } 
 stopEngine() { 
// codice per arrestare il motore 
 }
 }
}

Nomi descrittivi (startEngine, stopEngine) vengono utilizzati per i metodi in questo esempio, assicurando che il loro scopo previsto sia facilmente comprensibile.

8. Denominazione di funzioni private

Le funzioni definite come private sono limitate all'accesso solo all'interno dell'oggetto in cui sono definite. È fondamentale aggiungere un carattere di sottolineatura iniziale (_) per indicare che le funzioni sono private.

Ecco un esempio:

classeAuto{
costruttore(fare il modello) {
Questo.make = crea;
Questo.modello = modello;
 }
 _startEngine() {
// codice per avviare il motore
 }
 _stopEngine() {
// codice per arrestare il motore
 }
}

Utilizzando un carattere di sottolineatura iniziale in questo esempio, viene indicato che le funzioni sono private.

9. Denominazione delle variabili globali

È possibile accedere alle variabili classificate come globali da qualsiasi parte della base di codice. Durante la denominazione di tali variabili globali, è fondamentale utilizzare nomi chiari e descrittivi che trasmettano efficacemente lo scopo previsto.

Ad esempio:

cost PREZZO_MAX = 1000;
cost PREZZO_MIN = 0;
funzionecheckPrezzo(prezzo) {
Se (prezzo > MAX_PRICE) {
// codice per gestire prezzi elevati
 } altroSe (prezzo < PREZZO_MIN) {
// codice per gestire prezzi bassi
 }
}

10. Denominazione dei file

Un'efficiente organizzazione dei file è un aspetto cruciale per una gestione di progetti JavaScript di successo. Per garantire convenzioni di denominazione semplificate e coerenti, è essenziale separare le parole all'interno dei nomi dei file utilizzando lettere minuscole e trattini.

Le lettere minuscole sono preferite perché JavaScript è un linguaggio con distinzione tra maiuscole e minuscole, il che significa che la lingua tratta le lettere minuscole e maiuscole in modo diverso. L'utilizzo di lettere minuscole per i nomi dei file garantisce coerenza ed evita confusione quando si fa riferimento ai file nel codice.

I trattini vengono utilizzati per separare le parole nei nomi dei file perché gli spazi non sono consentiti nei nomi dei file. Possono essere utilizzate anche altre alternative come underscore o camelCase, ma i trattini sono generalmente preferiti per la loro leggibilità.

L'uso dei trattini rende anche i nomi dei file più accessibili per gli utenti con lettori di schermo o altre tecnologie assistive.

la mia-app/
├── sorgente/
 ├── componenti/
 ├── button.js
 ├── input-field.js
├── utilità/
 ├── stringa-utils.js
 ├── date-utils.js
├── app.js
├── index.js

In questo esempio, vengono utilizzate lettere minuscole e trattini per separare le parole nei nomi dei file.

Importanza di seguire le convenzioni di denominazione in JavaScript

Seguire buone convenzioni di denominazione è un aspetto essenziale della scrittura di codice pulito e gestibile in JavaScript. Seguendo queste convenzioni, puoi rendere il tuo codice più leggibile e gestibile, specialmente in alcuni Framework JavaScript in cui è necessario gestire codice ingombrante, che può farti risparmiare tempo e fatica nel lunga corsa.