Pratiques optimales JavaScript

Évitez les variables globales,new,===,eval()

Éviter les variables globales

Essayez de ne pas utiliser de variables globales.

Il inclut tous les types de données, les objets et les fonctions.

Les variables globales et les fonctions peuvent être couvertes par d'autres scripts.

Utilisez les variables locales à la place et apprenez à les utiliserFermeture。

Déclarer toujours les variables locales

Toutes les variables utilisées dans la fonction devraient être déclarées commeLocalesVariables.

Variables localesDoitPar var Déclarer avec des mots-clés, sinon elles deviendront des variables globales.

Le mode strict ne permet pas les variables non déclarées.

Déclaré en haut

Une bonne habitude de codage est de placer toutes les déclarations en haut de chaque script ou fonction.

Les avantages de cette approche sont :

  • Obtenir un code plus propre
  • Il offre un bon endroit pour trouver les variables locales
  • Il est plus facile d'éviter les variables globales inutiles
  • Réduire la probabilité de redéclaration inutile
// Déclaré en haut
var firstName, lastName, price, discount, fullPrice;
// Utilisé plus tard
firstName = "Bill";
lastName = "Gates";
price = 19.90;
discount = 0.10;
fullPrice = price * 100 / discount;

Il peut également être utilisé pour les variables de boucle :

// Déclaré en haut
var i;
// Utilisé plus tard
for (i = 0; i < 5; i++)  {

Par défaut, JavaScript déplace toutes les déclarations vers le haut (levage des variables JavaScript).

Initialiser les variables

Il est une bonne habitude d'initialiser les variables lors de leur déclaration.

Les avantages de cette approche sont :

  • Code plus propre
  • Initialiser les variables à un emplacement séparé
  • Éviter les valeurs non définies
// Déclaration et initialisation à l'ouverture
var firstName = "",
    lastName  = "",
    price = 0,
    discount = 0,
    fullPrice  = 0,
    myArray = [],
    myObject = {};

L'initialisation des variables nous permet de comprendre l'utilisation prévue et le type de données prévu.

Ne pas déclarer des objets de nombres, de chaînes ou de valeurs booléennes

Toujours considérez les nombres, les chaînes ou les valeurs booléennes comme des valeurs primitives, et non des objets.

Si vous déclarez ces types comme des objets, cela ralentira l'exécution et produira des effets secondaires désagréables :

Exemple

var x = "Bill";             
var y = new String("Bill");
(x === y) // Le résultat est false, car x est une chaîne et y est un objet.

Essayez-le vous-même

ou encore pire :

Exemple

var x = new String("Bill");             
var y = new String("Bill");
(x == y) // Le résultat est false, car vous ne pouvez pas comparer les objets.

Essayez-le vous-même

Ne pas utiliser new Object()

  • Utilisez {} à la place de new Object()
  • Utilisez "" à la place de new String()
  • Utilisez 0 à la place de new Number()
  • Utilisez false à la place de new Boolean()
  • Utilisez [] à la place de new Array()
  • Utilisez /()/ à la place de new RegExp()
  • Utilisez function (){} à la place de new Function()

Exemple

var x1 = {};           // Nouvel objet
var x2 = "";           // Nouvel objet valeur chaîne primitive
var x3 = 0;            // Nouvel objet valeur numérique primitive
var x4 = false;        // Nouvel objet valeur booléenne primitive
var x5 = [];           // Nouvel objet tableau
var x6 = /()/;         // Nouvel objet expression régulière
var x7 = function(){}; // Nouvel objet fonction

Essayez-le vous-même

soyez conscient de la conversion de type automatique

Soyez conscient que les nombres peuvent être意外转换成字符串 ou NaN(Not a Number).

JavaScript est un type de données flou. Une variable peut contenir différents types de données et peut changer de type de données :

Exemple

var x = "Hello";     // typeof x est string
x = 5;               // Changez typeof x en number

Essayez-le vous-même

Si une opération mathématique est effectuée, JavaScript peut convertir les nombres en chaînes de caractères :

Exemple

var x = 5 + 7;       // x.valueOf() est 12, typeof x est number
var x = 5 + "7";     // x.valueOf() est 57, typeof x est string
var x = "5" + 7;     // x.valueOf() est 57, typeof x est string
var x = 5 - 7;       // x.valueOf() est -2, typeof x est number
var x = 5 - "7";     // x.valueOf() est -2, typeof x est number
var x = "5" - 7;     // x.valueOf() est -2, typeof x est number
var x = 5 - "x";     // x.valueOf() est NaN, typeof x est number

Essayez-le vous-même

Soustraire des chaînes de caractères ne produit pas d'erreur mais retourne NaN（Not a Number）：

Exemple

"Hello" - "Dolly"    // retourne NaN

Essayez-le vous-même

Utilisez === pour comparer

== Les opérateurs de comparaison effectuent toujours une conversion de type avant la comparaison (pour correspondre aux types).

=== Les opérateurs comparent强制比较值和类型：

Exemple

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

Essayez-le vous-même

Utilisation des valeurs par défaut des paramètres

Si un paramètre manque lors de l'appel de la fonction, la valeur de ce paramètre manquant sera définie comme undefined。

undefined La valeur peut endommager votre code. Définir des valeurs par défaut pour les paramètres est une bonne habitude.

Exemple

function myFunction(x, y) {
    if (y === undefined) {
        y = 0;
    }
}

Essayez-le vous-même

Veuillez lireParamètres de la fonctionPour en savoir plus sur les paramètres de la fonction, lisez ce chapitre.

pour terminer le switch avec default

Veuillez utiliser par défaut pour terminer votre switch Même si vous pensez qu'il n'est pas nécessaire de le faire.

Exemple

switch (new Date().getDay()) {
    cas 0:
        day = "Dimanche";
        break;
    cas 1:
        day = "Lundi";
         break;
    cas 2:
        day = "Mardi";
         break;
    cas 3:
        day = "Mercredi";
         break;
    cas 4:
        day = "Jeudi";
         break;
    cas 5:
        day = "Vendredi";
         break;
    cas 6:
        day = "Samedi";
         break;
    par défaut:
        day = "Inconnu";
}

Essayez-le vous-même

Évitez d'utiliser eval()

eval() La fonction est utilisée pour permettre le texte en tant que code. Dans presque tous les cas, il n'est pas nécessaire de l'utiliser.

En autorisant l'exécution de tout code, cela signifie également qu'il y a des problèmes de sécurité.