Linee guida di stile JavaScript

Usa sempre le stesse convenzioni di codifica per tutti i tuoi progetti JavaScript.

Convenzioni di codifica JavaScript

Le convenzioni di codifica (Coding conventions) si riferiscono a:Linee guida di stile di programmazioneQuesti principi includono sostanzialmente:

  • Regole di nomina e dichiarazione delle variabili e delle funzioni
  • Regole per l'uso di spazi, rientramenti e commenti
  • Abitudini di programmazione e principi

Convenzioni di codificaAssicurare la qualità:

  • Migliorare la leggibilità del codice
  • Migliorare la mantenibilità del codice

Le convenzioni di codifica possono essere regole scritte seguite da un team o le tue abitudini di codifica personali.

Questa pagina introduce le convenzioni di codifica JavaScript utilizzate da CodeW3C.com.

Dovresti continuare a leggere il capitolo successivo "Best Practices" per imparare come evitare le trappole di codifica.

Nome delle variabili

Su CodeW3C.com, usiamo il casing a casco per i nomi degli identificatori (variabili e funzioni).Casing a casco.

Tutti i nomi iniziano conLettereInizio.

Più avanti in questa pagina, discuteremo più ampiamente le regole di nomignolamento.

firstName = "Bill";
lastName = "Gates";
price = 19.90;
tax = 0.20;
fullPrice = price + (price * tax);

Spazi intorno agli operatori

Si prega di aggiungere uno spazio intorno agli operatori ( = + - * /) e dopo le virgole;

Esempio

var x = y + z;
var values = ["Volvo", "Saab",  "Fiat"];

Indentazione del codice

Si prega di usare sempre 4 spazi per l'indentazione dei blocchi di codice;

Funzione

function toCelsius(fahrenheit) {
    return (5 / 9) * (fahrenheit - 32);
}

Non usare tab per il rientro. Diversi editor interpretano il tab in modo diverso.

Regole delle语句

Regole generali per le语句 semplici:

Si prega di terminare sempre una singola语句 con un punto e virgola;

Esempio

var values = ["Volvo", "Saab",  "Fiat"];
var person = {
    firstName: "Bill",
     lastName: "Gates",
    age: 50,
    eyeColor:  "blue"
};

Regole generali per le语句 complesse:

  • Scrivi l'apice aperto alla fine della prima riga;
  • Usa uno spazio prima dell'apice aperto;
  • Scrivi il parentesi di chiusura su una nuova riga, senza spazi iniziali;
  • Non usare il punto e virgola per terminare una语句 complessa;

Funzione:

function toCelsius(fahrenheit) {
    return (5 / 9) * (fahrenheit - 32);
}

Ciclo:

for (i = 0; i < 5; i++) {
    x += i;
}

Condizione:

if (time < 20) {
    greeting = "Good day";
} else {
     greeting = "Good evening";
}

Regole degli oggetti

Regole generali per la definizione degli oggetti:

  • Metti l'apice aperto e il nome dell'oggetto sulla stessa riga;
  • Usa un due punti seguiti da uno spazio tra l'attributo e il suo valore;
  • Non scrivere una virgola dopo l'ultimo valore di attributo;
  • Scrivi il parentesi di chiusura su una nuova riga, senza spazi iniziali;
  • Si prega di terminare sempre la definizione dell'oggetto con un punto e virgola;

Esempio

var person = {
    firstName: "Bill",
    lastName: "Gates",
    age: 19,
    eyeColor:  "blue"
};

Puoi compressare un oggetto breve su una singola riga, utilizzando solo spazi tra le proprietà, come questo:

var person = {firstName:"Bill", lastName:"Gates", age:50, eyeColor:"blue"};

Lunghezza della riga inferiore a 80

Per migliorare la leggibilità, evita di superare la lunghezza di 80 caratteri per riga.

Se una istruzione JavaScript supera la lunghezza di una riga, il miglior punto di interruzione è dopo l'operatore o la virgola.

Esempio

document.getElementById("demo").innerHTML =
    "Hello Kitty.";

Prova personalmente

Convenzioni di nomi

Usa sempre le stesse convenzioni di nomi per il tuo codice. Ad esempio:

  • I nomi delle variabili e delle funzioni usanomaiuscola a capo d'astaper scrivere
  • Le variabili globali usanomaiuscole(non lo facciamo, ma è abbastanza comune)
  • Le costanti (come PI) usanomaiuscole

Dovremmo usare in nome delle variabilitrattini,maiuscola a capo d'astaoLinee sottiliGiusto?

Questo è un problema che i programmatori discutono spesso. La risposta dipende da chi risponde a questa domanda:

Trattini in HTML e CSS:

Le proprietà HTML5 possono iniziare con data- (data-quantity, data-price).

CSS utilizza trattini nei nomi delle proprietà (font-size).

I trattini possono essere interpretati come operatori di sottrazione. I nomi JavaScript non permettono l'uso di trattini.

Linee sottili:

Molti programmatori preferiscono usare le linee sottili (date_of_birth), specialmente nei database SQL.

Le linee sottile sono spesso usate nelle documentazioni PHP.

Convenzione PascalCase:

I programmatori C spesso usano la convenzione PascalCase.

Maiuscola a capo d'asta (camelCase):

JavaScript stesso, jQuery e altre librerie JavaScript utilizzano la maiuscola a capo d'asta (camelCase).

Non iniziare i nomi JavaScript con il simbolo $. Questo potrebbe causare conflitti di nomi.

Carica JavaScript in HTML

Utilizza una sintassi semplice per caricare script esterni (l'attributo type non è obbligatorio):

<script src="myscript.js"></script>

Accedi agli elementi HTML

Le conseguenze di uno stile HTML "disordinato" potrebbero essere errori JavaScript.

Queste due istruzioni JavaScript producono risultati diversi:

var obj = getElementById("Demo")
var obj = getElementById("demo")

Se possibile, utilizza le stesse convenzioni di nomi in HTML (come JavaScript).

Accedi alla guida di stile HTML.

Estensione dei file

I file HTML dovrebbero utilizzare .html Estensione (non .htm)

I file CSS dovrebbero utilizzare .css Estensione.

I file JavaScript dovrebbero utilizzare .js Estensione.

Utilizzare nomi di file in minuscolo

La maggior parte dei server web (Apache, Unix) sono sensibili alle maiuscole dei nomi dei file:

london.jpg non può essere acceduto come London.jpg.

Altri server web (Microsoft IIS) sono insensibili alle maiuscole:

london.jpg può essere acceduto sia come London.jpg che come london.jpg.

Se utilizzate una combinazione di maiuscole e minuscole, dovete mantenere una coerenza e continuità rigorosa.

Se spostate il sito da un server insensibile alle maiuscole a uno sensibile alle maiuscole, anche questi piccoli errori possono danneggiare il vostro sito.

Per evitare questi problemi, utilizzare sempre nomi di file in minuscolo (se possibile).

Prestazioni

I computer non utilizzano convenzioni di codice. La maggior parte delle regole ha un impatto minimo sull'esecuzione del programma.

La tabulazione e gli spazi extra non sono importanti per i piccoli script.

Per i script in sviluppo, la leggibilità dovrebbe essere prioritaria. I grandi script di produzione dovrebbero essere ridotti.