Guide de style JavaScript

Utilisez toujours les mêmes conventions de code pour tous vos projets JavaScript.

Conventions de code JavaScript

Les conventions de codage (Coding conventions) se réfèrent à :Directives de style de programmationCes principes incluent principalement :

  • Règles de nommage et de déclaration des variables et des fonctions
  • Règles d'utilisation des espaces, des indentations et des commentaires
  • Habitudes de programmation et principes

Conventions de codeAssurer la qualité:

  • Améliorer la lisibilité du code
  • Améliorer la maintenabilité du code

Les conventions de code peuvent être des règles écrites suivies par l'équipe ou vos habitudes de codage personnelles.

Cette page présente les conventions de code JavaScript générales utilisées par CodeW3C.com.

Vous devriez continuer à lire le prochain chapitre "Meilleures pratiques" pour apprendre comment éviter les pièges de codage.

Noms de variables

Sur CodeW3C.com, nous utilisons pour les noms d'identifiants (variables et fonctions) une majuscule et une minuscule :majuscules et minuscules.

Tous les noms commencent parLettresDébut.

Nous discuterons plus en détail des règles de nommage à la fin de cette page.

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

Espaces autour des opérateurs

Il faut toujours ajouter un espace autour des opérateurs ( = + - * / ) et après les virgules ;

Exemple

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

Indentation du code

Il faut toujours utiliser 4 espaces pour l'indentation des blocs de code ;

Fonction

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

Ne pas utiliser de tabulations pour l'indentation. Les éditeurs de texte interprètent les tabulations différemment.

Règles des instructions

Règles générales des instructions simples :

Il faut toujours terminer une seule instruction par un point-virgule ;

Exemple

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

Règles générales pour les expressions complexes (compound) :

  • Écrire l'accolade ouverte à la fin de la première ligne ;
  • Utiliser un espace avant l'accolade ouverte ;
  • Il faut écrire le fermeture de parenthèse sur une nouvelle ligne, sans espace en tête ;
  • Ne pas terminer des expressions complexes par un point-virgule ;

Fonction :

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

Boucle :

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

Condition :

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

Règles des objets

Règles générales pour la définition d'un objet :

  • Placer l'accolade ouverte et le nom de l'objet sur la même ligne ;
  • Utiliser un deux-points suivi d'un espace entre chaque propriété et sa valeur ;
  • Ne pas écrire de virgule après la dernière paire de valeur de propriété ;
  • Il faut écrire le fermeture de parenthèse sur une nouvelle ligne, sans espace en tête ;
  • Il faut toujours terminer la définition d'un objet par un point-virgule ;

Exemple

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

Il est possible de compresser les petits objets en une seule ligne, en utilisant uniquement des espaces entre les propriétés, comme ceci :

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

Longueur de ligne inférieure à 80

Pour améliorer la lisibilité, évitez de dépasser 80 caractères par ligne.

Si une instruction JavaScript dépasse la longueur d'une ligne, le meilleur endroit pour sauter une ligne est après un opérateur ou une virgule.

Exemple

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

Essayez-le vous-même

Conventions de nommage

Utilisez toujours la même convention de nommage pour tous vos codes. Par exemple :

  • Les noms de variables et de fonctions doivent êtrecasse en majuscules et en minuscules (camelCase)à écrire
  • Variables globales utilisentmajuscules(Nous ne le faisons pas, mais c'est assez courant)
  • Constantes (comme PI) utilisentmajuscules

Devrions-nous utiliser dans les noms de variablestires、casse en majuscules et en minuscules (camelCase)ouTraits de soulignementoui ?

C'est un sujet souvent discuté par les programmeurs. La réponse dépend de la personne qui pose la question :

Les tirets dans HTML et CSS :

Les attributs HTML5 peuvent commencer par data- (data-quantity, data-price).

Le CSS utilise des tirets dans les noms des propriétés (font-size).

Les tirets peuvent être mal interprétés comme des opérateurs de soustraction. Les noms des variables JavaScript ne peuvent pas contenir de tirets.

Traits de soulignement :

De nombreux programmeurs aiment utiliser des traits de soulignement (date_of_birth), en particulier dans les bases de données SQL.

Les traits de soulignement sont souvent utilisés dans les documents de référence PHP.

Méthode de nommage Pascal (PascalCase) :

Les programmeurs en C utilisent souvent la méthode de nommage Pascal.

Casse en majuscules et en minuscules (camelCase) :

JavaScript lui-même, jQuery et d'autres bibliothèques JavaScript utilisent la casse en majuscules et en minuscules (camelCase).

Ne commencez pas les noms des variables JavaScript par le symbole $. Cela peut entraîner des conflits de noms de variables JavaScript.

Charger du JavaScript dans HTML

Chargez les scripts externes en utilisant une syntaxe simple (le attribut type n'est pas obligatoire) :

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

Accéder aux éléments HTML

Les conséquences de l'utilisation d'un style HTML 'non propre' peuvent être la cause d'erreurs JavaScript.

Ces deux instructions JavaScript produisent des résultats différents :

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

Si possible, utilisez la même convention de nommage dans HTML (comme en JavaScript).

Accédez aux guides de style HTML.

Extension de fichier

Les fichiers HTML doivent utiliser .html Extension (au lieu de .htm)

Les fichiers CSS doivent utiliser .css Extension.

Les fichiers JavaScript doivent utiliser .js Extension.

Utilisation de noms de fichiers en minuscules

La plupart des serveurs web (Apache, Unix) sont sensibles à la casse des noms de fichiers :

london.jpg ne peut pas être vu comme London.jpg pour l'accès.

D'autres serveurs web (Microsoft IIS) ne sont pas sensibles à la casse :

london.jpg peut être accédé sous forme de London.jpg ou london.jpg.

Si vous utilisez des majuscules et des minuscules mélangées, vous devez maintenir une continuité et une cohérence strictes.

Si vous transférez un site d'un serveur non sensible à la casse à un serveur sensible à la casse, même cette petite erreur peut endommager votre site.

Pour éviter ces problèmes, utilisez toujours des noms de fichiers en minuscules (si possible).

Performance

Les ordinateurs ne utilisent pas les conventions de code. La plupart des règles ont un impact minime sur l'exécution du programme.

L'indentation et les espaces supplémentaires ne sont pas importants pour les petits scripts.

Pour les scripts en cours de développement, la lisibilité doit être privilégiée. Les scripts plus volumineux doivent être réduits.