Style de codage JavaScript

Ce style de codage JavaScript est l'ensemble des conventions que j'utilise quotidiennement lorsque j'utilise JavaScript. C'est un document en direct, avec le principal ensemble de règles que je suis

Chaque langue a un ensemble de règles en matière de syntaxe.

Au début, certaines personnes peuvent ajouter du code dans un fichier suivant sans enfreindre les règles de langage, mais sans prêter attention et attention à la programmationstyle.

Non pas parce qu'ils ne se soucient pas du style, ils ne sont pas assez expérimentés pour reconnaître son importance.

Je crois vraiment que la programmation est un métier. Comme la peinture, l'artisanat du bois ou tout ce qui implique de la créativité, nos programmes peuvent faire beaucoup de choses, mais ils doivent le faire avec style.

Nous avons des règles valables dans tous les langages de programmation.

Un style de codage est unaccord avec vous-même et votre équipe, pour garder la cohérence sur un projet.

Si vous n'avez pas d'équipe, c'est unaccord avec vous, pour toujours garder votre code conforme à vos normes.

Avoir des règles fixes sur votre format d'écriture de code aide beaucoup pour avoir uncode plus lisible et géré.

Il y en a quelques-uns autour, voici les 2 plus courants dans leJavaScriptmonde:

C'est à vous d'en suivre un, ou de créer votre propre guide de style.

Soyez cohérent avec le projet sur lequel vous travaillez

Même si vous préférez un ensemble de styles, lorsque vous travaillez sur un projet, vous devez utiliser ce style de projet.

Un projet Open Source sur GitHub peut suivre un ensemble de règles, un autre projet sur lequel vous travaillez avec une équipe peut suivre un tout autre projet.

Plus jolieest un outil génial qui applique le formatage du code, utilisez-le.

Mes propres préférences

Ma propre vision du style JavaScript est:

Utilisez toujours la dernière version ES. Utilisez Babel si la prise en charge d'un ancien navigateur est nécessaire.

Échancrure: utilisez des espaces au lieu de tabulations, indentez en utilisant 2 espaces.

Les points-virgules: n'utilisez pas de points-virgules.

Longueur de la ligne: essayez de couper les lignes à 80 caractères, si possible.

Commentaires en ligne: utilisez des commentaires en ligne dans votre code. Utilisez les commentaires de bloc uniquement pour documenter.

Pas de code mort: Ne laissez pas l'ancien code commenté, «juste au cas où» il sera utile plus tard. Ne gardez que le code dont vous avez besoin maintenant, le contrôle de version / votre application de notes est fait pour cela.

Ne commentez que lorsque cela est utile: N'ajoutez pas de commentaires qui n'aident pas à comprendre ce que fait le code. Si le code s'explique par l'utilisation de bons noms de variables et de fonctions et de commentaires de fonction JSDoc, n'ajoutez pas de commentaire.

Déclarations de variables: déclarez toujours des variables pour éviter de polluer l'objet global. Ne jamais utiliservar. Par défaut àconst, seule utilisationletsi vous réaffectez la variable.

Les fonctions: utilisez les fonctions fléchées sauf si vous avez une raison spécifique d'utiliser des fonctions régulières, comme dans les méthodes objet ou les constructeurs, en raison de la façon dontthistravaux. Déclarez-les comme const et utilisez des retours implicites si possible.

const test = (a, b) => a + b

const another = a => a + 2

N'hésitez pas à utiliser des fonctions imbriquées pour masquer les fonctions d'assistance au reste du code.

Noms: les noms de fonctions, les noms de variables et les noms de méthodes commencent toujours par une lettre minuscule (sauf si vous les identifiez comme privés, lisez ci-dessous), et sont en camelCased. Seules les fonctions constructeur et les noms de classe doivent commencer en majuscules. Si vous utilisez un framework qui nécessite des conventions spécifiques, modifiez vos habitudes en conséquence. Les noms de fichiers doivent tous être en minuscules, avec des mots séparés par-.

Formats et règles spécifiques aux déclarations:

si

if (condition) {
  statements
}

if (condition) { statements } else { statements }

if (condition) { statements } else if (condition) { statements } else { statements }

pour

Initialisez toujours la longueur dans l'initialisation pour la mettre en cache, ne l'insérez pas dans la condition.

Évitez d'utiliserfor insauf avec utilisé en conjonction avec.hasOwnProperty(). Préférerfor of(voirBoucles JavaScript)

for (initialization; condition; update) {
  statements
}

tandis que

while (condition) {
  statements
}

fais

do {
  statements
} while (condition);

changer

switch (expression) {
  case expression:
    statements
  default:
    statements
}

essayer

try {
  statements
} catch (variable) {
  statements
}

try { statements } catch (variable) { statements } finally { statements }

Espace blanc: utilisez judicieusement les espaces pour améliorer la lisibilité: mettez un espace après un mot-clé suivi d'un(; avant et après une opération binaire (+,-,/,*,&&..); à l'intérieur de l'instruction for, après chaque;séparer chaque partie de la déclaration; après chaque,.

Nouvelles lignes: utilisez de nouvelles lignes pour séparer les blocs de code qui effectuent des opérations liées logiquement.

Devisprivilégier les guillemets simples'au lieu de guillemets doubles". Les guillemets doubles sont une norme dans les attributs HTML, donc l'utilisation de guillemets simples permet de résoudre les problèmes liés aux chaînes HTML. Utilisationlittéraux de modèlele cas échéant au lieu d'une interpolation variable.

Téléchargez mon gratuitManuel du débutant JavaScript


Plus de tutoriels js: