1
00:00:00,330 --> 00:00:05,440
OK, tak więc jest jedna ostatnie miejsce możemy skorzystać z funkcji resetowania, który jest na samym początku naszego kodu.

2
00:00:05,550 --> 00:00:17,440
Kiedy strona ładuje się po raz pierwszy, co musimy się zdarzyć, to musimy wybrać losowe kolory, które zrobiłeś to musimy wybrać jeden kolor z tych nowych losowych kolorów, które już mamy tutaj.

3
00:00:17,820 --> 00:00:26,290
A potem musimy przypisać kolor do każdego kwadratu na stronie, dzięki czemu możemy korzystać z naszej funkcji resetowania bo to w zasadzie to, co robi.

4
00:00:26,490 --> 00:00:33,430
I mam zamiar oczyścić rzeczy właściwie tylko poprzez uruchomienie funkcji na samym początku o nazwie init, że nie istnieje.

5
00:00:33,600 --> 00:00:38,820
A w środku naszego funkcji init zamierzamy umieścić wszystko, co potrzebne do uruchomienia Po załadowaniu strony.

6
00:00:39,000 --> 00:00:41,490
Więc musimy funkcji init.

7
00:00:41,790 --> 00:00:49,070
A potem wewnątrz naszej funkcji netto pierwszą rzeczą, którą możemy zrobić, to iść do przodu i dodać w naszych słuchaczy przycisk MODE.

8
00:00:50,250 --> 00:00:52,200
I to jest tak naprawdę tylko do czyszczenia rzeczy.

9
00:00:52,230 --> 00:00:55,110
Więc to nie tylko krąży w środku pustkowia.

10
00:00:55,320 --> 00:00:56,850
Tak będzie wcięcie to prawidłowo.

11
00:00:57,000 --> 00:01:05,260
Więc to jest nasze detektory zdarzeń przyciski mode i mam zamiar chwycić ten kod tutaj.

12
00:01:05,400 --> 00:01:10,420
A co to robi to zmienia kolor każdego pola, które mogą po prostu pozbyć.

13
00:01:10,560 --> 00:01:22,620
Nie musimy tego robić ponieważ już użyjemy tego resetu a następnie dodaje także słuchaczy Klick do każdego kwadratu tak, że po kliknięciu wciąż musimy tym wszystkim logiki może to posprzątać trochę.

14
00:01:22,620 --> 00:01:26,980
Mamy zmianę wyświetlania wiadomości mamy zmianę przycisku reset zmienia kolory.

15
00:01:27,030 --> 00:01:38,560
Więc jestem po prostu skopiować to aż do naszego funkcji init, ponieważ chcemy też, że do uruchomienia na początku, gdy strona ładuje się tak dobrze i to zrobione prawidłowo, jak również.

16
00:01:38,820 --> 00:02:01,260
A potem bardzo Ostatnią rzeczą, gdy stworzyliśmy obsługi zdarzeń tutaj przycisków trybu przycisków i placów czym chcemy po prostu zresetować ekran, który oznacza uruchomienie funkcji resetowania i co zresetowane zrobi to będzie to faktycznie generuje nasze kolory więc możemy po prostu kolory są nieokreślone lub pusta tablica na początku.

17
00:02:01,260 --> 00:02:02,230
Ja po prostu zacząć z nim.

18
00:02:02,280 --> 00:02:04,040
No damy mu pustą tablicę w pierwszej kolejności.

19
00:02:04,350 --> 00:02:13,920
A potem co możemy zrobić, to ustawić kolor zbierane tylko być zmienną bez wartości i zapisać to i zrobić rzeczy trochę czystsze.

20
00:02:14,010 --> 00:02:20,760
Mam zamiar przenieść moje selektorów tu tak, że nawet najwyższej mamy trzy zmienne, które nie są wybieranie rzeczy.

21
00:02:20,760 --> 00:02:25,620
A potem mamy zmienne, które są wybierając różne elementy na stronie.

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

23
00:02:26,790 --> 00:02:29,360
Więc jeszcze raz to, co dzieje się na samym początku.

24
00:02:29,550 --> 00:02:34,600
Prowadzimy funkcję init będzie działać cały ten kod tutaj.

