Guida allo stile JavaScript
Usa sempre le stesse convenzioni di codifica per tutti i tuoi progetti JavaScript.
Convenzioni di codifica JavaScript
Le convenzioni di codifica sono linee guida di stile per la programmazione . In genere coprono:
- Regole di denominazione e dichiarazione per variabili e funzioni.
- Regole per l'uso di spazi bianchi, rientri e commenti.
- Pratiche e principi di programmazione
Le convenzioni di codifica garantiscono la qualità :
- Migliora la leggibilità del codice
- Semplifica la manutenzione del codice
Le convenzioni di codifica possono essere regole documentate che i team devono seguire o semplicemente essere la tua pratica di codifica individuale.
Questa pagina descrive le convenzioni generali del codice JavaScript utilizzate da W3Schools.
Dovresti anche leggere il prossimo capitolo "Best Practices" e imparare come evitare le insidie di codifica.
Nomi variabili
In W3schools utilizziamo camelCase per i nomi degli identificatori (variabili e funzioni).
Tutti i nomi iniziano con una lettera .
In fondo a questa pagina, troverai una discussione più ampia sulle regole di denominazione.
firstName = "John";
lastName = "Doe";
price = 19.90;
tax = 0.20;
fullPrice = price + (price * tax);
Spazi intorno agli operatori
Metti sempre spazi intorno agli operatori ( = + - * / ) e dopo le virgole:
Esempi:
let x = y + z;
const myArray = ["Volvo", "Saab",
"Fiat"];
Rientro del codice
Utilizzare sempre 2 spazi per il rientro dei blocchi di codice:
Funzioni:
function toCelsius(fahrenheit) {
return (5 / 9) * (fahrenheit - 32);
}
Non utilizzare le schede (tabulatori) per il rientro. Editor diversi interpretano le schede in modo diverso.
Regole di dichiarazione
Regole generali per affermazioni semplici:
- Termina sempre una semplice affermazione con un punto e virgola.
Esempi:
const cars = ["Volvo", "Saab",
"Fiat"];
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor:
"blue"
};
Regole generali per affermazioni complesse (composte):
- Metti la parentesi di apertura alla fine della prima riga.
- Utilizzare uno spazio prima della parentesi di apertura.
- Metti la parentesi di chiusura su una nuova riga, senza spazi iniziali.
- Non terminare un'istruzione complessa con un punto e virgola.
Funzioni:
function toCelsius(fahrenheit) {
return (5 / 9) * (fahrenheit - 32);
}
Cicli:
for (let i = 0; i < 5; i++) {
x += i;
}
Condizionali:
if (time < 20) {
greeting = "Good day";
} else {
greeting = "Good evening";
}
Regole degli oggetti
Regole generali per le definizioni degli oggetti:
- Posizionare la parentesi aperta sulla stessa riga del nome dell'oggetto.
- Usa i due punti più uno spazio tra ogni proprietà e il suo valore.
- Usa le virgolette attorno ai valori stringa, non attorno ai valori numerici.
- Non aggiungere una virgola dopo l'ultima coppia proprietà-valore.
- Posizionare la parentesi di chiusura su una nuova riga, senza spazi iniziali.
- Termina sempre una definizione di oggetto con un punto e virgola.
Esempio
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor:
"blue"
};
Gli oggetti brevi possono essere scritti compressi, su una riga, usando gli spazi solo tra le proprietà, in questo modo:
const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
Lunghezza linea < 80
Per la leggibilità, evitare righe più lunghe di 80 caratteri.
Se un'istruzione JavaScript non si adatta a una riga, il posto migliore per interromperla è dopo un operatore o una virgola.
Esempio
document.getElementById("demo").innerHTML =
"Hello Dolly.";
Convenzioni di denominazione
Usa sempre la stessa convenzione di denominazione per tutto il tuo codice. Per esempio:
- Nomi di variabili e funzioni scritti come camelCase
- Variabili globali scritte in MAIUSCOLO (non lo facciamo, ma è abbastanza comune)
- Costanti (come PI) scritte in MAIUSCOLO
Dovresti usare hyph-hens , camelCase o under_scores nei nomi delle variabili?
Questa è una domanda che i programmatori discutono spesso. La risposta dipende da chi chiedi:
Trattino in HTML e CSS:
Gli attributi HTML5 possono iniziare con data- (data-quantity, data-price).
CSS usa i trattini nei nomi delle proprietà (dimensione del carattere).
I trattini possono essere scambiati per tentativi di sottrazione. I trattini non sono consentiti nei nomi JavaScript.
sottolinea:
Molti programmatori preferiscono utilizzare i caratteri di sottolineatura (data_di_nascita), specialmente nei database SQL.
I trattini bassi sono spesso usati nella documentazione PHP.
Caso Pascal:
PascalCase è spesso preferito dai programmatori C.
cammello:
camelCase è utilizzato da JavaScript stesso, da jQuery e da altre librerie JavaScript.
Non iniziare i nomi con un segno $. Ti metterà in conflitto con molti nomi di librerie JavaScript.
Caricamento di JavaScript in HTML
Utilizzare una sintassi semplice per caricare gli script esterni (l'attributo type non è necessario):
<script src="myscript.js"></script>
Accesso agli elementi HTML
Una conseguenza dell'utilizzo di stili HTML "disordinati" potrebbe causare errori JavaScript.
Queste due istruzioni JavaScript produrranno risultati diversi:
const obj = getElementById("Demo")
const obj = getElementById("demo")
Se possibile, usa la stessa convenzione di denominazione (come JavaScript) in HTML.
Visita la Guida allo stile HTML .
Estensioni di file
I file HTML devono avere un'estensione .html ( è consentito .htm ).
I file CSS dovrebbero avere un'estensione .css .
I file JavaScript dovrebbero avere un'estensione .js .
Usa nomi di file in minuscolo
La maggior parte dei server Web (Apache, Unix) fa distinzione tra maiuscole e minuscole per quanto riguarda i nomi dei file:
Non è possibile accedere a london.jpg come London.jpg.
Altri server Web (Microsoft, IIS) non fanno distinzione tra maiuscole e minuscole:
london.jpg è accessibile come London.jpg o london.jpg.
Se usi un mix di maiuscole e minuscole, devi essere estremamente coerente.
Se passi da un server senza distinzione tra maiuscole e minuscole a un server con distinzione tra maiuscole e minuscole, anche piccoli errori possono danneggiare il tuo sito web.
Per evitare questi problemi, utilizzare sempre nomi di file minuscoli (se possibile).
Prestazione
Le convenzioni di codifica non vengono utilizzate dai computer. La maggior parte delle regole ha scarso impatto sull'esecuzione dei programmi.
Il rientro e gli spazi extra non sono significativi negli script di piccole dimensioni.
Per il codice in fase di sviluppo, la leggibilità dovrebbe essere preferita. Gli script di produzione più grandi dovrebbero essere ridotti al minimo.