Dans cette leçon, nous allons examiner refactoriser notre code et le documenter. Et il y a de bonnes nouvelles ici. Si nous sommes à ce point, cela pourrait signifier que nous sommes proches à la fin de ce que nous devons faire pour le code, ou au moins cette itération à travers ce que nous devons faire pour le code. Donc, certaines de ces choses vont probablement sonner comme le bon sens, mais dans ma carrière de consultant et de codeur J'ai trouvé que parfois le bon sens n'est pas si commun. Donc, si vous connaissez déjà ce genre de choses, tant mieux pour vous. Tout d'abord, nous voulons regarder aux moyens d'attacher des gestionnaires d'événements et nous entrons tous dans des habitudes de codage, non? Le problème ici avec ces deux gestionnaires d'événements est-ce que nous voulons faire deux choses différentes lorsque quelqu'un clique sur un bouton particulier. Le problème avec la façon dont nous l'avons fait est l'un de ces va écraser l'autre en raison de la façon dont nous avons effectué l'attribution de l'événement, donc nous voulons vraiment éviter ça et j'espère que ça ne vient pas à l'étape de refactoring avant que nous le découvrions. Mais si c'est le cas, alors changeons simplement cela en quelque chose de différent. Par exemple, si vous avez jQuery, vous pouvez utiliser sur. Si vous utilisez JavaScript standard vous pouvez ajouter un écouteur d'événement. Cela garantit que tous les gestionnaires supplémentaires n'écrasez pas les gestionnaires précédents comme nous l'avions fait là-bas. Jusqu'ici tout va bien. Encore une fois, peut-être une sorte de connaissance de bon sens. La prochaine chose est, et je prends parfois la même habitude, J'entre dans une méthode et je ne suis pas vraiment sûr de ce que les choses à propos d'un objet particulier dans une méthode dont je vais avoir besoin. Alors remarquez que j'ai en quelque sorte des noms éparpillés là-bas dans quelques configurations différentes et j'ai l'impression de refactoriser ce que je veux vraiment faire est de revenir en arrière et de rendre ce code plus succinct, ou à tout le moins moins sensible à mes fautes de frappe Parce que je suis un grand dans jQuery de juste faire ça et oublier le signe dièse et puis mon code ne fonctionne pas. Donc si je devais changer ça, Je vais simplement créer des variables. C'est donc cette liste déroulante donc je peux juste faire l'index sélectionné ou je peux virer sur un jQuery recherchez et obtenez l'option sélectionnée et puis fais la pré-pendaison quand je suis prêt pour y mettre quelque chose. Donc, juste quelques conseils rapides là-bas sur juste vous sauver de vous-même. Et ça? La prochaine chose à nouveau peut sembler élémentaire, mais ce que nous ne voulons pas faire c'est finir avec une sorte de fichier de script séparé où nous il suffit de vider un tas de fonctions là-dedans. En règle générale, vous le verrez appelé notre fichier utils, à droite, Parce que nous ne savons pas comment l'appeler d'autre. Voici une astuce. Si tu n'as pas de vrai nom clair quel est votre fichier, alors vous avez probablement trop de choses déversées dans un seul fichier. Donc, il y en a juste quelques-uns ici, mais j'ai une addition et une soustraction et une multiplication, et puis voici le problème aussi, qui est juste assis là-bas dans l'espace de noms global parce que j'ai un autre ajout dans le fichier de ce client et si j'utilise les deux dans la même page, maintenant j'ai un conflit. Donc, en ce qui concerne celui-ci, une des choses que nous pouvons faire est de simplement mettre cela dans un module. Et nous pourrions aussi explorer simplement en le mettant dans une classe aussi. Mais avec les modules JavaScript, cela vous donne la possibilité de n'exporter que certaines fonctions et tu ne mets pas les choses là-bas dans l'espace de noms global ou du moins c'est une construction plus simple pour vous assurer que vous ne le faites pas. Alors j'avais tout ça ici par exemple, ajouter, soustraire et multiplier. Et une autre chose que je regarde quand je vois ça c'est, vous savez, ils ont tous le même jeu de paramètres. Si vous vous trouvez dans cette situation, ce que vous voudrez peut-être regarder transforme cela en objet à la place parce que nous voulons que notre liste de paramètres soit aussi concise que possible, en particulier ceux d'entre vous qui viennent du monde fonctionnel, c'est certainement une préoccupation. Alors peut-être que si nous avons tout cela et ils sont coincés dans une classe d'utils avec un tas d'autres codes qui ne devraient peut-être pas être là, allons-y et mettons ça ailleurs. J'ai donc créé une classe appelée ops mathématiques, et encore une fois, ce ne sont pas révolutionnaires opérations de type mathématique, ils sont très simples, mais j'essaye de démontrer plus d'un point sur la façon dont nous pouvons créer nos fonctionnalités sans avoir à l'avoir là-bas dans l'espace de noms global. Maintenant j'ai cette classe appelée ops de maths cela prend un constructeur, mais notez que chacun de l'addition et de la soustraction et les méthodes de multiplication prennent maintenant un seul paramètre appelé triple, et ce que j'ai créé pour soutenir cela est juste une autre classe appelée triples et il valide que ces choses sont des nombres afin de le créer et va de l'avant et donne à ceux-ci leurs valeurs pour que je puisse les transmettre là-dedans. Maintenant, je voulais aussi parler un peu de la documentation. Maintenant, vous remarquerez peut-être que j'ai quelques commentaires supplémentaires là-bas avec quelques jetons supplémentaires et ce que c'est est un moyen pour documenter votre code et c'est un package appelé JS doc. Vous pouvez l'obtenir dans une variété d'endroits. L'endroit où je l'ai obtenu est NPM ici, donc si vous ne l'avez pas encore, c'est une question simple d'aller à la ligne de commande et faire une installation NPM de JS doc. Une fois que vous avez ce paquet, vous pouvez maintenant commencer à créer ces commentaires. Et en fait, si vous le souhaitez, vous n'avez même pas besoin de taper tout cela. Je peux essayer celui-ci ici par exemple. Si je fais juste ça, on y va, la barre oblique et deux astérisques, il lira effectivement la signature de la fonction pour moi et en quelque sorte construire le début de cette documentation. Maintenant, ce que j'ai fait avec ceux-ci, c'est que j'ai spécifié le type de données du paramètre ainsi que le type de données de ce qui revient. Le reste n'est qu'une description. Et ce que nous allons faire, c'est créer une page pour la documentation et cela va apparaître ici. Nous pouvons donc simplement mettre du texte arbitraire juste après quoi que ce soit ici et cela construira les pages HTML lorsque nous reviendrons à la ligne de commande et créez-le. Et en ce qui concerne les bases, le param est juste, vous pouvez y mettre les noms, et encore une fois, toute description que vous voulez. Je ne sais pas si j'ai besoin de ça ou pas, mais tu sais, c'est comme ça avec les commentaires. En le lisant, nous pensons, eh bien, on sait exactement ce que c'est, mais comme on y retourne quelque temps plus tard ou comme quelqu'un d'autre utilise notre code, probablement une bonne idée de mettre cela là-dedans. J'ai donc désigné cela comme un constructeur. Il y a des informations sur tous les paramètres. Cela s'affichera sous forme de description et tout ce qui renvoie une valeur nous marquons comme retours avec le type. Maintenant, si vous voulez créer de la documentation pour différents fichiers, vous pouvez également l'utiliser pour créer un lien sur les pages HTML que vous créez afin que les gens puissent naviguer de l'un à l'autre. Maintenant, ces classes sont assez étroitement couplées à ce stade et ainsi de suite sur cette page, je veux donner un lien à la documentation pour les triples et sur les triplets Je donne un lien vers les opérations mathématiques. Vous pouvez donc faire ce que vous voulez. Et si vous revenez à votre ligne de commande, nous allons faire JS doc Et puis j'ai besoin de lui dire où aller afin d'obtenir des fichiers à construire, et éventuellement je peux aussi lui dire où mettre les fichiers quand il les construit. Donc pour ce projet, Je vais juste le laisser faire ce qu'il veut faire dans la mesure où il va mettre ces fichiers. Mais je voulais aller chercher la documentation de tout ce qui est ici dans les scripts. Donc, tout ce sur quoi j'ai de la documentation, je vais avoir une page pour, sinon, il va tout simplement l'ignorer. Et le meilleur résultat ici, nous y voilà, est que je fais cela et je viens de récupérer l'invite de commande. Je devrais donc avoir un dossier de sortie. Le voilà. C'est la valeur par défaut qu'il crée dans mon application et je peux accéder à tout cela grâce à l'index point HTML. Il y a donc les classes qu'il documente. Je n'ai fait aucune description sur la page de base, mais il y a des opérations mathématiques. Voilà mon constructeur. Il y a chacune des méthodes. Il me dit où il se trouve dans le code et je peux utiliser ce lien pour accéder à l'autre classe et vous pouvez voir que je n'ai pas fait de descriptions pour tout, mais quand je le fais, il apparaît juste là. C'est donc un moyen pratique de faire de la documentation. C'est juste une question de faire quelques commentaires et nous savons tous qu'en faisant cela, c'est plus facile si vous le faites au moment où vous le créez, pas plus tard. Merci d'avoir regardé. Dans notre prochaine leçon, nous parlerons de regroupement et de réduction alors que nous nous préparons à expédier notre produit.
