1
00:00:00,330 --> 00:00:05,440
OK dus er is nog een laatste plaats kunnen we de reset-functie die aan het begin van onze code gebruiken.

2
00:00:05,550 --> 00:00:17,440
Wanneer de pagina laadt de allereerste keer wat we moeten gebeuren is dat we nodig hebben om willekeurige kleuren die u vervolgens hebt gedaan die we nodig hebben om een ​​kleur te kiezen uit die nieuwe willekeurige kleuren die we hier al hebben plukken.

3
00:00:17,820 --> 00:00:26,290
En dan moeten we een kleur aan elk vierkant te wijzen op de pagina, zodat we onze reset-functie kunt gebruiken, want dat is eigenlijk wat het doet.

4
00:00:26,490 --> 00:00:33,430
En ik ga om dingen te ruimen door eigenlijk gewoon het uitvoeren van een functie aan het begin genoemd init en dat niet bestaat.

5
00:00:33,600 --> 00:00:38,820
En de binnenkant van onze init functie gaan we alles dat moet worden uitgevoerd wanneer de pagina wordt geladen zetten.

6
00:00:39,000 --> 00:00:41,490
Dus we zullen functie init hebben.

7
00:00:41,790 --> 00:00:49,070
En dan de binnenkant van onze netto-functie het eerste wat we kunnen doen is ga je gang en aan onze modusknop luisteraars.

8
00:00:50,250 --> 00:00:52,200
En dit is echt alleen maar om dingen te ruimen.

9
00:00:52,230 --> 00:00:55,110
Dus het is niet alleen rondzweven in de middle of nowhere.

10
00:00:55,320 --> 00:00:56,850
Zo zal het dit goed te laten inspringen.

11
00:00:57,000 --> 00:01:05,260
Dus dit is onze modusknoppen event luisteraars en ik ga deze code in te grijpen.

12
00:01:05,400 --> 00:01:10,420
En wat dit doet is het verandert de kleur van elk vierkant waarvan we kunnen gewoon te ontdoen van.

13
00:01:10,560 --> 00:01:22,620
We hoeven niet meer te doen, omdat we dat reset gaat gebruiken en dan het voegt ook klick luisteraars elk vierkant, zodat wanneer u klikt we nog steeds alles van deze logica kan deze schoon te maken een beetje.

14
00:01:22,620 --> 00:01:26,980
We veranderen de boodschap beeldscherm we het veranderen van de reset-knop veranderende kleuren.

15
00:01:27,030 --> 00:01:38,560
Dus ik ga gewoon om dit op te kopiëren naar onze init functie, omdat we ook willen dat om te draaien in het begin, wanneer de pagina wordt geladen zo goed en gedaan dat goed ook.

16
00:01:38,820 --> 00:02:01,260
En dan is het laatste wat als we eenmaal het opzetten van de event handlers hier voor de knoppen mode knoppen en de pleinen dan willen we gewoon opnieuw in te stellen op het scherm wat betekent dat het uitvoeren van de reset-functie en wat reset zal doen, is hij in feite zal onze kleuren te genereren dus we kunnen alleen maar kleuren zijn undefined of een lege array aan de start.

17
00:02:01,260 --> 00:02:02,230
Ik ga gewoon beginnen met het.

18
00:02:02,280 --> 00:02:04,040
Nou we zullen het eerst geven een lege array.

19
00:02:04,350 --> 00:02:13,920
En dan wat we kunnen doen is geplukt kleur enkel om een ​​variabele zonder waarde te zijn en op te slaan die en om dingen te maken een beetje schoner.

20
00:02:14,010 --> 00:02:20,760
Ik ga mijn kiezers hier beneden, zodat up top we hebben zijn drie variabelen die niet dingen te selecteren bewegen.

21
00:02:20,760 --> 00:02:25,620
En dan hebben we variabelen selecteert de verschillende elementen op de pagina.

22
00:02:26,100 --> 00:02:26,620
OK.

23
00:02:26,790 --> 00:02:29,360
Dus nogmaals wat er gebeurt met het allereerste begin.

