Avec l'amélioration des performances du navigateur et l'adoption régulière de la nouvelle interface de programmation HTML5, le volume de JavaScript sur les pages Web augmente progressivement. Cependant, un programme mal écrit a le potentiel de briser l'intégralité du site Web, de frustrer les utilisateurs et de chasser les clients potentiels.
Les développeurs doivent utiliser tous les outils et techniques qu'ils peuvent utiliser pour améliorer la qualité de leur code et être convaincus que chaque exécution est prévisible. C'est un sujet au plus profond de mon cœur et j'ai travaillé pendant des années pour trouver un ensemble d'étapes à suivre pendant le processus de développement pour s'assurer que seul le code de la plus haute qualité peut être publié.
Suivez simplement ces sept étapes pour améliorer considérablement la qualité de votre projet JavaScript. Avec ce flux de travail, les erreurs seront réduites et de nombreuses optimisations de traitement seront faites, offrant aux utilisateurs une expérience de navigation agréable.
01. Code
Tout d'abord, appelez le mode strict d'Ecmascript5 et une déclaration "mode stricte" dans votre fonction et utilisez le mode de conception de ce module. Dans la fermeture de la fonction auto-exécutée, l'utilisation de variables globales doit être minimisée via le module de code indépendant de bac à sable et via toutes les dépendances externes pour garder le module de variable global clair et concis. Utilisez uniquement la bibliothèque et les cadres tiers établis, éprouvés, bien testés et bien résultés, et gardez vos fonctions à une petite valeur, en séparant toute logique ou données commerciale de vos opérations de module et d'autres code de couche de vue.
Des projets plus importants avec plusieurs développeurs devraient suivre un ensemble de principes de codage établis, tels que le guide de style JavaScript de Google, et nécessiter des règles de gestion de code plus solides, y compris la gestion stricte des dépendances via une bibliothèque telle que les exigences, en utilisant la gestion des packages en utilisant Communication couplée entre différents modules de code. Il s'agit également d'une idée sage: utilisez un système de systèmes de référentiel de code, tels que Git ou Subversion, pour faire sauvegarder votre code dans le cloud via certains services tels que le code source ou les beans magiques, offrez la possibilité de restaurer les versions précédentes et de créer une branche de code pour des projets plus avancés pour effectuer différentes fonctions, les fusionner avant de les terminer.
02. Fichier
Utilisez des formats de blocs d'annotation structurés comme Yuidoc ou JSDOC à la fonctionnalité du fichier, afin que tout développeur puisse comprendre son objectif sans étudier son code, ce qui peut réduire les malentendus. L'utilisation de la syntaxe de Markdown peut avoir des commentaires et des explications plus riches et longs. Utilisez l'outil de ligne de commande associé pour générer automatiquement un document sur le site Web: en fonction de ces opinions structurelles, elle est cohérente avec toutes les modifications apportées dans votre code.
03. Analyse de piste
Exécutez régulièrement un outil d'analyse de code statique sur votre code, comme Jshint ou JSlint. Ces vérifications sur les défauts de codage connus et les erreurs potentielles, telles que l'oubli d'utiliser des modèles stricts ou de référencer les variables non déclarées, et les supports ou les demi-colons manquants. Corrigez tout problème de contrôle des outils pour améliorer la qualité de votre code. Essayez de définir les options par défaut pour que votre équipe de projet améliore les normes de codage telles que l'indentation de chaque ligne par des espaces, où placer des accolades bouclées et l'utilisation de devis uniques ou doubles dans le fichier de code.
04. Test
Un test unitaire est l'une des fonctions effectuées par une petite fonction indépendante: exécutez l'une des fonctions de la base de code principale de votre entrée spécifique pour confirmer qu'il publie une valeur attendue. Pour accroître votre confiance, le code écrira des cadres utilisés comme prévu, tels que le jasmin ou le QUnit pour chaque test unitaire fonctionnel, en utilisant des paramètres d'entrée attendus et imprévus. Mais n'oubliez pas ces situations de bord!
Exécutez ces tests sur plusieurs navigateurs sur plusieurs systèmes d'exploitation, vous permettant d'accélérer des tests sur des machines virtuelles dans le cloud dans vos exigences en tirant parti de ce service, tels que Browserstack ou Sauce Labs. Ces deux services fournissent une API qui permet à vos tests unitaires d'être automatiquement exécutés sur plusieurs navigateurs en même temps, et une fois qu'ils seront terminés, ils vous rendront les résultats. En prime, si votre code est stocké sur GitHub, vous pouvez prendre Browserswarm, un outil qui exécutera automatiquement vos tests unitaires lorsque vous soumettez votre code.
05. Mesure
Des outils de couverture de code tels que Istanbul mesurent quelles lignes de code sont exécutées lorsque votre test unitaire est exécuté sur votre fonction, le signalant en pourcentage du nombre total de 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%, ce qui vous donne une plus grande confiance dans votre code.
La complexité d'une fonction peut être mesurée à l'aide de la métrique de la complexité de Hallstead: l'équation établie par l'informaticien Morris Hallstead dans les années 1970. La complexité d'une fonction est quantifiée en fonction des boucles, des branches et la fonction des appels contient: la complexité d'une fonction peut être mesurée en utilisant les mesures de complexité de Halstead. Lorsque ce score complexe diminue, plus il est facile de comprendre et de maintenir cette fonction, réduisant la possibilité d'erreurs. La visualisation des données générées des mesures de l'outil de ligne de commande Platon et de la complexité de code JavaScript aide à déterminer les fonctionnalités qui peuvent être améliorées tout en stockant les résultats précédents, permettant le suivi des améliorations de la qualité au fil du temps.
06. Automatisation
Utilisez des coureurs de tâches tels que Grunt pour utiliser automatiquement le processus de compilation de fichiers, d'analyse, de test, de couverture et de génération de rapports de complexité, ce qui vous fait gagner du temps et des efforts et augmente vos chances de résoudre les problèmes de qualité qui se posent. La plupart des outils et des frameworks de test mis en évidence dans cet article sont associés à un grognement, ce qui peut vous aider à améliorer la qualité de votre flux de travail et de votre code sans avoir à déplacer un doigt.
07. Gérer les exceptions
Dans le même temps, à un moment donné, votre code aura une erreur lors de son exécution. Utilisez l'instruction "Try… Catch" pour gérer correctement les erreurs d'exécution et l'impact de la limitation du comportement sur votre site Web. Utilisez un service réseau pour enregistrer les erreurs qui se produisent lors de l'exécution. Et utilisez ces informations pour ajouter de nouveaux tests unitaires pour améliorer votre code et éliminer ces erreurs une par une.
Étapes du succès
Ces sept étapes m'aident à créer une partie du code dont je suis le plus fier dans ma carrière jusqu'à présent. Ils sont également une bonne base pour l'avenir. Dans votre propre projet, nous promettons d'utiliser ces étapes pour produire du code JavaScript de haute qualité, afin que nous puissions travailler ensemble pour améliorer le réseau et conduire au succès étape par étape.