Avec l'émergence d'applications Web frontales riches, les développeurs doivent réexaminer et prêter attention aux capacités et à l'utilisation du langage JavaScript, abandonnant le modèle antérieur consistant à simplement « copier/coller » des scripts courants pour effectuer des tâches frontales simples. . Le langage JavaScript lui-même est un langage de script faiblement typé avec des restrictions plus souples que le langage C++ ou Java. Toutes les idées de programmation fonctionnelle centrées sur les fonctions offrent également aux développeurs des implémentations de syntaxe plus flexibles. Cependant, si cette flexibilité apporte de l’efficacité, elle devient également un cauchemar pour les développeurs JavaScript débutants ou inexpérimentés. Différents styles de codage et comportements erronés du code ont sérieusement affecté la lisibilité et la stabilité du code global et sont devenus l'un des problèmes les plus courants dans les projets Web.
Par conséquent, nous avons besoin d'un outil efficace de qualité du code JavaScript afin de pouvoir découvrir et corriger rapidement les problèmes cachés dans le code JavaScript et garantir la qualité de la livraison du code. En tant qu'outil d'inspection de la qualité du code JavaScript flexible et efficace, JSLint permet aux utilisateurs de spécifier des conventions de style de codage qui répondent à leurs besoins spécifiques de développement d'applications, rendant ainsi l'ensemble du projet unifié dans son style. Cette méthode de travail basée sur des « règles » (options) rend JSLint applicable. pour différents besoins de détection de code. Cet article présentera d'abord aux lecteurs les concepts et fonctions de base de JSLint, expliquera sa méthode de travail basée sur des règles, puis illustrera son utilisation de base à travers un exemple. Enfin, il présentera comment intégrer JSLint dans le processus d'application d'Ant et d'Eclipse. pour démontrer tous les aspects. Comment utiliser JSLint dans les tâches de développement quotidiennes.
Qu'est-ce que JSLint
En tant que langage jeune avec une syntaxe flexible et des exigences de format relativement lâches, JavaScript présente des formats de code déroutants et une utilisation incorrecte de certaines fonctionnalités du langage, ce qui entraîne souvent que le produit final livré contient de nombreuses erreurs imprévues causées par des comportements ou des erreurs de style de codage. les problèmes habituels ne sont pas signalés et corrigés à temps, ils réapparaîtront souvent au cours du processus d'itération du projet, affectant sérieusement la stabilité et la sécurité des produits Web. JSLint est un outil créé par Douglas Crockford pour résoudre de tels problèmes. En plus de signaler ces conventions déraisonnables, JSLint peut également signaler des problèmes structurels. Bien que JSLint ne puisse pas garantir que la logique du code est correcte, il peut aider à détecter les erreurs et enseigner aux développeurs de bonnes pratiques de codage. Il convient de mentionner que l'outil JSLint lui-même est également un morceau de code JavaScript. Il s'agit d'un script JavaScript qui vérifie la qualité du code JavaScript. L'inspection qualité des scripts JavaScript par JSLint comprend principalement les aspects suivants :
• Détecter les erreurs de syntaxe : par exemple, une association incorrecte des accolades "{}".
•Spécifications de définition de variables : telles que la détection de variables non définies.
•Spécifications du format du code : par exemple, le point-virgule manquant à la fin de la phrase.
• Détection d'utilisation de fonctionnalités de langage merdiques : restrictions d'utilisation telles que eval et with.
La mise à jour de la version de JSLint était active au moment de la rédaction de cet article, la dernière version de JSLint a été publiée le 10/10/2010. De nombreux éditeurs de code grand public offrent une bonne prise en charge étendue de JSLint, notamment Eclipse, VS2008, etc.
Actuellement, il existe de nombreux outils de détection de code JavaScript avec des fonctions similaires à JSLint, notamment : YUI Test, Firebug, MS Script Debugger, CompanionJS, etc. La plupart d'entre eux existent sous la forme de plug-ins de navigateur dans le navigateur client pour exécuter JavaScript. La différence importante entre JSLint et ces outils est qu'il accorde plus d'attention à la détection et au débogage des formats de code statiques, ce qui est exactement ce qui est nécessaire et préconisé pour une construction continue dans le développement agile actuel.
Comprendre les règles JSLint
Le principe de base de l'inspection de la qualité du code de JSLint réside dans l'ensemble de règles définies par l'utilisateur. L'ensemble de règles fourni par JSLint contient les styles de développement que les développeurs Web ont accumulés au fil des années et les considèrent comme mauvais. Nous pouvons choisir de construire un ensemble de règles spécifique en fonction des besoins de nos propres projets. JSLint analysera les scripts JavaScript basés sur ceux-ci et fournira les informations de description du problème correspondantes. Les règles se présentent sous la forme de plusieurs ensembles de paires clé-valeur : [param:option], avec le nom de la règle comme clé et si la règle est appelée ou non comme valeur. Par exemple, la règle : "plusplus:true" n'autorise pas l'apparition des opérateurs ++ et --, et "undef:true" n'autorise pas l'utilisation de variables non définies.
L'outil JSLint étant essentiellement un script JS ordinaire, son fonctionnement repose naturellement sur un moteur d'exécution JS. Après avoir été chargé par le moteur, il générera un objet fonction JSLint global en mémoire. Cet objet fonction nécessite deux entrées : source et options. le premier est utilisé pour spécifier la chaîne ou le tableau de chaînes généré après l'analyse du fichier de script à détecter, et le second représente les options de règle définies par l'utilisateur. Si options est vide, JSLint utilise ses règles par défaut pour analyser et détecter la source.
L'ensemble du processus de détection est un processus d'exécution de la fonction JSLINT (source, options) contenue dans le script. Lorsque le script source spécifié réussit la détection sous la condition d'options, JSLint renvoie vrai, sinon il renvoie faux, et à ce moment, des informations détaillées sur l'erreur peuvent être obtenues via l'objet JSLINT.errors. La figure 1 montre l'ensemble du processus de travail de JSLint.
Figure 1. Diagramme schématique du processus de travail JSLint
Comme le montre la figure, il existe trois manières de configurer un ensemble de règles :
1. Modifiez directement les règles par défaut en modifiant le code source de JSLint.js.
2. Lorsque la fonction JSLint est en cours d'exécution, définissez le paramètre options en même temps et modifiez dynamiquement ses options de règle (premier écrasement). Cette méthode convient pour utiliser le même ensemble de règles personnalisées pour les fichiers batch js.
3. Ajoutez des règles spéciales (second écrasement) applicables au code d'un seul fichier js en ajoutant des règles de type d'annotation à l'en-tête du fichier js à détecter. Cette méthode convient pour définir des règles de détection spécifiques pour différents fichiers js et est généralement utilisée pour introduire certaines variables globales dans le fichier.