24
00:02:29,550 --> 00:02:34,600
Lopen we het init functie die gaat dit alles code in te voeren.

25
00:02:35,010 --> 00:02:50,980
En die code gaat om het opzetten van onze modusknop luisteraars en het gaat om het opzetten van onze vierkante luisteraars en dan lopen we reset welke kleuren pakt het kiest een willekeurige kleur uit deze kleuren pikt het verandert de inhoud van de tekst en dat alles.

26
00:02:51,150 --> 00:02:57,730
En we kunnen ontdoen van deze lijn te krijgen, omdat we dit nu aan het doen zijn de binnenkant van de init functie die roept reset.

27
00:02:57,780 --> 00:03:01,720
Dus laten we ervoor zorgen dat dit werkt, voordat we verder gaan.

28
00:03:02,610 --> 00:03:04,860
We vernieuwen het openstellen van de con ..

29
00:03:04,890 --> 00:03:05,860
Geen fouten.

30
00:03:06,180 --> 00:03:11,370
En je kunt zien dat ik Vernieuw de pagina en al die code wordt uitgevoerd in dat init-functie.

31
00:03:11,370 --> 00:03:15,270
En de binnenkant van daar is het resetten van alles wat we zien.

32
00:03:15,270 --> 00:03:17,190
Dus onze luisteraars zijn correct ingesteld.

33
00:03:17,460 --> 00:03:19,140
We krijgen de juiste boodschap.

34
00:03:19,140 --> 00:03:20,160
Laten we opnieuw spelen.

35
00:03:20,370 --> 00:03:21,890
alles werkt prima.

36
00:03:22,170 --> 00:03:24,440
Laten we spelen het makkelijk stand.

37
00:03:25,680 --> 00:03:26,340
Daar gaan we.

38
00:03:26,340 --> 00:03:31,430
Laten we spelen weer een keer.

39
00:03:31,530 --> 00:03:32,000
Grote.

40
00:03:32,100 --> 00:03:35,880
Dus het werkt prima.

41
00:03:35,910 --> 00:03:46,290
Er is nog een verandering die we konden maken en dat is dat deze functie hier en nu is het een beetje lang en sommige mensen die ik heb gewerkt met echt strikte regels over hoe lang de functie zou moeten zijn.

42
00:03:46,290 --> 00:03:52,140
Sommige mensen zullen zeggen als je code is langer dan 10 lijnen die u nodig hebt om het te splitsen in zijn eigen functie.

43
00:03:52,230 --> 00:03:53,500
Zo konden we dat hier doen.

44
00:03:53,700 --> 00:04:00,000
Dit kan een eigen functie alles wat het doet is het opzetten van een modusknop luisteraars dus konden we dat doen hier te zijn.

45
00:04:00,040 --> 00:04:15,010
Of gewoon schrijven modusknop laten we noemen het op te zetten modusknoppen en dan zullen we verklaren dat de functie hier down functie opgezet mode knoppen.

46
00:04:15,960 --> 00:04:25,470
En binnen hier zijn we zullen gewoon plak de code die vervolgens een streepje één keer zal lopen behoorlijk maar aan het begin.

47
00:04:25,470 --> 00:04:29,450
We zetten de modusknop luisteraars en we kunnen hetzelfde doen hier.

48
00:04:29,460 --> 00:04:45,120
Kopieer deze code en we zullen deze een naam opgezet vierkante luisteraars te geven of te laten we noemen het opzetten pleinen als dat en dan zullen we een functie opgezet schrijven.

49
00:04:45,120 --> 00:04:48,240
En ik merkte ik een kapitaal gebruiken ben je daar.

50
00:04:48,300 --> 00:04:56,340
Dus ik moet hier aandacht te besteden aan dat het opzetten van pleinen en we zullen ervoor zorgen dat onze code werkt op dezelfde manier.

51
00:04:56,340 --> 00:04:59,130
Dus nu onze init is erg mooi en schoon.

