Esperienze pratiche JavaScript

Ognuno scrive JavaScript in modo diverso. Ma ci sono molte cose in comune, di seguito è riportato un insieme di semplici linee guida e considerazioni per la scrittura di JavaScript che vi faranno risparmiare molte strade.

Evitare le variabili globali

Ridurre al minimo l'uso delle variabili globali. Questo include tutti i tipi di dati, gli oggetti e le funzioni.

Le variabili globali e le funzioni possono essere sovrascritte da altri script. Quindi usare variabili locali.

Le variabili locali devono essere utilizzatelet,constevarchiavi di dichiarazione, altrimenti diventeranno variabili globali.

Dichiarare sempre le variabili

Quando si dichiarano variabili e costanti, utilizzareleteconstchiave, nonvar.

　　// Raccomandato:
　　let myAge = 22;
　　const myName = "oldtoolbag.com";
　　
　　//　Non raccomandato:
　　var myAge = 22;
　　var myName = "oldtoolbag.com";

Questo ha molte buone ragioni - ad esempio, evita problemi di riassegnazione accidentale e evita di influenzare la leggibilità.

Mettere tutte le dichiarazioni nella parte superiore di ogni script o funzione è una buona pratica di programmazione.

Di seguito è fornito un codice più conciso e un punto di ricerca per tutte le variabili all'inizio del codice.

　　// Dichiarazioni scritte all'inizio
　　let firstName, lastName, price, discount, fullPrice;
　　
　　// Utilizzando
　　firstName = "oldtoolbag.com";
　　lastName = "Choudhary";
　　
　　price = 26.90;
　　discount = 1.25;
　　
　　fullPrice = price * 100 / discount;

Utilizzando la sintassi estesa

Per massimizzare la leggibilità, utilizziamo la sintassi estesa, spostando ogni riga di JavaScript su una nuova riga.

　　// Raccomandato:
　　function myFunc() {
　　console.log("Parrot Tutorial");
　　}
　　
　　//　Non raccomandato:
　　function myFunc() { console.log("Parrot Tutorial"); }

Dovresti usare spazi tra operatori, operandi, parametri, ecc.

　　// Leggibilità migliore
　　if(dayOfWeek === 7 && weather === "sunny") {
　　/* Some code */
　　}
　　
　　// Leggibilità scarsa
　　if(dayOfWeek === 7 && weather === "sunny"){
　　/* Some code */
　　}

Non dichiarare numeri, stringhe o valori booleani come oggetti

Considera sempre i numeri, le stringhe o i valori booleani come valori primitivi. Non come oggetti.

Declinare questi tipi come oggetti ridurrà la velocità di esecuzione e produrrà risultati imprevisti.

var str1 = "New Delhi";
var str2 = new String("New Delhi");
document.write(str1 === str2); // Restituisce false perché str1 e str2 hanno tipi diversi

Impossibile confrontare gli oggetti:

var str1 = new String("New Delhi");
var str2 = new String("New Delhi");
document.write(str1 == str2); // Restituisce false perché str1 e str2 sono oggetti diversi
document.write(str1 === str2); // Restituisce false perché str1 e str2 sono oggetti diversi

Non usare new Object()

• Usa {} al posto di new Object()

• Usa "" al posto di new String()

• Usa 0 al posto di new Number()

• Usa false al posto di new Boolean()

• Usa [] al posto di new Array()

• Usa /()/ al posto di new RegExp()

• Usa function (){} al posto di new Function()

let x1 = {};
let x2 = "";
let x3 = 0;
let x4 = false;
let x5 = [];
let x6 = /()/;
let x7 = function(){};

Attenzione alla conversione implicita di tipo

JavaScript è un linguaggio di tipo debole o dinamico. Le variabili JavaScript non sono direttamente associate a un tipo di valore specifico e possono essere assegnate (e riassegnate) tutti i tipi di valore.

var x = 20; // x è ora un Numero
x = "oldtoolbag.com"; // x è ora una Stringa
x = true; // x ora è un Boolean

Durante le operazioni matematiche, JavaScript può convertire i numeri in stringhe:

num = 50 + 10; // Restituisce 60, typeof num è un numero
num = 50 + "10"; // Restituisce "5010", typeof num è una stringa
num = "50" + 10; // Restituisce "5010", typeof num è una stringa
num = "50" - 10; // Restituisce "40", typeof num è un numero

Notare che i numeri possono convertirsi inaspettatamente inNaN（non numerico）：

num = 50 * "Parrot"; // Restituisce "NaN", typeof num è un numero

Usa confronti rigorosi

L'operatore == di confronto sempre compara dopo la conversione (per adattarsi al tipo).

L'operatore === di uguaglianza forzata compara il valore e il tipo.

　　1 == "1"; // true
　　1 == true; // true
　　
　　1 === "1"; // false
　　1 === true; // false

Utilizza le costanti di modello

Per inserire un valore in una stringa, utilizzareCostanti di modello（``）。

　　// Raccomandato:
　　let myName = 'oldtoolbag.com';
　　console.log(`Hi! I'm ${myName}!`);
　　
　　//　Non raccomandato:
　　let myName = 'oldtoolbag.com';
　　console.log('Hi! I\'m' + myName + '!');

un ciclo generico

Quando si utilizzafor,for...inofor...ofUn ciclo, assicurati di definire correttamente l'inizializzazione, utilizzalettermini chiave.

　　let fruits = ["Apple", "Mango", "Banana"];
　　
　　// Raccomandato:
　　for(let i of fruits) {
　　　console.log(i);
　　}
　　
　　//　Non raccomandato:
　　for(i of fruits) {
　　　console.log(i);
　　}

Ricorda pure:

• Non dovrebbe esserci spazio tra il termine di ciclo e il parentesi aperto di sinistraspazio.

• Tra parentesi e graffe ci dovrebbe essereUn spazio.

Nomina delle funzioni

Per il nome della funzione, utilizzare lowerCamelCasing e utilizzare nomi semantici chiari e comprensibili in luoghi appropriati.

　　// Raccomandato:
　　function sayHello() {
　　alert('Hello!');
　　}
　　
　　//　Non raccomandato:
　　function　sayhello()　{
　　alert('Hello!');
　　}

Finisci il switch con un valore di default

switchSempre finire con default:. Anche se non pensi di averne bisogno.

var　day;
switch　(new　Date().getDay())　{
case　0:　day　=　"Sunday";
break;
case　1:　day　=　"Monday";
break;
case　2:　day　=　"Tuesday";
break;
case　3:　day　=　"Wednesday";
break;
case　4:　day　=　"Thursday";
break;
case　5:　day　=　"Friday";
break;
case　6:　day　=　"Saturday";
break;
default:　day　=　"Undefined　Day";
}

Gestione degli errori

Se alcuni stati del programma lanciano errori non catturati, smetteranno di eseguire e potrebbero ridurre la praticità degli esempi.

pertanto, dovresti usaretry...catchblocco per catturare gli errori.

　　try　{
　　console.log(results);
　　}
　　catch(e)　{
　　console.error(e);
　　}