1
00:00:00,330 --> 00:00:05,440
OK alors il ya un dernier endroit, nous pouvons utiliser la fonction de réinitialisation qui est au tout début de notre code.

2
00:00:05,550 --> 00:00:17,440
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.

3
00:00:17,820 --> 00:00:26,290
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.

4
00:00:26,490 --> 00:00:33,430
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.

5
00:00:33,600 --> 00:00:38,820
Et à l'intérieur de notre fonction init, nous allons mettre tout ce qui doit être exécuté lorsque la page est chargée.

6
00:00:39,000 --> 00:00:41,490
Donc nous aurons fonction init.

7
00:00:41,790 --> 00:00:49,070
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.

8
00:00:50,250 --> 00:00:52,200
Et c'est vraiment juste pour nettoyer les choses.

9
00:00:52,230 --> 00:00:55,110
Ce n'est donc pas seulement flotter au milieu de nulle part.

10
00:00:55,320 --> 00:00:56,850
Donc, il va indent ce correctement.

11
00:00:57,000 --> 00:01:05,260
Donc, c'est notre mode boutons les auditeurs événement et je vais saisir ce code ici.

12
00:01:05,400 --> 00:01:10,420
Et ce que cela fait, c'est qu'il change la couleur de chaque carré dont nous pouvons juste se débarrasser.

13
00:01:10,560 --> 00:01:22,620
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.

14
00:01:22,620 --> 00:01:26,980
Nous changeons l'affichage des messages Nous changeons le bouton de réinitialisation en changeant les couleurs.

15
00:01:27,030 --> 00:01:38,560
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.

16
00:01:38,820 --> 00:02:01,260
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.

17
00:02:01,260 --> 00:02:02,230
Je vais tout simplement commencer.

18
00:02:02,280 --> 00:02:04,040
Eh bien, nous allons lui donner un tableau vide d'abord.

19
00:02:04,350 --> 00:02:13,920
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.

20
00:02:14,010 --> 00:02:20,760
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.

21
00:02:20,760 --> 00:02:25,620
Et puis nous avons des variables qui sélectionnent les différents éléments sur la page.

22
00:02:26,100 --> 00:02:26,620
D'ACCORD.

23
00:02:26,790 --> 00:02:29,360
Encore une fois, ce qui arrive au tout début.

24
00:02:29,550 --> 00:02:34,600
Nous exécutons la fonction init qui va exécuter tout ce code ici.

25
00:02:35,010 --> 00:02:50,980
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.

26
00:02:51,150 --> 00:02:57,730
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.

27
00:02:57,780 --> 00:03:01,720
Alors assurez-vous que cela fonctionne avant de passer à autre chose.

28
00:03:02,610 --> 00:03:04,860
Nous vous rafraîchissons ..

29
00:03:04,890 --> 00:03:05,860
Aucune erreur.

30
00:03:06,180 --> 00:03:11,370
Et vous pouvez voir que je actualise la page et tout ce code est exécuté dans cette fonction init.

31
00:03:11,370 --> 00:03:15,270
Et à l'intérieur de là, il réinitialise tout ce que nous voyons.

32
00:03:15,270 --> 00:03:17,190
Ainsi, nos auditeurs sont configurés correctement.

33
00:03:17,460 --> 00:03:19,140
Nous recevons le message correct.

34
00:03:19,140 --> 00:03:20,160
Jouons encore.

35
00:03:20,370 --> 00:03:21,890
Tout fonctionne très bien.

36
00:03:22,170 --> 00:03:24,440
Jouons le mode facile.

37
00:03:25,680 --> 00:03:26,340
Voilà.

38
00:03:26,340 --> 00:03:31,430
Rejouons encore une fois.

39
00:03:31,530 --> 00:03:32,000
Génial.

40
00:03:32,100 --> 00:03:35,880
Donc ça marche très bien.

41
00:03:35,910 --> 00:03:46,290
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.

42
00:03:46,290 --> 00:03:52,140
Certaines personnes diront que si votre code est plus long que 10 lignes, vous devez le diviser en sa propre fonction.

43
00:03:52,230 --> 00:03:53,500
Nous pourrions faire cela ici.

44
00:03:53,700 --> 00:04:00,000
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.

45
00:04:00,040 --> 00:04:15,010
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.

46
00:04:15,960 --> 00:04:25,470
Et ici, nous allons simplement coller ce code qui va alors exécuter un retrait correctement une fois juste au début.

47
00:04:25,470 --> 00:04:29,450
Nous avons mis en place les auditeurs bouton mode et nous pouvons faire la même chose ici.

48
00:04:29,460 --> 00:04:45,120
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.

49
00:04:45,120 --> 00:04:48,240
Et je remarque que je n'ai pas utilisé un capital, vous êtes là.

50
00:04:48,300 --> 00:04:56,340
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.

51
00:04:56,340 --> 00:04:59,130
Donc, maintenant notre init est vraiment agréable et propre.

52
00:04:59,250 --> 00:05:04,610
Il met en place les boutons de mode il met en place les carrés et il réinitialise tout ce que nous voyons.

53
00:05:04,680 --> 00:05:06,850
Essayons de rafraîchir.

54
00:05:07,170 --> 00:05:10,970
On dirait que ça a fonctionné notre Square fonctionnent toujours très bien.

55
00:05:11,100 --> 00:05:15,510
Si nous les rafraîchissons plus nos boutons de mode fonctionnent toujours très bien aussi.

56
00:05:15,510 --> 00:05:19,040
Donc, c'est très bien et il semble que tout fonctionne très bien.

57
00:05:19,430 --> 00:05:21,600
C'est tout ce que nous allons faire pour refactor pour l'instant.

58
00:05:21,600 --> 00:05:26,360
Mais je vais vous montrer quelques choses que nous aimerions améliorer dans les futures vidéos.

59
00:05:26,610 --> 00:05:36,690
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.

60
00:05:36,690 --> 00:05:47,690
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.

61
00:05:47,820 --> 00:05:55,650
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.

62
00:05:55,890 --> 00:06:05,460
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.

63
00:06:05,550 --> 00:06:10,000
Nous n'avons aucune fonction qui est juste sur leurs propres comme ceci sur l'objet de fenêtre.

64
00:06:10,080 --> 00:06:12,790
Nous les ajoutons plutôt à notre propre objet.

65
00:06:12,870 --> 00:06:16,840
Donc, il ressemblerait à quelque chose comme ça, vous pourriez avoir un objet de jeu.

66
00:06:17,280 --> 00:06:21,840
Et puis nous pourrions écrire le point de jeu et nous allons juste faire une partie de celui-ci.

67
00:06:21,870 --> 00:06:36,590
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.

68
00:06:36,620 --> 00:06:41,130
Et le raisonnement derrière cela est un peu plus compliqué.

69
00:06:41,130 --> 00:06:44,720
La version courte est qu'il nous aide à garder les choses structurées et organisées.

70
00:06:44,940 --> 00:06:50,290
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.

71
00:06:50,460 --> 00:06:52,620
Donc, je ne vais pas passer par tout ce refactor.

72
00:06:52,620 --> 00:06:53,730
Ce que nous avons est assez bon.

73
00:06:53,730 --> 00:06:54,880
Ça marche très bien.

74
00:06:54,990 --> 00:07:05,010
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.

75
00:07:05,010 --> 00:07:11,670
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.

76
00:07:11,790 --> 00:07:12,940
Ce n'est donc pas l'objectif.

77
00:07:12,970 --> 00:07:20,910
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.