OK alors il ya un dernier endroit, nous pouvons utiliser la fonction de réinitialisation qui est au tout début de notre code.
Quand la page charge la toute première fois ce que nous devons arriver est que nous devons choisir des couleurs aléatoires que vous avez fait alors nous devons choisir une couleur de ces nouvelles couleurs aléatoires que nous avons déjà ici.
Et puis nous avons besoin d'assigner une couleur à chaque carré sur la page afin que nous puissions utiliser notre fonction de réinitialisation parce que c'est essentiellement ce qu'il fait.
Et je vais nettoyer les choses en fait simplement en exécutant une fonction au tout début appelée init et qui n'existe pas.
Et à l'intérieur de notre fonction init, nous allons mettre tout ce qui doit être exécuté lorsque la page est chargée.
Donc nous aurons fonction init.
Et puis à l'intérieur de notre fonction net, la première chose que nous pouvons faire est d'aller de l'avant et ajouter dans nos auditeurs bouton mode.
Et c'est vraiment juste pour nettoyer les choses.
Ce n'est donc pas seulement flotter au milieu de nulle part.
Donc, il va indent ce correctement.
Donc, c'est notre mode boutons les auditeurs événement et je vais saisir ce code ici.
Et ce que cela fait, c'est qu'il change la couleur de chaque carré dont nous pouvons juste se débarrasser.
Nous n'avons pas besoin de le faire plus parce que nous allons utiliser cette réinitialisation, puis il ajoute également klick auditeurs à chaque carré de sorte que lorsque vous cliquez, nous avons encore besoin de toute cette logique peut nettoyer un peu.
Nous changeons l'affichage des messages Nous changeons le bouton de réinitialisation en changeant les couleurs.
Donc, je vais simplement copier cela dans notre fonction init parce que nous voulons aussi que cela s'exécute au début lorsque la page se charge si bien et fait correctement aussi.
Et puis la dernière chose une fois que nous avons mis en place les gestionnaires d'événements ici pour les boutons bouton de mode et pour les carrés, nous voulons simplement réinitialiser l'écran ce qui signifie exécuter la fonction de réinitialisation et ce que la réinitialisation va faire, il va réellement générer nos couleurs Afin que nous puissions avoir des couleurs undefined ou un tableau vide au début.
Je vais tout simplement commencer.
Eh bien, nous allons lui donner un tableau vide d'abord.
Et puis ce que nous pouvons faire est de choisir la couleur choisie juste pour être une variable sans valeur et d'enregistrer que et de rendre les choses un peu plus propres.
Je vais déplacer mes sélecteurs ici afin que nous avons au sommet, trois variables qui ne sont pas la sélection des choses.
Et puis nous avons des variables qui sélectionnent les différents éléments sur la page.
D'ACCORD.
Encore une fois, ce qui arrive au tout début.
Nous exécutons la fonction init qui va exécuter tout ce code ici.
Et ce code va configurer nos auditeurs de bouton de mode et il va configurer nos auditeurs carrés et puis nous exécutons la réinitialisation qui choisit des couleurs il choisit une couleur aléatoire de ces couleurs il choisit il change le contenu de texte et tout cela.
Et nous pouvons nous débarrasser de cette ligne parce que nous le faisons maintenant à l'intérieur de la fonction init qui appelle reset.
Alors assurez-vous que cela fonctionne avant de passer à autre chose.
Nous vous rafraîchissons ..
Aucune erreur.
Et vous pouvez voir que je actualise la page et tout ce code est exécuté dans cette fonction init.
Et à l'intérieur de là, il réinitialise tout ce que nous voyons.
Ainsi, nos auditeurs sont configurés correctement.
Nous recevons le message correct.
Jouons encore.
Tout fonctionne très bien.
Jouons le mode facile.
Voilà.
Rejouons encore une fois.
Génial.
Donc ça marche très bien.
Il ya encore un changement que nous pourrions faire, qui est que cette fonction ici et maintenant, il est un peu long et certaines personnes que j'ai travaillé avec des règles vraiment strictes sur la durée de fonction devrait être.
Certaines personnes diront que si votre code est plus long que 10 lignes, vous devez le diviser en sa propre fonction.
Nous pourrions faire cela ici.
Cela pourrait être une fonction de son propre tout ce qu'il fait est mis en place un bouton bouton mode afin que nous puissions faire cela ici.
Ou simplement le bouton mode d'écriture appellent-il les boutons de mode de mise en place et puis nous allons déclarer que la fonction ici bas fonctions bouton de mode.
Et ici, nous allons simplement coller ce code qui va alors exécuter un retrait correctement une fois juste au début.
Nous avons mis en place les auditeurs bouton mode et nous pouvons faire la même chose ici.
Copiez ce code et nous allons donner à celui-ci un nom de mettre en place des auditeurs carrés ou appelons-le simplement mettre en place des carrés comme ça et puis nous allons écrire une fonction configurée.
Et je remarque que je n'ai pas utilisé un capital, vous êtes là.
Donc, je dois faire attention à la mise en place carrés ici et nous allons nous assurer que notre code fonctionne de la même manière.
Donc, maintenant notre init est vraiment agréable et propre.
Il met en place les boutons de mode il met en place les carrés et il réinitialise tout ce que nous voyons.
Essayons de rafraîchir.
On dirait que ça a fonctionné notre Square fonctionnent toujours très bien.
Si nous les rafraîchissons plus nos boutons de mode fonctionnent toujours très bien aussi.
Donc, c'est très bien et il semble que tout fonctionne très bien.
C'est tout ce que nous allons faire pour refactor pour l'instant.
Mais je vais vous montrer quelques choses que nous aimerions améliorer dans les futures vidéos.
Une fois que nous en apprenons un peu plus sur le javascript et de plus en plus à l'aise avec elle, nous allons parler de certains modèles de conception et les modèles de conception sont essentiellement des façons de structurer votre code afin que nous puissions avoir ce code.
Il fonctionne de la même manière la même logique pour faire le même jeu et 10 personnes différentes pouvaient l'écrire de 10 manières différentes et ce n'est pas seulement sur quelles fonctions nous roulons ou les noms des variables.
Il est aussi sur la façon dont nous structurons les choses en général et le plus simple ou l'un des plus communs est appelé le modèle de conception de module.
Et ce que cela signifie est que nous pouvons ajouter un tas de propriétés dans les objets de sorte que nous n'avons pas de variables comme cette flottant autour qui ne sont pas à l'intérieur d'un objet.
Nous n'avons aucune fonction qui est juste sur leurs propres comme ceci sur l'objet de fenêtre.
Nous les ajoutons plutôt à notre propre objet.
Donc, il ressemblerait à quelque chose comme ça, vous pourriez avoir un objet de jeu.
Et puis nous pourrions écrire le point de jeu et nous allons juste faire une partie de celui-ci.
L'init de point de jeu est une fonction et nous copions juste ce code là et nous ferions ceci pour chaque fonction simple chaque variable de propriété unique et puis à la fin nous courrions juste le jeu.
Et le raisonnement derrière cela est un peu plus compliqué.
La version courte est qu'il nous aide à garder les choses structurées et organisées.
Et il permet également d'éviter les collisions espace de noms que j'ai mentionné plus tôt dans l'une des vidéos objet.
Donc, je ne vais pas passer par tout ce refactor.
Ce que nous avons est assez bon.
Ça marche très bien.
Mais comme vous continuez à grandir en tant que développeur et vous apprenez de plus en plus une des choses que vous prêter attention à une fois que vous obtenez plus confortable est javascript modèles de conception et il ya des livres écrits sur ce point.
Il ya des essais et des blogs et autant de vidéos et il ya des cours entiers réellement en ligne juste sur la structuration de votre javascript.
Ce n'est donc pas l'objectif.
Et je ne veux vraiment vraiment se concentrer sur le contenu le code HTML le javascript le C évaluer la logique et la structure peut venir plus tard.