Table des matières
Dans les tutoriels précédents, nous travaillions avec des classes, rendant ainsi notre application plus modulaire, nous voyions même en profondeur comment effectuer un travail asynchrone en utilisant CoffeeScript en tant que langue, nous offrant ainsi une plus grande gamme d'options pour travailler avec elle.Après avoir maîtrisé ces concepts, il est temps d'aller plus loin et d'utiliser ce que nous savons pour écrire un code plus propre, plus fonctionnel et bien sûr plus puissant. Il est temps d'apprendre à devenir des utilisateurs puissants de CoffeeScript.
Maintenant que nous savons utiliser les classes dans notre application, ce n'est qu'une question de temps avant que nous rencontrions des problèmes avec elle. le contexte. Lorsque nous sommes avec des fonctions simples, il est assez facile de voir quelles données cette fonction a dans sa portée, elle connaît les variables globales, les variables définies dans la fonction et toute variable qui a été définie dans la portée locale lors de la création de la fonction.
Mais lorsque les méthodes sont liées à des objets, cela devient un peu plus compliqué. Pour illustrer cela, voyons un exemple où nous pouvons voir ce problème et ensuite nous verrons comment CoffeeScript peut nous aider :
classe Ancre de levage de navire : (doneCallback) -> console.log "Ancre de levage." setVel: (speed) -> console.log "Réglage de la vitesse sur # {speed}" set sail: -> @levantarAncla @ fixVel 70Supposons alors selon notre code que nous voulions mettre les voiles immédiatement, pour cela nous faisons ce qui suit pour invoquer notre fonction :
bot = nouveau bot.zarpar de Barco ()Si l'on regarde de près et que l'on transfère ce code dans le monde réel, on se rend compte que la levée de l'ancre ne se fait pas tout de suite, il faut attendre que l'ancre soit complètement levée pour pouvoir mettre les voiles. Nous pouvons résoudre ce problème en ajoutant un rappeler et en demandant si elle a été terminée, nous saurons donc combien de temps cette action prend et appellerons notre fonction une fois terminée, voyons :
liftAnchor : (doneCallback) -> console.log "Ancre de levage." si c'est faitRappel ? setTimeout doneCallback, 1000Comme nous pouvons le voir, nous n'invoquons le rappel que s'il existe, de cette façon nous nous assurons que ce processus est terminé, et donc nous devons modifier notre fonction mettre les voiles:
mettre les voiles : -> @levantarAncla -> @ fixVel 70Maintenant, ce que nous faisons est d'invoquer la fonction mettre les voiles Après avoir levé l'ancre, cela garantit que nous ne bougerons pas tant que l'ancre n'est pas complètement levée. Cela a l'air plutôt bien, nous allons compiler notre code et nous allons inclure le fichier .js généré dans un HTML pour voir la réponse par console :
Comme nous le voyons dans l'image, nous avons obtenu une erreur indiquant que la fonction n'existe pas. Que s'est-il passé? C'est très simple, JavaScript a fixé la valeur Este de la manière dont la fonction a été invoquée, car lors de l'appel bot.zarpar la valeur Este est lié à l'objet robot, donc c'est lié au contexte mondial et ce n'est pas ce que nous voulons.
Ce que nous voulons faire, c'est nous assurer que Este est toujours lié à l'instance de robot dans le corps du rappel et nous avons de la chance, car CoffeeScript il a une fonctionnalité pour ce cas. Pour cela, nous allons déclarer la fonction avec grosse flèche ou flèche épaisse, de cette façon la fonction aura le Este lié au contexte dans lequel il a été déclaré, voyons à quoi ressemble notre code avec ce changement :
classe Ancre de levage de navire : (doneCallback) -> console.log "Ancre de levage." si c'est faitRappel ? setTimeout doneCallback, 1000 setVel: (speed) -> console.log "Setting speed to # {speed}" set sail: -> @levantarAncla => @fixVel 70 bot = new Barco bot.zarpar ()Compilons notre fichier et voyons comment CoffeeScript Lien de réussite avec fonctionnalité de flèche épaisse :
Ce qui fait CoffeeScript avant de déclarer le rappeler est de définir une variable locale _Este, qui fait référence à Este, car même si le rappeler est lié dynamiquement à la valeur charge toujours le contexte local dans lequel il a été déclaré. Enfin, nous allons exécuter notre fichier généré, puis voir comment l'erreur a été résolue :
Ayant déjà vu comment résoudre le problème de contexte dans nos applications avec CoffeeScript Nous allons voir une technique assez simple mais puissante pour nous aider à économiser du travail. Ce n'est pas une technique avancée mais c'est un moyen logique d'améliorer notre code sans trop d'effort de notre part.
MémorisationQu'est-ce que la technique de mémorisation consiste à stocker les valeurs d'une fonction au lieu de les recalculer à chaque fois que la fonction est appelée. Maintenant que nous savons utiliser les classes et les objets, nous pouvons utiliser ces connaissances pour les appliquer au sein de CoffeeScript et utiliser la technique en question.
Il existe de nombreuses façons de mener à bien le processus de mémorisation, pour le cas de ce tutoriel, nous allons garder les choses simples. Pour cela, ce que nous ferons, c'est que lorsque certaines informations sont demandées, nous vérifierons si elles sont stockées, si tel est le cas, nous les renvoyons immédiatement, sinon nous pouvons les calculer et les enregistrer pour une utilisation future. Cette technique est extrêmement utile lorsque nous devons utiliser un algorithme complexe pour recevoir une réponse ou dans le cas où nous utilisons un réseau lent pour obtenir des informations.
Regardons donc le code pour illustrer cette technique :
classe Rocket getPath: -> @path? = @doMathComplexProcess ()Pour mieux expliquer cette portion de code, nous allons la compiler pour voir comment CoffeeScript construire le JavaScript que notre technique devra nous épargner du travail dans notre développement, voyons à quoi ressemble notre code :
AGRANDIR
Comme on peut le voir dans notre code, le calcul de la trajectoire ne sera effectué que la première fois que le demande et la valeur stockée sera utilisée à partir de maintenant. On pourrait aussi voir dans notre code CoffeeScript que nous avons eu l'aide de l'opérateur tertiaire ?= qui évaluera l'expression dans le cas où le chemin est nul, en plus on aura l'aide du retour implicite des fonctions qui retourneront le résultat de l'expression, en l'occurrence la valeur de @trajectoire qu'elle ait été préalablement stockée ou qu'elle vienne d'être calculée.Mais ce n'est pas tout ce que nous pouvons faire avec notre nouvelle technique de CoffeeScript, nous pouvons même stocker plusieurs valeurs à l'aide d'une structure de données, voyons comment procéder :
class SecurityGateway hasAccess : (guard) -> @access? = {} @access [guard.plate_number]? = verifyCredentials guard.plate_numberCe que fait cette partie de code, c'est que dans notre objet, le résultat est stocké pour chaque garde qui a demandé l'accès, nous n'aurions besoin que de quelque chose d'unique pour pouvoir les identifier dans notre objet, nous utilisons donc le numéro de plaque pour cette tâche, voyons comment notre code est traduit lorsque nous le compilons :
AGRANDIR
Il est important de mentionner que cette technique ne doit être utilisée qu'avec des informations qui ne changeront pas pendant l'exécution de notre programme, dans le cas où c'est le cas, nous recommandons de mettre en œuvre une solution basée sur cache.Enfin nous verrons un moyen de passer des options à une fonction, ce n'est pas une fonctionnalité spéciale de CoffeeScriptIl s'agit plutôt d'une convention qui utilise de nombreuses caractéristiques de la langue, en les utilisant selon un modèle facile à comprendre et tout aussi utile dans de nombreuses situations qui peuvent survenir.
Comment ça marche?L'idée derrière cela est simple, c'est d'avoir une fonction qui accepte cela objet d'options qui peut contenir des clés associatives pour les arguments de cette fonction. Cela rend les options faciles à comprendre à partir du code dans lequel elles sont appelées car il y a des accolades pour identifier ce que fait chaque valeur. Cela réduit également les tracas liés à la surveillance des arguments ainsi que de leur ordre, car les clés d'objet n'en dépendent pas et peuvent être omises si elles ne sont pas nécessaires.
Pour mettre en œuvre le objets d'options nous allons d'abord utiliser des arguments facultatifs pour utiliser par défaut un argument vide. De cette façon, lors de l'appel, nous pouvons omettre les options dans le cas où les valeurs ne sont pas nécessaires :
launchNave = (name, options = {}) -> return if options.drift dry take off ()Nous allons maintenant utiliser l'opérateur tertiaire ?= pour renseigner les valeurs des options dont on veut avoir une valeur par défaut spéciale :
launchNave = (name, options = {}) -> options.count? = 10 console.log "# {i}…" for i in [options.count… 0] return if options.drift dry take off ()On définit une dernière valeur et on utilise l'opérateur ? dans le cas où il est utilisé à un seul endroit :
launchSave = (name, options = {}) -> checkFuel (options.waitComb? 100) options.count? = 10 console.log "# {i}…" for i in [options.count… 0] return if options. décollage à sec ()Enfin, nous profitons de la syntaxe permissive de CoffeeScript pour envoyer les options à notre fonction sans les crochets, ce qui nous donne un appel assez simple et naturel :
launchShip "Millennium Falcon", DryGear : vrai, compte à rebours : 15Pour finir, nous allons compiler notre fichier et voir la sortie de notre code dans JavaScript:
AGRANDIR
Avec ce dernier, nous avons terminé ce tutoriel, où nous avons pu apprendre non seulement des façons avancées d'utiliser CoffeeScript mais plutôt des techniques qui nous aideront à écrire un meilleur code, qu'avec une utilisation et une recherche constantes, nous pouvons devenir de meilleurs développeurs qui utilisent les meilleures pratiques pour développer des applications.