Guide de style JavaScript

Tous les projets JavaScript suivent le même guide de style.

Guide de style JavaScript

Un guide de style comprend généralement les aspects suivants :

  • Règles de nommage des variables et des fonctions
  • Règles d'utilisation des espaces, de l'indentation et des commentaires.
  • Autres conventions courantes...

Un code standardisé est plus facile à lire et à maintenir.

Les conventions de code sont généralement définies avant le développement et peuvent être négociées et établies avec les membres de votre équipe.

Noms de variables

Il est recommandé d’utiliser camelCase pour les noms de variables (camelCase):

firstName = "John";
lastName = "Doe";

price = 19.90;
tax = 0.20;

fullPrice = price + (price * tax);

Espaces et opérateurs

Habituellement, des espaces doivent être ajoutés avant et après les opérateurs ( = + - * / ) :

Exemple :

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

Indentation du code

Utilisez généralement 4 espaces pour indenter les blocs de code :

Fonction :

function toCelsius(fahrenheit) {
    return (5 / 9) * (fahrenheit - 32);
}
Note Il n'est pas recommandé d'utiliser la touche TAB pour l'indentation, car différents éditeurs interprètent la touche TAB différemment.

Règles relatives aux instructions

Règles générales pour les instructions simples :

  • Une instruction se termine généralement par un point-virgule.

Exemple :

var values = ["Volvo", "Saab", "Fiat"];

var person = {
    firstName: "John",
    lastName: "Doe",
    age: 50,
    eyeColor: "blue"
};

Règles générales pour les instructions complexes :

  • Placez l'accolade ouvrante à la fin de la première ligne.
  • Ajoutez un espace avant l'accolade ouvrante.
  • Placez l'accolade fermante sur sa propre ligne.
  • Terminez une instruction complexe par un point-virgule.

Fonction :

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

Boucles :

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

Instructions conditionnelles :

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

Règles relatives aux objets

Règles pour les définitions d'objets :

  • Placez l'accolade ouvrante sur la même ligne que le nom de la classe.
  • Il y a un espace entre les deux-points et la valeur de la propriété.
  • Les chaînes de caractères utilisent des guillemets doubles ; les nombres n'en ont pas besoin.
  • N'ajoutez pas de virgule après la dernière valeur de propriété.
  • Placez l'accolade fermante sur sa propre ligne et terminez-la par un point-virgule.

Exemple :

var person = {
    firstName: "John",
    lastName: "Doe",
    age: 50,
    eyeColor: "blue"
};

Le code court d'un objet peut être écrit directement sur une seule ligne :

Exemple :

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

Chaque ligne de code fait moins de 80 caractères

Pour faciliter la lecture, il est recommandé que chaque ligne contienne moins de 80 caractères.

Si une instruction JavaScript dépasse 80 caractères, il est recommandé de couper la ligne après un opérateur ou une virgule.

Exemple :

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

Essayez-le vous-même »

Règles de nommage

En général, de nombreux langages de programmation ont des règles de nommage similaires, par exemple :

  • Les variables et les fonctions sont identifiées à l'aide du lower camel case, c'est-à-dire que, hormis le premier mot, la première lettre des autres mots est en majuscule (lowerCamelCase）
  • Les variables globales sont en majuscules (UPPERCASE )
  • Les constantes (telles que PI) sont en majuscules (UPPERCASE )

Utilisez-vous ces règles pour nommer les variables :hyp-hens, camelCase, ouunder_scores ?

Le caractère trait d'union (-) en HTML et CSS :

Les attributs HTML5 peuvent utiliser data- comme préfixe (par exemple, data-quantity, data-price).

CSS utilise - pour relier les noms de propriétés (font-size).

Note - est généralement considéré comme une soustraction en JavaScript, il n'est donc pas autorisé.

Trait de soulignement :

De nombreux programmeurs préfèrent utiliser des traits de soulignement (par ex., date_of_birth), en particulier dans les bases de données SQL.

Le langage PHP utilise généralement des traits de soulignement.

PascalCase :

PascalCase est plus courant dans le langage C.

Camel case :

Le camel case est généralement recommandé en JavaScript ; jQuery et d'autres bibliothèques JavaScript utilisent le camel case.

Note Les noms de variables ne doivent pas commencer par $, car cela entrera en conflit avec de nombreuses bibliothèques JavaScript.

Chargement de fichiers JavaScript externes en HTML

Utilisez un format concis pour charger les fichiers JavaScript (l'attribut type n'est pas requis) :

<script src="myscript.js">

Utilisation de JavaScript pour accéder aux éléments HTML

Un mauvais formatage HTML peut provoquer des erreurs d'exécution JavaScript.

Les deux instructions JavaScript suivantes produiront des résultats différents :

Exemple

var obj = getElementById("Demo")

var obj = getElementById("demo")

Essayez-le vous-même »

Essayez d'utiliser les mêmes règles de nommage pour HTML et JavaScript.

Consultez le guide de style HTML(5)。

Extensions de fichier

Les extensions de fichier HTML peuvent être.html( ou.htm).

L'extension de fichier CSS est.css 。

L'extension de fichier JavaScript est.js 。

Utilisez des noms de fichiers en minuscules

La plupart des serveurs web (Apache, Unix) sont sensibles à la casse : london.jpg n'est pas accessible via London.jpg.

D'autres serveurs web (Microsoft, IIS) ne sont pas sensibles à la casse : london.jpg est accessible via London.jpg ou london.jpg.

Vous devez maintenir un style cohérent, et nous recommandons d'utiliser des noms de fichiers en minuscules partout.

Autres extensions