Guide de style JavaScript
Utilisez toujours les mêmes conventions de codage pour tous vos projets JavaScript.
Conventions de codage JavaScript
Les conventions de codage sont des directives de style pour la programmation . Ils couvrent généralement :
- Règles de nommage et de déclaration des variables et des fonctions.
- Règles d'utilisation des espaces blancs, de l'indentation et des commentaires.
- Pratiques et principes de programmation
Les conventions de codage garantissent la qualité :
- Améliore la lisibilité du code
- Faciliter la maintenance du code
Les conventions de codage peuvent être des règles documentées que les équipes doivent suivre ou simplement être votre pratique de codage individuelle.
Cette page décrit les conventions générales du code JavaScript utilisées par W3Schools.
Vous devriez également lire le chapitre suivant "Meilleures pratiques" et apprendre à éviter les pièges du codage.
Noms des variables
Chez W3schools, nous utilisons camelCase pour les noms d'identifiants (variables et fonctions).
Tous les noms commencent par une lettre .
Au bas de cette page, vous trouverez une discussion plus large sur les règles de nommage.
firstName = "John";
lastName = "Doe";
price = 19.90;
tax = 0.20;
fullPrice = price + (price * tax);
Espaces autour des opérateurs
Mettez toujours des espaces autour des opérateurs ( = + - * / ), et après les virgules :
Exemples:
let x = y + z;
const myArray = ["Volvo", "Saab",
"Fiat"];
Indentation du code
Utilisez toujours 2 espaces pour l'indentation des blocs de code :
Les fonctions:
function toCelsius(fahrenheit) {
return (5 / 9) * (fahrenheit - 32);
}
N'utilisez pas d'onglets (tabulateurs) pour l'indentation. Différents éditeurs interprètent les onglets différemment.
Règles de déclaration
Règles générales pour les déclarations simples :
- Terminez toujours une instruction simple par un point-virgule.
Exemples:
const cars = ["Volvo", "Saab",
"Fiat"];
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor:
"blue"
};
Règles générales pour les déclarations complexes (composées) :
- Placez le support d'ouverture à la fin de la première ligne.
- Utilisez un espace avant le support d'ouverture.
- Placez la parenthèse fermante sur une nouvelle ligne, sans espace devant.
- Ne terminez pas une instruction complexe par un point-virgule.
Les fonctions:
function toCelsius(fahrenheit) {
return (5 / 9) * (fahrenheit - 32);
}
Boucles:
for (let i = 0; i < 5; i++) {
x += i;
}
Conditionnels :
if (time < 20) {
greeting = "Good day";
} else {
greeting = "Good evening";
}
Règles d'objet
Règles générales pour les définitions d'objet :
- Placez le crochet ouvrant sur la même ligne que le nom de l'objet.
- Utilisez deux-points plus un espace entre chaque propriété et sa valeur.
- Utilisez des guillemets autour des valeurs de chaîne, pas autour des valeurs numériques.
- N'ajoutez pas de virgule après la dernière paire propriété-valeur.
- Placez la parenthèse fermante sur une nouvelle ligne, sans espace devant.
- Terminez toujours une définition d'objet par un point-virgule.
Exemple
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor:
"blue"
};
Les objets courts peuvent être écrits compressés, sur une seule ligne, en utilisant des espaces uniquement entre les propriétés, comme ceci :
const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
Longueur de ligne < 80
Pour plus de lisibilité, évitez les lignes de plus de 80 caractères.
Si une instruction JavaScript ne tient pas sur une seule ligne, le meilleur endroit pour la casser est après un opérateur ou une virgule.
Exemple
document.getElementById("demo").innerHTML =
"Hello Dolly.";
Conventions de nommage
Utilisez toujours la même convention de nommage pour tout votre code. Par example:
- Noms de variables et de fonctions écrits en camelCase
- Variables globales écrites en MAJUSCULES (Nous ne le faisons pas, mais c'est assez courant)
- Constantes (comme PI) écrites en MAJUSCULES
Devez-vous utiliser hyp- hens , camelCase ou under_scores dans les noms de variables ?
C'est une question dont les programmeurs discutent souvent. La réponse dépend de qui vous demandez:
Traits d'union en HTML et CSS :
Les attributs HTML5 peuvent commencer par data- (data-quantity, data-price).
CSS utilise des traits d'union dans les noms de propriété (font-size).
Les traits d'union peuvent être confondus avec des tentatives de soustraction. Les tirets ne sont pas autorisés dans les noms JavaScript.
Souligne :
De nombreux programmeurs préfèrent 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 la documentation PHP.
PascalCase :
PascalCase est souvent préféré par les programmeurs C.
affaire de chameau:
camelCase est utilisé par JavaScript lui-même, par jQuery et d'autres bibliothèques JavaScript.
Ne commencez pas les noms par un signe $. Cela vous mettra en conflit avec de nombreux noms de bibliothèques JavaScript.
Chargement de JavaScript en HTML
Utilisez une syntaxe simple pour charger des scripts externes (l'attribut type n'est pas nécessaire) :
<script src="myscript.js"></script>
Accéder aux éléments HTML
Une conséquence de l'utilisation de styles HTML "désordonnés" peut entraîner des erreurs JavaScript.
Ces deux instructions JavaScript produiront des résultats différents :
const obj = getElementById("Demo")
const obj = getElementById("demo")
Si possible, utilisez la même convention de dénomination (comme JavaScript) en HTML.
Consultez le guide de style HTML .
Extensions de fichiers
Les fichiers HTML doivent avoir une extension .html ( .htm est autorisé).
Les fichiers CSS doivent avoir une extension .css .
Les fichiers JavaScript doivent avoir une extension .js .
Utiliser des noms de fichiers en minuscules
La plupart des serveurs Web (Apache, Unix) sont sensibles à la casse pour les noms de fichiers :
london.jpg n'est pas accessible en tant que London.jpg.
Les autres serveurs Web (Microsoft, IIS) ne sont pas sensibles à la casse :
london.jpg est accessible en tant que London.jpg ou london.jpg.
Si vous utilisez un mélange de majuscules et de minuscules, vous devez être extrêmement cohérent.
Si vous passez d'un serveur insensible à la casse à un serveur sensible à la casse, même de petites erreurs peuvent casser votre site Web.
Pour éviter ces problèmes, utilisez toujours des noms de fichiers en minuscules (si possible).
Performance
Les conventions de codage ne sont pas utilisées par les ordinateurs. La plupart des règles ont peu d'impact sur l'exécution des programmes.
L'indentation et les espaces supplémentaires ne sont pas significatifs dans les petits scripts.
Pour le code en développement, la lisibilité doit être privilégiée. Les scripts de production plus importants doivent être minifiés.