25
00:02:35,010 --> 00:02:50,980
I że kod ma zamiar założyć nasze słuchaczy przycisk MODE i to się dzieje, aby skonfigurować naszych słuchaczy kwadratowych, a następnie uruchamiamy resetu, który odbierze kolory to wybiera losowy kolor Spośród tych kolorach Znalazło to zmienia treść tekstu i to wszystko.

26
00:02:51,150 --> 00:02:57,730
I możemy pozbyć się tej linii, bo robimy to teraz wewnątrz funkcji init, który dzwoni reset.

27
00:02:57,780 --> 00:03:01,720
Warto więc upewnić się, że to działa, zanim ruszymy dalej.

28
00:03:02,610 --> 00:03:04,860
Mamy odświeżyć otworzyć con ..

29
00:03:04,890 --> 00:03:05,860
Brak błędów.

30
00:03:06,180 --> 00:03:11,370
I widać odświeżyć stronę i cały ten kod jest uruchamiany na tej funkcji init.

31
00:03:11,370 --> 00:03:15,270
A w środku tam to zresetowanie wszystko, co widzisz.

32
00:03:15,270 --> 00:03:17,190
Więc nasi słuchacze są prawidłowo skonfigurowane.

33
00:03:17,460 --> 00:03:19,140
Dostajemy poprawną wiadomość.

34
00:03:19,140 --> 00:03:20,160
Zagrajmy jeszcze raz.

35
00:03:20,370 --> 00:03:21,890
Wszystko działa dobrze.

36
00:03:22,170 --> 00:03:24,440
Zagrajmy w tryb łatwe.

37
00:03:25,680 --> 00:03:26,340
No to jedziemy.

38
00:03:26,340 --> 00:03:31,430
Zagrajmy jeszcze jeden więcej czasu.

39
00:03:31,530 --> 00:03:32,000
Wspaniały.

40
00:03:32,100 --> 00:03:35,880
Tak to działa dobrze.

41
00:03:35,910 --> 00:03:46,290
Jest jeszcze jedna zmiana moglibyśmy co jest, że ta funkcja tu i teraz jest to trochę długo, a niektórzy ludzie, że ja pracowałem mają bardzo surowe przepisy, jak długo funkcja powinna być.

42
00:03:46,290 --> 00:03:52,140
Niektórzy powiedzą, jeśli kod jest dłuższy niż 10 wierszy, które trzeba podzielić go na własnej funkcji.

43
00:03:52,230 --> 00:03:53,500
Więc możemy to zrobić tutaj.

44
00:03:53,700 --> 00:04:00,000
To może być funkcją własnego wszystko, co robi, to założyć słuchaczy przycisk MODE, więc mogliśmy zrobić tutaj.

45
00:04:00,040 --> 00:04:15,010
Albo po prostu pisanie przycisk trybu nazwijmy go skonfigurować przyciski tryb, a następnie będziemy zadeklarować tę funkcję tu działać w konfiguracji przycisków trybu.

46
00:04:15,960 --> 00:04:25,470
I wewnątrz tutaj musimy po prostu wklej ten kod, który następnie uruchomić wcięcie właściwie tylko jeden raz na początku.

47
00:04:25,470 --> 00:04:29,450
Założyliśmy słuchaczy przycisk MODE i możemy zrobić to samo tutaj.

48
00:04:29,460 --> 00:04:45,120
Skopiuj ten kod i damy to można sobie nazwy utworzonych słuchaczy kwadratowych albo niech po prostu nazwać to skonfigurować kwadraty tak i wtedy będziemy napisać funkcję skonfigurować.

49
00:04:45,120 --> 00:04:48,240
A ja widząc, że nie używać kapitał jesteś tam.

50
00:04:48,300 --> 00:04:56,340
Więc trzeba zwrócić uwagę na to, że ustanowiony kwadratów tutaj i będziemy mieć pewność, że nasz kod działa w ten sam sposób.

51
00:04:56,340 --> 00:04:59,130
Więc teraz nasza init jest naprawdę ładne i czyste.

52
00:04:59,250 --> 00:05:04,610
Ustala się przyciski trybu ustawia się kwadraty i resetuje wszystko, co widzimy.

