Pourquoi j'utilise un guide de style JavaScript et pourquoi vous devriez aussi

Points clés

• Les guides de style JavaScript à broder tels que le style standard JavaScript aident à réduire le frottement de l'équipe, à améliorer le bonheur des programmeurs et à assurer la cohérence du code.
• Le codage avec des styles de langues traditionnels tels que JavaScript facilite la contribution des projets open source et permettent aux autres contribuer à vos projets.
• Les guides de style ne rendent pas nécessairement le programme plus correct, mais il peut attraper des erreurs avant que les erreurs ne soient publiées, ce qui rend le code plus facile à lire et à comprendre, et à empêcher les désaccords entre les membres de l'équipe.
• La mise en œuvre du style standard JavaScript peut être effectuée sans aucun outil, mais il existe des packages NPM qui peuvent être utilisés dans le code JavaScript et les plug-ins de Text Editor pour aider à appliquer les styles.

Jetons un coup d'œil au style standard JavaScript de @Feross, un guide de style JavaScript plus populaire. Cela peut vous aider à réduire le frottement de l'équipe et à améliorer le bonheur des programmeurs.

Il s'agit d'un ensemble de règles qui rendent le code JavaScript plus cohérent et empêchent les discussions ennuyeuses sur les avantages et les inconvénients des onglets et des espaces. C'est l'un des nombreux styles que vous pouvez prendre et entre dans la même catégorie que les autres liners JavaScript tels que JSlint, Jshint et Eslint. Si vous n'êtes pas sûr de ce qu'est Linter ou pourquoi vous en avez besoin, consultez notre comparaison des outils de liaison JavaScript.

L'importance du style

Si vous écrivez du code depuis un certain temps, vous développerez sans aucun doute le style que vous aimez. Cela se produit lorsque vous écrivez un modèle spécifique des centaines ou des milliers de fois, et que vous commencez à trouver votre codage esthétique. Soudain, d'autres sont venus et ont commencé à placer des supports dans des endroits étranges et à laisser des espaces à la fin de la ligne. Un texte peut être nécessaire. Prendre une profonde inspiration, la façon dont vous placez des supports ou des espaces sélectionnés ne rendra pas votre programme plus correct, ce qui est une préférence personnelle

personnelle.

Chaque langage de programmation a un style grand public

, et parfois comme Python, le guide de style officiel est présenté comme une méthode

Correct pour écrire des programmes. Attendez, dites-vous que l'indentation est 4 espaces ? Le codage avec le style grand public de la langue aidera votre programme à s'adapter à l'écosystème de la langue. Si vous êtes familier et d'accord au début, vous trouverez également plus facile de contribuer aux projets open source et de laisser les autres contribuer à votre projet.

JavaScript n'a pas de guide de style officiel, et peut-être qu'une norme de facto apparaît dans "Excellente partie" de Douglas Crockford. Son livre propose un moyen d'écrire des programmes JavaScript fiables, et il met l'accent sur les fonctionnalités que nous devons éviter activement. Il a publié JSLINT pour soutenir ces opinions, et d'autres liners ont emboîté le pas. La plupart des liners sont très configurables, vous pouvez choisir le style qui vous convient le mieux, et mieux encore, l'appliquez à d'autres! Le style standard JavaScript est différent. Votre style préféré est rien , il est important de choisir un style que tout le monde peut comprendre et utiliser.

Adopter un style standard signifie mettre l'importance de la clarté du code et des normes de la communauté au-dessus du style personnel. Cela peut ne pas avoir de sens pour 100% de la culture du projet et du développement, mais l'open source peut être un endroit hostile pour les débutants. Construire des attentes claires et automatisées des contributeurs rendra le projet plus sain.

Si vous écrivez un programme pour vous-même, dont personne n'a besoin de participer à la contribution, utilisez les outils et les styles qui vous rendent le plus heureux. Lorsque vous travaillez dans une équipe, vous devez toujours minimiser la friction, rester professionnel et ne pas vous soucier des petites choses.

