7 choses à faire et à ne pas faire pour améliorer JavaScript_Conseils Javascript

Avec l'amélioration des performances du navigateur et l'adoption constante de la nouvelle interface de programmation HTML5, le volume de JavaScript sur les pages Web augmente progressivement. Cependant, un code mal écrit peut potentiellement détruire un site Web entier, frustrer les utilisateurs et faire fuir les clients potentiels.
Les développeurs doivent utiliser tous les outils et techniques à leur disposition pour améliorer la qualité de leur code et avoir la certitude que l'exécution est prévisible à chaque fois. C'est un sujet qui me tient à cœur et j'ai travaillé pendant de nombreuses années pour trouver un ensemble d'étapes à suivre dans le processus de développement afin de garantir que seul un code de la plus haute qualité soit publié.
Le simple fait de suivre ces sept étapes améliorera considérablement la qualité de vos projets JavaScript. Grâce à ce flux de travail, les erreurs seront réduites et de nombreux processus seront optimisés, permettant aux utilisateurs d'avoir une expérience de navigation agréable.

01. Appelez d'abord le mode strict d'ECMAScript5 et une déclaration « mode strict » dans votre fonction, et utilisez le modèle de conception du module pour minimiser l'impact global du module de code indépendant du bac à sable dans la fermeture de fonction auto-exécutable. via toutes les dépendances externes, pour garder les variables globales claires et concises. Utilisez uniquement des bibliothèques et des frameworks tiers établis, éprouvés, testés et éprouvés, et gardez vos fonctions petites et séparées des opérations de votre module et de tout autre code de couche de vue.

Les projets plus importants avec plusieurs développeurs doivent suivre un ensemble établi de principes de codage, tels que le guide de style JavaScript de Google, et nécessiter des règles de gestion de code plus strictes, y compris l'utilisation de l'async via une bibliothèque telle que RequireJS, en utilisant la définition de module de gestion des packages (AMD) pour une gestion stricte. gestion des dépendances, utilisez la gestion des emballages Bower ou Jam (outils de gestion de bibliothèque client) pour référencer des versions spécifiques de vos fichiers de dépendance et adoptez des modèles de conception structurels tels que le modèle Observer pour plus de commodité. Communication faiblement couplée entre vos différents modules de code. C'est aussi une bonne idée : utilisez un système de référentiel de code comme Git ou Subversion, sauvegardez votre code dans le cloud, offrez la possibilité de restaurer une version précédente et, via certains services comme Source Code ou Beanstalk, créez des projets plus avancés. une branche de code pour exécuter différentes fonctions et les fusionner avant la fin.

02.Fichier

Utilisez des formats de blocs de commentaires structurés tels que YUIDoc ou JsDoc pour documenter les fonctionnalités, afin que tout développeur puisse comprendre son objectif sans avoir à étudier son code, ce qui réduit les malentendus. Utilisez la syntaxe Markdown pour créer des commentaires et des explications plus riches et plus longs. Utilisez l'outil de ligne de commande associé pour générer automatiquement une documentation du site : à partir de ces commentaires structurels, elle est cohérente avec le dernier état des modifications apportées à votre code.

03. Analyse des performances passées

Exécutez régulièrement un outil d'analyse de code statique tel que JSHint ou JSLint sur votre code. Ceux-ci vérifient les défauts de codage connus et les erreurs potentielles, telles que l’oubli d’utiliser le mode strict ou le référencement à des variables non déclarées, ainsi que les parenthèses ou les points-virgules manquants. Contrôles d'outils pour corriger tout problème afin d'améliorer la qualité de votre code. Essayez de définir des options par défaut pour votre équipe de projet afin d'appliquer les normes de codage, telles que l'indentation de chaque ligne par des espaces, l'endroit où placer les accolades et le nombre de guillemets simples ou doubles utilisés dans le fichier de code.

04.Test

Un test unitaire est une petite fonctionnalité indépendante qui exécute l'une des fonctions de votre base de code principale avec des entrées spécifiques pour confirmer qu'elle génère une valeur attendue. Pour augmenter votre confiance dans le fait que le code se comportera comme prévu, écrivez des tests unitaires à l'aide d'un framework tel que Jasmine ou QUnit pour chaque fonction, avec des paramètres d'entrée attendus et inattendus. Mais n’oubliez pas ces cas extrêmes

L'exécution de ces tests sur plusieurs navigateurs sur plusieurs systèmes d'exploitation, en tirant parti d'un service tel que BrowserStack ou Sauce Labs, vous permet d'accélérer les tests à la demande des machines virtuelles dans le cloud. Ces deux services fournissent une API qui permet à vos tests unitaires d'être automatiquement exécutés simultanément sur plusieurs navigateurs, et les résultats vous seront renvoyés une fois terminés. En prime, si votre code est stocké sur GitHub, vous pouvez profiter de BrowserSwarm, un outil qui exécute automatiquement vos tests unitaires lorsque vous validez votre code.

05. Mesure

Les outils de couverture de code comme Istanbul mesurent quelles lignes de code ont été exécutées lorsque vos tests unitaires ont été exécutés sur vos fonctions, en les rapportant en pourcentage du total des lignes de code. L'exécution d'un outil de couverture de code sur vos tests unitaires et l'ajout de tests supplémentaires peuvent augmenter votre score de couverture à 100 %, vous donnant ainsi une plus grande confiance dans votre code.
La complexité d'une fonction peut être mesurée à l'aide de la métrique de complexité de Halsted : une équation développée par l'informaticien Maurice Halsted dans les années 1970. La complexité d'une fonction est mesurée en termes de boucles, de branches et d'itérations de fonctions contenues pour quantifier : Fonction. la complexité peut être mesurée à l'aide de la mesure de complexité de Halstead. Lorsque ce score de complexité est réduit, il devient plus facile pour nous de comprendre et de maintenir la fonction, réduisant ainsi le risque d'erreur. L'outil de ligne de commande PLATO mesure et génère des visualisations de la complexité du code JavaScript, aidant à identifier les fonctionnalités qui peuvent être améliorées, tout en stockant les résultats précédents, permettant ainsi de suivre les progrès de la qualité au fil du temps.

06. Automatisation

Utilisez un exécuteur de tâches tel que Grunt pour automatiser le processus de documentation, d'analyse, de test, de couverture et de génération de rapports de complexité, ce qui vous fera gagner du temps et des efforts et augmentera vos chances de résoudre les problèmes de qualité qui surviennent. La plupart des outils et frameworks de test présentés dans cet article sont associés à Grunt, ce qui peut vous aider à améliorer votre flux de travail et la qualité de votre code sans avoir à lever le petit doigt.

07.Gérer les exceptions

Invariablement, à un moment donné, votre code générera une erreur lors de son exécution. Utilisez les instructions "try...catch" pour gérer les erreurs d'exécution de manière appropriée et limiter l'impact du comportement sur votre site. Utilisez un service réseau pour enregistrer les erreurs d’exécution. Et utilisez ces informations pour ajouter de nouveaux tests unitaires afin d'améliorer votre code et d'éliminer ces bugs un par un.

Les étapes du succès

Ces sept étapes m'ont aidé à créer certains des codes dont je suis le plus fier dans ma carrière jusqu'à présent. Ils constituent également une excellente base pour l’avenir. Engagez-vous à suivre ces étapes pour produire du code JavaScript de haute qualité dans vos propres projets, et travaillons ensemble pour améliorer le Web, une étape à la fois sur votre chemin vers le succès.