53
00:05:04,680 --> 00:05:06,850
Starajmy się odświeżyć.

54
00:05:07,170 --> 00:05:10,970
Wygląda na to, że pracował nasz plac wciąż działać dobrze.

55
00:05:11,100 --> 00:05:15,510
Jeśli je odświeżyć bardziej nasze przyciski trybów nadal działać tak samo dobrze, jak również.

56
00:05:15,510 --> 00:05:19,040
Więc to wszystko świetnie i wygląda na to, że wszystko działa dobrze.

57
00:05:19,430 --> 00:05:21,600
To ile weźmiemy byłaby teraz.

58
00:05:21,600 --> 00:05:26,360
Ale pokażę wam kilka rzeczy, które chcemy poprawić w kolejnych filmach.

59
00:05:26,610 --> 00:05:36,690
Gdy dowiadujemy się nieco więcej o JavaScript i uzyskać bardziej komfortowo z nim porozmawiamy o pewnych wzorców projektowych i Wzorce projektowe są zasadniczo sposoby strukturyzacji kodu, dzięki czemu możemy mieć ten kod.

60
00:05:36,690 --> 00:05:47,690
To działa tak samo, na tych samych zasadach, aby tę samą grę i 10 różnych osób może napisać go w 10 różnych sposobów i nie chodzi tylko o to, jakie funkcje Jedziemy lub nazw zmiennych.

61
00:05:47,820 --> 00:05:55,650
Jest to również o tym, jak zorganizować rzeczy w ogóle, a najprostszy jeden lub jedną z najczęstszych jest nazywany wzór Moduł projektowania.

62
00:05:55,890 --> 00:06:05,460
A co to znaczy, możemy dodać kilka właściwości do obiektów tak, że nie mamy żadnych zmiennych jak ten krąży, które nie znajdują się wewnątrz obiektu.

63
00:06:05,550 --> 00:06:10,000
Nie mamy żadnych funkcji, które są po prostu na własną rękę, jak to na obiekcie okiennej.

64
00:06:10,080 --> 00:06:12,790
Raczej dodamy je do naszego obiektu.

65
00:06:12,870 --> 00:06:16,840
Tak to będzie wyglądać mniej więcej tak można mieć obiekt gry.

66
00:06:17,280 --> 00:06:21,840
A potem możemy napisać kropkę grę i musimy po prostu zrobić jedną część.

67
00:06:21,870 --> 00:06:36,590
Dot gier startowych jest funkcją, a my po prostu skopiuj ten kod tam i chcemy to zrobić dla każdej pojedynczej funkcji każdą pojedynczą zmienną nieruchomości, a następnie na samym końcu będziemy wystarczy uruchomić grę.

68
00:06:36,620 --> 00:06:41,130
I Rozumowanie to jest trochę bardziej skomplikowana.

69
00:06:41,130 --> 00:06:44,720
Krótka wersja jest to, że pomaga nam utrzymać wszystko uporządkowane i zorganizowane.

70
00:06:44,940 --> 00:06:50,290
A także pomaga uniknąć kolizji przestrzeni nazw o którym wspominałem wcześniej w jednym z filmów obiektowych.

71
00:06:50,460 --> 00:06:52,620
Więc nie będzie przechodzić przez cały ten Refactor.

72
00:06:52,620 --> 00:06:53,730
Co mamy jest wystarczająco dobre.

73
00:06:53,730 --> 00:06:54,880
To działa dobrze.

74
00:06:54,990 --> 00:07:05,010
Ale jak nadal rozwijać jako deweloper i dowiedzieć się więcej i więcej jedna z tych rzeczy będzie zwrócić uwagę, gdy pojawi się bardziej komfortowo jest javascript wzorce projektowe i tam są książki napisane na ten temat.

75
00:07:05,010 --> 00:07:11,670
Jest eseje i blogi i tak wiele filmów i tam faktycznie całe kursy on-line tylko o kształtowanie JavaScript.

76
00:07:11,790 --> 00:07:12,940
Więc to nie jest tematem.

77
00:07:12,970 --> 00:07:20,910
I nadal tak naprawdę chcemy się skupić na treści do kodu HTML javascript C ocenić logikę i strukturę może przyjść później.