Guide de style JavaScript
Utilisez toujours les mêmes conventions de codage pour tous vos projets JavaScript.
Les conventions de codage sont 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.
Conventions de codage qualité sécurisée:
- Améliorer 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 Infodewi.
Vous devriez également lire le chapitre suivant « Meilleures pratiques » et apprendre à éviter les pièges du codage.
Noms des variables
Chez Infodewi, nous utilisons affaire de chameau pour les noms d’identifiants (variables et fonctions).
Tous les noms commencent par un lettre.
Au bas de cette page, vous trouverez une discussion plus large sur les règles de nommage.
prenom = « Jean » ;
nom de famille = « Biche » ;
prix = 19,90 ;
taxe = 0,20 ;
fullPrice = prix + (prix * taxe);
Espaces autour des opérateurs
Mettez toujours des espaces autour des opérateurs ( = + – * / ), et après les virgules :
Exemples:
soit x = y + z ;
const monTableau = [« Volvo », « Saab »,
« Fiat »];
Indentation du code
Utilisez toujours 2 espaces pour l’indentation des blocs de code :
Les fonctions:
fonction versCelsius(fahrenheit) {
retour (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 voitures = [« Volvo », « Saab »,
« Fiat »];
const personne = {
prénom : « John »,
nom: « Biche »,
âge : 50 ans,
couleur des yeux : « bleu »
} ;
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:
fonction versCelsius(fahrenheit) {
retour (5 / 9) * (fahrenheit – 32);
}
Boucles:
pour (soit i = 0; i < 5; i++) {
x += je ;
}
Conditionnels :
si (temps < 20) {
salutation = « Bonne journée » ;
} autre {
salutation = « Bonsoir » ;
}
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 personne = {
prénom : « John »,
nom: « Biche »,
âge : 50 ans,
couleur des yeux : « bleu »
} ;
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.
Conventions de nommage
Utilisez toujours la même convention de nommage pour tout votre code. Par exemple:
- Noms de variables et de fonctions écrits sous la forme affaire de chameau
- Variables globales écrites en MAJUSCULE (Nous ne le faisons pas, mais c’est assez courant)
- Constantes (comme PI) écrites en MAJUSCULE
Devez-vous utiliser hyp-poules, affaire de chameauou
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) :
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(« Démo »)
const obj = getElementById(« démo »)
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 .html extension (.htm est autorisée).
Les fichiers CSS doivent avoir une .css extension.
Les fichiers JavaScript doivent avoir un .js extension.
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 volumineux doivent être minimisés.
#Guide #style #JavaScript