Veuillez prendre le temps d'apprendre les styles des bases de code existantes avant d'introduire vos propres styles.

JavaScript Standard Style

• 2 espaces - pour l'indentation
• Les chaînes utilisent des citations simples - sauf pour éviter d'évaluer
• pas de variables inutilisées - cela peut attraper beaucoup d'erreurs !
• pas de point-virgule
• Ne commencez pas par (, [ou `
• Il y a des espaces après le mot clé si (condition) {...}
• Il y a de l'espace après le nom de la fonction Nom de la fonction (arg) {...}
• Utilisez toujours === au lieu de == - mais permettez à obj == de vérifier null || Undefined.
• Gérer toujours Node.js Err Fonction Paramètres
• Ajoutez toujours un préfixe de fenêtre aux variables globales du navigateur - mais le document et le navigateur peuvent
  • empêche l'utilisation accidentelle de variables globales du navigateur mal nommées telles que l'ouverture, la longueur, l'événement et le nom.

Afficher la liste complète des règles

La règle la plus controversée est sans aucun doute l'absence d'un point-virgule. Pendant des années, les gens ont pensé que les demi-colons devraient toujours être pour éviter les erreurs, Crockford a fait beaucoup d'efforts pour promouvoir cela, mais il a également des racines profondes en C, où les demi-colons sont strictement requis, sinon le programme ne sera pas capable de courir.

Le style standard JavaScript a changé mon point de vue à ce sujet, sans semicolon javascript est bon.

L'insertion automatique des demi-finales est une caractéristique

de JavaScript, qui réduit le bruit et simplifie le programme, je n'ai jamais rencontré d'erreur en raison de l'absence d'un point-virgule, je ne crois pas que vous le rencontrerez aussi. Pour plus d'informations à ce sujet, voir le point-virgule nécessaire en JavaScript?

Tout le monde n'est pas d'accord, et les célèbres branches semi-baisées et le bonheur restaurent fortement le point-virgule. Je trouve ces branches un peu regrettables car elles semblent manquer le sens total de la norme.

Je ne suis pas d'accord avec la règle X, pouvez-vous la changer?

non. L'objectif de la norme est d'éviter les débats inutiles sur les styles. Il existe de nombreux débats sur Internet sur les onglets et les espaces, etc., et ces débats ne seront jamais résolus. Ces arguments ne feront que distraire et ne pourraient pas terminer les travaux. En fin de compte, vous devez «sélectionner seulement quelque chose», et c'est toute la philosophie de la norme - c'est un tas de perspectives sages «sélectionner seulement quelque chose». Espérons que les utilisateurs pourront voir la valeur de cela, plutôt que de défendre leurs propres opinions.

Personnellement, je me suis habitué au codage sans point-virgule, c'est peut-être parce que j'ai pris le temps d'écrire Ruby, Python et CoffeeScript, qui nécessitent moins de syntaxe. Quelle que soit la raison, j'ai trouvé le programme plus clair lorsqu'il y avait moins de contenu à voir.

Excellent niveau de programme de Mark

Les programmeurs doivent prêter attention:

1. Responsabilité
2. lisibilité
3. bonheur
4. Efficacité

Il s'avère que l'adoption d'un guide de style comme Standard peut apporter des avantages dans tous ces aspects.

Responsabilité

Pour jouer n'importe quel rôle, le programme doit être exécuté comme vous l'intendez et sans erreurs. Les styles ne rendront pas le programme plus correct, mais Linter peut attraper des erreurs avant que les erreurs ne soient publiées.

lisibilité

En tant que développeur professionnel, la lisibilité du code est la chose la plus importante en plus de fournir un programme efficace. Il faut beaucoup plus d'efforts pour lire et essayer de comprendre un programme que d'écrire, alors optimisez pour votre futur moi et d'autres qui hériteront de votre code. Les styles clairs et prévisibles rendent le code plus facile à lire et à comprendre.

Sense du bonheur du programmeur

Ce que j'aime le plus dans cet aspect, c'est qu'il se concentre sur les gens plutôt que sur les machines. Il se classe au troisième rang de la liste simplement parce que le besoin de l'équipe de code fonctionnel lisible devrait avoir la priorité sur notre propre bonheur, mais cela ne signifie pas que cela se fera au détriment du bonheur.

Vous voulez profiter de la vie, n'est-ce pas? Si vous pouvez faire le travail rapidement et que le travail est amusant, c'est super, n'est-ce pas? Cette partie est le but de la vie. Votre vie est meilleure.

- Matsumoto yuhiro

La vie est courte, ne vous inquiétez pas des différences de préférences personnelles, établissez une norme et passez à autre chose. Si les styles standard empêchent les désaccords et les frictions parmi les membres de l'équipe, vous serez plus heureux à cause de cela.

Efficacité

le dernier point, mais non le moindre.

Si vous devez peser l'un de ces points, vous devez valoriser la correction, lisible et rendre les gens heureux

que

Code rapide.

L'ordinateur est très rapide. Si le programme est suffisamment efficace, il n'y a pas de problème. Si vous remarquez de mauvaises performances, alors prenez le temps de trouver des goulots d'étranglement et rendez le code plus efficace.

Les humains sont très lents. Il est plus utile d'améliorer notre efficacité. La clarté acquise en adoptant les styles standard facilite votre code et s'engage dans les contributions. Le temps passé en désaccord a également été considérablement réduit, ce qui est très populaire.

Implémentez le style standard JavaScript

Vous pouvez adopter des normes sans aucun outil, il suffit de lire les règles et de noter les différentes règles. Essayez-le pendant une semaine et voyez si vous l'aimez. Si vous ne l'aimez pas, continuez à l'utiliser!

Il existe également un package NPM pour Lint votre code JavaScript.

<code>npm install standard --global</code>

L'exécution standard exécutera tous les fichiers JavaScript dans le répertoire via Linter.

De plus, tous les éditeurs communs ont des plugins d'éditeur de texte, voici comment installer Linter dans Atom.

<code>apm install linter
apm install linter-js-standard</code>

Personnellement, je trouve le programme de peluches automatique lorsque le tapage est très distrayant. Si vous ressentez la même chose, vous préférez peut-être utiliser ces liners après avoir terminé votre travail. La commande standard a également un drapeau qui corrige automatiquement certaines erreurs de style, ce qui peut vous faire gagner du temps.

<code>standard --fix</code>

Utilisation du style standard JavaScript

devriez-vous adopter un style standard? Eh bien, tout dépend de vous.

Si vous n'avez pas de guide de style, alors soyez prêt à faire face aux conflits d'opinion.

Si vous avez perfectionné votre ensemble de règles idéal et que vous souhaitez l'appliquer tout au long de votre base de code, Eslint peut être ce que vous recherchez.

Si vous préférez ne pas perdre votre temps sur ces détails ennuyeux de la syntaxe, essayez le style standard JavaScript et dites-nous ce que vous pensez dans les commentaires ci-dessous.

FAQ sur le guide de style JavaScript

Pourquoi est-il important d'utiliser le guide de style JavaScript?

Le guide de style JavaScript est un ensemble de normes que les développeurs suivent lors de la rédaction du code JavaScript. Il garantit la cohérence, la lisibilité et la maintenabilité du code. Lorsque plusieurs développeurs travaillent sur un seul projet, il est crucial qu'ils suivent tous le même guide de style pour éviter la confusion et rendre le code plus facile à comprendre et à déboguer. Il aide également à réduire la possibilité d'erreurs et de vulnérabilités dans le code.

Comment styliser des éléments HTML à l'aide de JavaScript?

Vous pouvez utiliser JavaScript pour styliser des éléments HTML en accédant à l'attribut de style de l'élément. Par exemple, si vous avez un élément avec "Myelement" ID, vous pouvez changer sa couleur d'arrière-plan en rouge, comme ainsi: document.getElementById ("myelement"). style.backgroundColor = "Red"; Cela applique le style CSS directement à l'élément.

Quels sont les guides de style JavaScript communs couramment utilisés par les développeurs?

Certains des guides de style JavaScript les plus courants utilisés par les développeurs incluent le guide de style JavaScript d'Airbnb, le guide de style JavaScript de Google et StandardJS. Ces guides fournissent des règles pour la syntaxe, le formatage et les meilleures pratiques pour s'assurer que le code est propre, cohérent et facile à lire.

Comment appliquer le guide de style JavaScript dans mon projet?

Vous pouvez appliquer les guides de style JavaScript dans votre projet à l'aide de liners comme Eslint. Linter est un outil qui analyse votre code pour trouver des erreurs potentielles et des violations de votre guide de style. Vous pouvez configurer Eslint pour suivre les règles du guide de style de votre choix, et il vous avertit lorsque votre code viole ces règles.

Puis-je créer mon propre guide de style JavaScript?

Oui, vous pouvez créer votre propre guide de style JavaScript. Cependant, il est souvent plus efficace d'utiliser des guides de style existants que la communauté a testés et vérifiés. Si vous avez des besoins spécifiques qui ne sont pas couverts par des guides de style existants, vous pouvez créer vos propres règles et les ajouter à votre configuration de linter.

Quelle est la différence entre les styles en ligne et les styles externes en JavaScript?

Les styles en ligne sont appliqués directement aux éléments HTML à l'aide de l'attribut de style, tandis que les styles externes sont définis dans des fichiers CSS distincts et liés à des documents HTML. Bien que les styles en ligne soient très pratiques pour les petits projets ou les solutions rapides, pour les grands projets, les styles externes sont souvent préférés car ils peuvent améliorer la réutilisabilité et la séparation des préoccupations.

Comment utiliser JavaScript pour supprimer les styles des éléments HTML?

Vous pouvez utiliser JavaScript pour supprimer les styles des éléments HTML en définissant l'attribut de style à une chaîne vide. Par exemple, pour supprimer la couleur d'arrière-plan d'un élément avec «myélement» d'identification, vous pouvez effectuer ce qui suit: document.getElementById ("myelement"). style.backgroundColor = ""; Cela supprimera le style en ligne de l'élément.

Quels sont les avantages de l'utilisation de Linter avec le guide de style JavaScript?

Utilisation de Linter avec le guide de style JavaScript peut vous aider à attraper des erreurs et des incohérences avant de devenir des problèmes. Il peut également vous aider à rédiger un code plus propre et plus facile à lire en appliquant les meilleures pratiques et les règles de style. De plus, il peut vous faire gagner du temps en réparant automatiquement certains types d'erreurs et des problèmes de formatage.

Comment utiliser JavaScript pour appliquer plusieurs styles aux éléments HTML?

Vous pouvez utiliser JavaScript pour appliquer plusieurs styles aux éléments HTML en définissant plusieurs propriétés de style. Par exemple, pour définir la couleur d'arrière-plan et la taille de la police d'un élément avec «myélement» ID, vous pouvez effectuer ce qui suit: var elem = document.getElementById ("myelement"); elem.style.backgroundColor = "Red"; elem.style.fontize = "20px"; Cela applique les deux styles à l'élément.

Puis-je utiliser JavaScript pour styliser des pseudo-éléments?

Non, JavaScript ne peut pas dire directement les pseudo-éléments tels que :: avant et :: After. Ceux-ci font partie de la spécification CSS et ne peuvent être utilisés que pour le coiffer. Cependant, vous pouvez ajouter ou supprimer des classes aux éléments à l'aide de JavaScript, et ces classes peuvent avoir des styles liés aux pseudo-éléments dans votre CSS.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!