L'auteur de l'article, dont nous publions aujourd'hui la traduction, a décidé de partager avec les lecteurs sept recommandations sur JavaScript. Ces recommandations, comme l'auteur aimerait l'espérer, aideront à écrire des programmes plus fiables.
1. Utilisez les fonctions d'usine
Si quelqu'un ne le sait pas, une fonction d'usine est une fonction ordinaire (pas une classe ou un constructeur) qui renvoie des objets. Ce concept simple nous permet de profiter des puissantes fonctionnalités de JavaScript pour créer des applications puissantes et fiables.Il est important de savoir qu'une fonction d'usine est appelée sans utiliser de mot clé new. Si vous l'appelez avec ce mot-clé, elle cessera de se comporter comme elle le devrait.▍ Pourquoi utiliser les fonctions d'usine?
Les fonctions d'usine peuvent être utilisées pour simplifier l'instanciation d'un objet sans avoir à se lier à des classes ou au mot-clé new.L'essence des fonctions d'usine est qu'elles sont considérées comme les fonctions les plus ordinaires. Cela signifie qu'ils peuvent être utilisés pour construire des objets, d'autres fonctions et même des promesses. Autrement dit, ces fonctions peuvent être combinées et combinées pour créer des fonctions d'usine plus puissantes, qui, à leur tour, peuvent également être combinées avec d'autres fonctions ou objets pour créer des fonctions d'usine encore plus avancées. Les fonctions d'usine ouvrent des possibilités illimitées pour le programmeur.Compte tenu de ce qui précède et en combinant l'utilisation des fonctions d'usine avec les approches recommandées pour écrire du code, ces fonctions peuvent devenir des outils puissants et pratiques.Voici un exemple simple d'une fonction d'usine:function createFrog(name) {
const children = []
return {
addChild(frog) {
children.push(frog)
},
}
}
const mikeTheFrog = createFrog('mike')
Si vous utilisez les fonctions d'usine pendant un certain temps, vous comprendrez peut-être que, par rapport à leurs concurrents sous forme de fonctions constructeur, les fonctions d'usine peuvent augmenter le niveau de réutilisation du code. Par conséquent, le programmeur doit écrire moins de code. Les fonctions d'usine facilitent le refactoring, car elles sont capables de renvoyer des objets arbitraires et de simplifier le travail sur la base de code.2. Lors de l'écriture de fonctions constructeur, ajoutez des méthodes à leurs prototypes
Si vous venez tout juste de commencer à apprendre JavaScript, travailler avec un objet prototype peut vous sembler nouveau. Donc, au tout début, c'était avec moi.Gardez à l'esprit que cette technique n'est pas adaptée aux cours. Les classes, sans effort supplémentaire de la part du programmeur, enregistrent indépendamment les méthodes dans leurs prototypes.Voici un exemple de fonction constructeur:function Frog(name, gender) {
this.name = name
this.gender = gender
}
Frog.prototype.leap = function(feet) {
console.log(`Leaping ${feet}ft into the air`)
}
Pourquoi utiliser une construction Frog.prototype.leapau lieu d'écrire simplement une méthode leapsur un objet créé par le constructeur? Par exemple, comme ceci:function Frog(name, gender) {
this.name = name
this.gender = gender
this.leap = function(feet) {
console.log(`Leaping ${feet}ft into the air`)
}
}
Le fait est que si une méthode est attachée directement à une propriété constructeur prototype, cela signifie que cette instance sera partagée par toutes les instances de l'objet créé par le constructeur.En d'autres termes, si vous vous appuyez sur l'exemple précédent, qui est utilisé this.leap, il s'avère que lors de la création de plusieurs instances de l'objet Frog, chacune aura sa propre méthode leap. Autrement dit, plusieurs copies de cette méthode seront créées. Dans ce cas, cela indique l'utilisation irrationnelle des ressources du système, car dans tous ces objets, il y aura une copie de la même méthode, qui se comporte partout de la même manière. Il n'est pas nécessaire de créer des copies d'une telle méthode dans chaque instance de l'objet.En conséquence, cela entraînera une diminution des performances du programme. Mais ce n'est pas difficile à éviter. Il convient de noter que les propriétés this.nameet this.genderdoivent être déclarées sous cette forme, car elles doivent appartenir à un objet spécifique. Si nous faisons une analogie avec de vraies grenouilles, dont la représentation virtuelle est décrite à l'aide du constructeur Frog, il s'avère que les grenouilles peuvent avoir leurs propres noms, les grenouilles ont un sexe différent. Par conséquent, pour stocker des informations uniques sur les grenouilles dans chacun des objets, il est logique de déclarer les propriétés des objets afin qu'elles soient utilisées exactement au niveau des instances d'objet.Voici un exemple d'utilisation de cette technique dans le package de demande populaire .3. Ajoutez la propriété .type aux objets à distinguer.
Une propriété .typequi, par accord officieux, est souvent ajoutée à des objets, a trouvé une utilisation extrêmement répandue de nos jours. Si vous écrivez des applications React, vous avez peut-être rencontré cette propriété tout le temps. Surtout - si vous utilisez Redux .L'utilisation de cette approche se révèle très bien dans le processus de développement, car elle permet entre autres de créer du code auto-documenté:function createSpecies(type, name, gender) {
if (type === 'frog') {
return createFrog(name, gender)
} else if (type === 'human') {
return createHuman(name, gender)
} else if (type == undefined) {
throw new Error('Cannot create a species with an unknown type')
}
}
const myNewFrog = createSpecies('frog', 'sally', 'female')
4. Utilisez TypeScript
TypeScript s'est répandu dans la communauté JavaScript car ce langage offre au programmeur un outil puissant pour travailler en toute sécurité avec les types, et vous permet également de détecter les erreurs avant même qu'elles n'apparaissent dans le code en cours d'exécution.L'utilisation de TypeScript vous permet de trouver des erreurs potentielles au stade de la compilation du code, même avant le lancement du code. Si quelque chose ne va pas dans le code, une notification de compilation sera affichée lors de sa compilation.Mais la sécurité des types et la détection précoce des erreurs sont loin d'être une liste complète des raisons d'utiliser TypeScript dans toutes les situations. L'un des avantages de TypeScript est qu'il vous permet de profiter des nouvelles fonctionnalités JavaScript avant même qu'elles n'apparaissent dans les principaux navigateurs. Le fait est que le code TypeScript est compilé en code JavaScript pris en charge par les navigateurs modernes et non les plus récents.5. Ecrire des tests
Si vous travaillez sur un projet et que vous êtes sérieux dans ce travail, vous devez pratiquement passer des tests. Cela rendra le code plus prévisible, le rendra moins sujet aux erreurs. Cela donnera un niveau de confiance plus élevé dans la qualité du code lors de ses modifications. En d'autres termes, si vous voulez que votre code résiste à l'épreuve du temps, il n'y a pas de meilleure façon de préparer votre code pour ce test que d'écrire des tests. Plus vous aurez de tests dans votre projet, plus vous aurez confiance dans le code lorsque vous le déploierez en production.S'il était nécessaire de ne citer qu'un seul, la caractéristique la plus importante et la plus positive des tests, quelle serait-elle? Je crois que c'est le fait que les tests aident à trouver des erreurs avant d'entrer dans un programme de travail. Quel genre de programmeur ne voudrait pas avoir une telle opportunité? Je ne refuserais certainement pas une telle chose. C'est pourquoi j'écris des tests unitaires pour mes projets.Si vous voulez commencer à créer des tests pour votre projet, sachez qu'il existe aujourd'hui de nombreux outils et cadres pour organiser les tests de code. Voici quelques bonnes choses à ce sujet.6. Écrivez des fonctions aussi simples que possible.
Comme nous le savons tous, JavaScript sans problèmes vous permet de créer d'énormes fonctions qui résolvent de nombreuses tâches à la fois.Si vous êtes nouveau dans la programmation, cela peut vous sembler positif. Je dirai de moi que jadis je me sentais bien quand j'écrivais de gros morceaux de code qui faisaient ce dont j'avais besoin. Cela m'importait surtout. Je me suis senti plus en confiance quand j'ai vu que mon code fonctionnait sans problème, sans parler du fait que ma confiance en moi était renforcée par le fait que j'étais capable d'écrire un énorme bloc de code qui fonctionnait bien. Comme j'étais naïf alors!Si vous voulez écrire du code facile à maintenir, du code simple et pas trop sujet aux erreurs, alors votre meilleur pari est de rendre vos fonctions aussi simples et petites que possible. Plus la fonction est simple, plus il est facile de la tester indépendamment des autres parties du système.Ceci est particulièrement important pour ceux qui souhaitent utiliser les principes de la programmation fonctionnelle dans leur travail. À cet égard, nous pouvons rappeler une exigence bien connue pour les fonctions: une fonction doit résoudre un seul problème et elle doit très bien résoudre ce problème.7. Souvenez-vous toujours de l'importance de la gestion des erreurs lors de l'utilisation de JSON.parse et JSON.stringify
En programmation JavaScript, lors du passage de données JSON à une méthode JSON.parse, il est nécessaire de prendre en compte le fait que cette méthode s'attend à recevoir, comme premier argument, un code JSON correctement exécuté. Si cette méthode reçoit des matériaux JSON avec lesquels quelque chose ne va pas, elle générera une erreur.Le danger ici est que la transmission d'un JSON.parsecode JSON incorrect entraîne l'arrêt de l'application. Au travail, j'ai récemment rencontré une situation où l'un de nos projets Web a généré des erreurs en raison du fait que l'un des packages externes ne correspondait pas JSON.parseau bloc try/catch. Cela s'est terminé par un échec de la page, et nous n'avons pas pu nous débarrasser du problème tant que le code de package externe n'a pas été corrigé. Tout cela est dû au fait que dans le code, lors de son fonctionnement, une erreur non traitée est apparue:SyntaxError: Unexpected token } in JSON at position 107
Lors du traitement de données JSON entrant dans l'application à partir de sources externes, on ne peut pas espérer qu'elles seront correctement formatées. Vous devez toujours être préparé au fait qu'ils peuvent rencontrer quelque chose qui provoquera une erreur.Sommaire
Nous espérons que les recommandations données ici pour améliorer la fiabilité du code JavaScript vous seront utiles.Chers lecteurs! Que recommanderiez-vous à ceux qui souhaitent écrire du code JavaScript meilleur et plus fiable?