Aujourd'hui, nous publions une traduction de la prochaine partie du manuel JavaScript. Nous parlons ici du style de code et de la structure lexicale des programmes.
→
Partie 1: premier programme, fonctionnalités linguistiques, normes→
Partie 2: style de code et structure du programme→
Partie 3: variables, types de données, expressions, objets→
Partie 4: caractéristiques→
Partie 5: tableaux et boucles→
Partie 6: exceptions, points-virgules, littéraux génériques→
Partie 7: mode strict, ce mot-clé, événements, modules, calculs mathématiques→
Partie 8: Présentation des fonctionnalités d'ES6→
Partie 9: Présentation des normes ES7, ES8 et ES9
Style de programmation
Un «style de programmation» ou une «norme de codage» ou un «style de code» est un ensemble de conventions utilisées pour écrire des programmes. Ils régissent les caractéristiques de la conception du code et la procédure d'utilisation des constructions ambiguës. Dans notre cas, nous parlons de programmes écrits en JavaScript. Si un programmeur travaille lui-même sur un certain projet, le style de code utilisé par lui représente son «contrat» avec lui-même. Si nous parlons d'une équipe, ce sont des accords qui sont utilisés par tous les membres de l'équipe. Le code écrit en utilisant un certain ensemble de règles rend la base de code d'un projet logiciel uniforme, améliore la lisibilité et l'intelligibilité du code.
Il existe de nombreux guides de style. Voici deux d'entre eux les plus couramment utilisés dans le monde JavaScript:
Vous pouvez très bien choisir l'un d'entre eux ou proposer vos propres règles. La chose la plus importante est d'utiliser systématiquement les mêmes règles lorsque vous travaillez sur un certain projet. De plus, si, par exemple, vous adhérez à un ensemble de règles et que dans un projet existant sur lequel vous devez travailler, vos propres règles sont utilisées, vous devez respecter les règles du projet.
Vous pouvez formater le code manuellement ou utiliser les outils d'automatisation pour ce processus. En fait, le formatage du code JS et sa vérification avant le lancement est un sujet important distinct.
Voici une de nos publications consacrée aux outils pertinents et aux caractéristiques de leur utilisation.
Le style utilisé dans ce guide
L'auteur de ce matériel, à titre d'exemple de son propre guide de style, cite un ensemble de règles qu'il essaie de suivre lors de l'écriture du code. Il dit que le code dans les exemples se concentre sur la dernière version de la norme, disponible dans les versions modernes des navigateurs. Cela signifie que pour exécuter un tel code dans les navigateurs hérités, vous devrez utiliser un transpilateur tel que
Babel . Les transpilers JS vous permettent de convertir du code écrit à l'aide des nouvelles fonctionnalités du langage afin qu'il puisse être exécuté dans des navigateurs qui ne prennent pas en charge ces nouvelles fonctionnalités. Le transpilateur peut prendre en charge des fonctionnalités linguistiques qui ne sont pas encore standard, c'est-à-dire qui ne sont pas implémentées même dans les navigateurs les plus modernes.
Voici une liste des règles en question.
- Alignement. Pour aligner des blocs de code, des espaces sont utilisés (2 espaces pour 1 niveau d'alignement), les tabulations ne sont pas utilisées.
- Point-virgule. Un point-virgule n'est pas utilisé.
- Longueur de ligne 80 caractères (si possible).
- Commentaires d'une ligne. Ces commentaires sont utilisés dans le code.
- Commentaires multilignes. Ces commentaires sont utilisés pour documenter le code.
- Code inutilisé. Le code inutilisé ne reste pas dans le programme commenté au cas où vous en auriez besoin plus tard. Un tel code, s'il est toujours nécessaire, peut être trouvé dans le système de contrôle de version, s'il est utilisé, ou dans quelque chose comme des notes d'un programmeur destiné à stocker un tel code.
- Règles de commentaire. Pas besoin de commenter des choses évidentes, ajoutez des commentaires au code qui ne permettent pas de comprendre son essence. Si le code s'explique grâce à des noms de fonction et de variable bien choisis et à des descriptions JSDoc de fonctions, vous ne devez pas ajouter de commentaires supplémentaires à ce code.
- Déclaration de variable. Les variables sont toujours déclarées explicitement pour éviter la pollution d'un objet global. Le mot clé
var n'est pas utilisé. S'il n'est pas prévu de modifier la valeur d'une variable lors de l'exécution du programme, elle est déclarée sous la forme d'une constante (des constantes similaires sont souvent aussi appelées «variables») à l'aide du mot-clé const , en l'utilisant par défaut - sauf dans les cas où il est prévu de changer la valeur d'une variable. Dans de tels cas, le mot clé let est utilisé. - Constantes Si certaines valeurs du programme sont des constantes, leurs noms sont constitués de lettres majuscules. Par exemple,
CAPS . Un trait de soulignement ( _ ) est utilisé pour séparer les parties de noms constituées de plusieurs mots. - Les fonctions Les déclarations de fonction utilisent la syntaxe des flèches. Les déclarations de fonctions régulières ne s'appliquent que dans des cas particuliers. En particulier, dans les méthodes d'objets ou chez les designers. Cela est dû aux fonctionnalités du
this . Les fonctions doivent être déclarées à l'aide du mot-clé const et, si possible, il est nécessaire de renvoyer explicitement les résultats de leur travail. L'utilisation de fonctions imbriquées n'est pas interdite afin de masquer certains mécanismes auxiliaires du code principal.
Voici un exemple d'une paire de fonctions de flèche simples:
const test = (a, b) => a + b const another = a => a + 2
- Nommer les entités. Les noms des fonctions, des variables et des méthodes des objets commencent toujours par une lettre minuscule, les noms composés de plusieurs mots sont écrits en utilisant un style camel (des noms comme
camelCase ). Seuls les noms des fonctions et des classes constructeurs commencent par une majuscule. Si vous utilisez un cadre qui a des exigences particulières pour nommer les entités, utilisez les règles prescrites par celui-ci. Les noms de fichiers doivent être constitués de lettres minuscules, les mots séparés dans les noms sont séparés par des tirets ( - ). - Règles de construction et de mise en forme des expressions.
si . Voici quelques façons d'écrire une
if conditionnelle:
if (condition) { statements } if (condition) { statements } else { statements } if (condition) { statements } else if (condition) { statements } else { statements }
pour . Pour organiser les boucles, soit la norme
for construct est utilisée, dont un exemple est donné ci-dessous, soit la boucle
for of .
for in .hasOwnProperty() for in doivent être évitées, sauf si elles sont utilisées avec la construction
.hasOwnProperty() . Voici un diagramme de boucle for:
for (initialization; condition; update) { statements }
tout . Voici un exemple schématique d'une
while :
while (condition) { statements }
faire . Voici la structure de la boucle
do :
do { statements } while (condition);
interrupteur . Voici un diagramme de l'
switch conditionnelle de
switch :
switch (expression) { case expression: statements default: statements }
essayez . Voici quelques options de conception pour la construction
try-catch . Le premier exemple montre cette construction sans bloc
finally , le second avec un tel bloc.
try { statements } catch (variable) { statements } try { statements } catch (variable) { statements } finally { statements }
- Espaces . Les espaces doivent être utilisés à bon escient, c'est-à-dire afin qu'ils contribuent à une meilleure lisibilité du code. Ainsi, les espaces sont placés après les mots-clés suivis d'une parenthèse ouvrante, ils sont entourés d'opérateurs qui s'appliquent à deux opérandes (
+ , - , / , * , && et autres). Les espaces sont utilisés à l'intérieur de la boucle for , après chaque point-virgule, pour séparer les parties de l'en-tête de boucle les unes des autres. L'espace est placé après la virgule. - Lignes vides . Les lignes vides marquent des blocs de code contenant des opérations logiquement connectées les unes aux autres.
- Les guillemets . Lorsque vous travaillez avec des chaînes, des guillemets simples (
' ) sont utilisés, plutôt que des guillemets doubles ( " ). Les guillemets doubles se trouvent généralement dans les attributs HTML, donc l'utilisation de guillemets simples permet d'éviter les problèmes lorsque vous travaillez avec des chaînes HTML. Si vous devez effectuer certaines opérations avec des chaînes, ce qui implique , par exemple, leur concaténation, des littéraux de modèle doivent être utilisés, qui sont dessinés à l'aide de backticks ( ` ).
La structure lexicale du code JavaScript
Parlons des blocs de construction du code JavaScript. En particulier, sur l'utilisation du codage Unicode, sur les points-virgules, les espaces, sur la sensibilité de la langue à la casse des caractères, sur les commentaires, sur les littéraux, sur les identifiants et sur les mots réservés.
▍Unicode
Le code JavaScript est représenté à l'aide du codage Unicode. Cela signifie en particulier que dans le code, vous pouvez utiliser, disons, des caractères d'émoticônes comme noms de variables. Pour ce faire, bien sûr, n'est pas recommandé. Il est important ici que les noms des identifiants, soumis à certaines
règles , puissent être écrits dans n'importe quelle langue, par exemple en japonais ou en chinois.
▍ point-virgule
La syntaxe JavaScript est similaire à la syntaxe C. Vous pouvez trouver de nombreux projets dans lesquels, à la fin de chaque ligne, il y a un point-virgule. Cependant, les points-virgules à la fin des lignes en JavaScript sont facultatifs. Dans la grande majorité des cas, vous pouvez vous passer d'un point-virgule. Les développeurs qui, avant JS, utilisaient des langages dans lesquels un point-virgule n'était pas appliqué, ont tendance à les éviter en JavaScript.
Si, lors de l'écriture de code, vous n'utilisez pas de constructions étranges ou si vous ne commencez pas la ligne par une parenthèse ou un crochet, alors dans 99,9% des cas, vous ne ferez pas d'erreur (le cas échéant, le linter peut vous avertir d'une éventuelle erreur). Aux "dessins étranges", par exemple, nous pouvons attribuer ceci:
return variable
L'utilisation ou non d'un point-virgule est une affaire personnelle pour chaque programmeur. L'auteur de ce manuel, par exemple, dit qu'il a décidé de ne pas utiliser de points-virgules là où ils ne sont pas nécessaires, par conséquent, ils sont extrêmement rares dans les exemples donnés ici.
▍ Lacunes
JavaScript ne fait pas attention aux espaces. Bien sûr, dans certaines situations, l'absence d'espace entraînera une erreur (ainsi qu'un espace inapproprié où il ne devrait pas être), mais très souvent il n'y a pas de différence entre l'absence d'un espace dans une certaine partie du programme et la présence d'un ou plusieurs espaces. Une déclaration similaire est vraie non seulement pour les espaces, mais aussi pour les sauts de ligne et pour les tabulations. Cela est particulièrement visible, par exemple, sur un code minifié. Jetez un œil, par exemple, au code transformé avec le
compilateur de fermeture .
En général, il convient de noter que, en formatant le code du programme, il vaut mieux ne pas aller à l'extrême, en respectant un certain ensemble de règles.
▍ Sensibilité à la casse
JavaScript est un langage sensible à la casse. Cela signifie qu'il distingue, par exemple, les noms des variables
something et
Something . Il en va de même pour tous les identifiants.
▍ Commentaires
Vous pouvez utiliser deux types de commentaires en JavaScript. Le premier type est constitué de commentaires sur une seule ligne:
//
Comme leur nom l'indique, ils sont situés sur une seule ligne. Tout ce qui suit les caractères
// est considéré comme un commentaire.
Le deuxième type est constitué de commentaires sur plusieurs lignes:
/* */
Ici, le commentaire est tout ce qui se trouve entre la combinaison des caractères
/* et
*/ .
▍ Littéraux et identifiants
Un littéral est une certaine valeur écrite dans le code source d'un programme. Par exemple, il peut s'agir d'une chaîne, d'un nombre, d'une valeur logique ou d'une structure plus complexe - un objet littéral (vous permet de créer des objets, mis en forme avec des accolades) ou un tableau littéral (vous permet de créer des tableaux, mis en forme à l'aide de crochets). Voici quelques exemples:
5 'Test' true ['a', 'b'] {color: 'red', shape: 'Rectangle'}
Il n'y aura aucun avantage particulier à lancer un programme dans lequel de telles constructions sont rencontrées. Afin de travailler avec des littéraux dans des programmes, ils sont d'abord affectés à des variables ou passés à des fonctions.
Un identifiant est une séquence de caractères qui peut être utilisée pour identifier une variable, une fonction, un objet. Il peut commencer par une lettre, un signe dollar (
$ ) ou un trait de soulignement (
_ ), il peut contenir des chiffres et, si nécessaire, des caractères Unicode comme des émoticônes (bien que, comme déjà mentionné, il vaut mieux ne pas le faire). Voici quelques exemples d'identifiants:
Test test TEST _test Test1 $test
Le signe dollar est couramment utilisé lors de la création d'identificateurs qui stockent des références aux éléments DOM.
▍ Mots réservés
Voici une liste de mots réservés par la langue. Vous ne pouvez pas les utiliser comme identifiants.
breakdoinstanceoftypeofcaseelsenewvarcatchfinallyreturnvoidcontinueforswitchwhiledebuggerfunctionthiswithdefaultifthrowdeleteintryclassenumextendssuperconstexportimportimplementsletprivatepublicinterfacepackageprotectedstaticyield
Résumé
Aujourd'hui, nous avons discuté du style et de la structure des programmes écrits en JavaScript. La prochaine fois, nous parlerons des variables, des types de données, des expressions et des objets.
Chers lecteurs! Quel guide de style JavaScript utilisez-vous?