52
00:04:59,250 --> 00:05:04,610
Het zet de modusknoppen het zet de pleinen en reset alles wat we zien.

53
00:05:04,680 --> 00:05:06,850
Laten we proberen op te frissen.

54
00:05:07,170 --> 00:05:10,970
Het lijkt erop dat het werkte onze plein nog steeds werken prima.

55
00:05:11,100 --> 00:05:15,510
Als we ze vernieuwen meer onze mode knoppen werken nog steeds prima ook.

56
00:05:15,510 --> 00:05:19,040
Dus dat is allemaal geweldig en het lijkt erop dat alles werkt prima.

57
00:05:19,430 --> 00:05:21,600
Dat is voor zover wij zullen nemen om refactoren voor nu.

58
00:05:21,600 --> 00:05:26,360
Maar ik zal u een paar dingen die we zouden willen verbeteren in de toekomst video's.

59
00:05:26,610 --> 00:05:36,690
Zodra we leren een beetje meer over javascript en meer comfortabel met het zullen we praten over een aantal design patterns en Design Patterns zijn in principe manieren van het structureren van uw code, zodat we deze code kan hebben.

60
00:05:36,690 --> 00:05:47,690
Het werkt op dezelfde manier dezelfde logica om hetzelfde spel te maken en 10 verschillende mensen konden schrijven in 10 verschillende manieren en het gaat niet alleen over welke functies we rijden of de namen van de variabelen.

61
00:05:47,820 --> 00:05:55,650
Het gaat ook over de manier waarop we de dingen in het algemeen en de eenvoudigste één of één van de meest voorkomende is de module ontwerp patroon genoemd structureren.

62
00:05:55,890 --> 00:06:05,460
En wat dat betekent is dat we een heleboel eigenschappen toe te voegen in objecten, zodat we geen variabelen zoals dit rondzweven die niet binnen van een object te hebben.

63
00:06:05,550 --> 00:06:10,000
We hebben geen enkele functie die gewoon op hun eigen als dit op het raam object te hebben.

64
00:06:10,080 --> 00:06:12,790
Eerder we ze toe te voegen aan onze eigen object.

65
00:06:12,870 --> 00:06:16,840
Dus het zou iets als dit je een spel object zou kunnen hebben kijken.

66
00:06:17,280 --> 00:06:21,840
En dan zouden we schrijven Game stip en we zullen gewoon doen een deel ervan.

67
00:06:21,870 --> 00:06:36,590
Game dot init is een functie en we zouden alleen deze code te kopiëren daar en we zouden dit doen voor elke functie ieder afzonderlijk object variabele en vervolgens aan het eind we zouden alleen rennen spel.

68
00:06:36,620 --> 00:06:41,130
En de redenering achter dit is een beetje ingewikkelder.

69
00:06:41,130 --> 00:06:44,720
De korte versie is dat het helpt ons de dingen gestructureerd en georganiseerd te houden.

70
00:06:44,940 --> 00:06:50,290
En het helpt ook voorkomen dat namespace botsingen die ik eerder genoemd in een van de video's object.

71
00:06:50,460 --> 00:06:52,620
Dus ik zal niet gaan door dit hele refactor.

72
00:06:52,620 --> 00:06:53,730
Wat wij hebben is goed genoeg.

73
00:06:53,730 --> 00:06:54,880
Het werkt prima.

74
00:06:54,990 --> 00:07:05,010
Maar als u doorgaat met groeien als een ontwikkelaar en je leert meer en meer één van de dingen die je aandacht te besteden aan als je eenmaal comfortabeler is javascript design patterns en er zijn boeken geschreven over dit.

75
00:07:05,010 --> 00:07:11,670
Er is essays en blogs en zo veel video's en er is volledige cursussen eigenlijk online alleen over het structureren van uw javascript.

76
00:07:11,790 --> 00:07:12,940
Dus dat is niet de focus.

77
00:07:12,970 --> 00:07:20,910
En ik nog echt alleen willen richten op de inhoud van de code van de HTML het javascript de C beoordelen van de logica en de structuur kan later komen.