1 00:00:00,330 --> 00:00:05,310 OK quindi c'è un ultimo posto in cui possiamo usare la funzione di reset che è proprio all'inizio del nostro codice. 2 00:00:05,550 --> 00:00:11,000 Quando la pagina carica per la prima volta quello che dobbiamo fare è necessario scegliere i 3 00:00:11,010 --> 00:00:17,220 colori casuali che hai fatto, quindi dobbiamo scegliere un colore da quei nuovi colori casuali che abbiamo già qui. 4 00:00:17,820 --> 00:00:24,570 E poi dobbiamo assegnare un colore a ogni quadrato della pagina in modo che possiamo usare la nostra funzione di reset perché 5 00:00:24,570 --> 00:00:26,290 questo è fondamentalmente ciò che fa. 6 00:00:26,490 --> 00:00:31,960 E ho intenzione di ripulire le cose semplicemente eseguendo una funzione proprio all'inizio chiamata init e 7 00:00:32,340 --> 00:00:33,430 che non esiste. 8 00:00:33,600 --> 00:00:38,610 E all'interno della nostra funzione di init metteremo tutto ciò che deve essere eseguito quando la pagina viene caricata. 9 00:00:39,000 --> 00:00:41,490 Quindi avremo la funzione init. 10 00:00:41,790 --> 00:00:47,970 E poi all'interno della nostra funzione di rete, la prima cosa che possiamo fare è andare avanti e aggiungere i nostri ascoltatori 11 00:00:47,970 --> 00:00:49,070 di pulsanti in modalità. 12 00:00:50,250 --> 00:00:52,200 E questo è solo per pulire le cose. 13 00:00:52,230 --> 00:00:55,110 Quindi non sta semplicemente fluttuando nel mezzo del nulla. 14 00:00:55,320 --> 00:00:56,850 In questo modo verrà indentato correttamente. 15 00:00:57,000 --> 00:01:05,260 Quindi questo è il nostro modo pulsanti per gli ascoltatori di eventi e ho intenzione di prendere questo codice qui. 16 00:01:05,400 --> 00:01:10,420 E ciò che fa è cambiare il colore di ogni quadrato di cui possiamo semplicemente sbarazzarci. 17 00:01:10,560 --> 00:01:16,410 Non abbiamo più bisogno di farlo perché useremo quel reset e poi aggiungerà klick listener a ogni quadrato 18 00:01:16,410 --> 00:01:21,780 in modo che quando clicchiamo ancora abbiamo bisogno di tutta questa logica per ripulire un po 'questo. 19 00:01:22,620 --> 00:01:26,980 Stiamo cambiando il display dei messaggi stiamo cambiando il pulsante di reset cambiando i colori. 20 00:01:27,030 --> 00:01:33,780 Quindi ho intenzione di copiarlo nella nostra funzione di init perché vogliamo anche che sia eseguito all'inizio 21 00:01:33,900 --> 00:01:38,560 quando la pagina si carica così bene e lo ha fatto correttamente. 22 00:01:38,820 --> 00:01:44,970 volta che abbiamo impostato qui i gestori di eventi per i pulsanti della modalità pulsanti e per 23 00:01:45,060 --> 00:01:52,080 i quadrati, quindi vogliamo semplicemente resettare lo schermo che significa eseguire la funzione di reset e cosa farà il 24 00:01:52,080 --> 00:01:59,610 reset è in realtà genererà i nostri colori quindi possiamo semplicemente avere i colori non definiti o una matrice vuota all'inizio. 25 00:01:59,610 --> 00:02:01,260 E poi l'ultima cosa una 26 00:02:01,260 --> 00:02:02,230 Comincerò con questo. 27 00:02:02,280 --> 00:02:04,040 Beh, prima gli daremo un array vuoto. 28 00:02:04,350 --> 00:02:11,910 E poi quello che possiamo fare è impostare il colore scelto solo per essere una variabile senza valore e salvarla e rendere 29 00:02:11,910 --> 00:02:13,920 le cose un po 'più pulite. 30 00:02:14,010 --> 00:02:19,980 Sposterò qui i miei selettori in modo che in cima ci siano tre variabili che non selezionano 31 00:02:19,980 --> 00:02:20,760 le cose. 32 00:02:20,760 --> 00:02:25,620 E poi abbiamo variabili che selezionano i diversi elementi sulla pagina. 33 00:02:26,100 --> 00:02:26,620 OK. 34 00:02:26,790 --> 00:02:29,360 Quindi, di nuovo, cosa succede all'inizio. 35 00:02:29,550 --> 00:02:34,600 Eseguiamo la funzione init che eseguirà tutto questo codice qui. 36 00:02:35,010 --> 00:02:42,160 E quel codice imposterà i nostri ascoltatori di pulsanti di modalità e preparerà i nostri ascoltatori quadrati e quindi eseguiremo il 37 00:02:42,600 --> 00:02:49,050 reset che seleziona i colori che preleva un colore casuale da quei colori che sceglie cambia il contenuto del 38 00:02:49,050 --> 00:02:50,980 testo e tutto il resto. 39 00:02:51,150 --> 00:02:56,400 E possiamo sbarazzarci di questa linea perché stiamo facendo questo ora all'interno della funzione init 40 00:02:56,520 --> 00:02:57,730 che sta chiamando reset. 41 00:02:57,780 --> 00:03:01,720 Quindi assicuriamoci che funzioni prima di andare avanti. 42 00:03:02,610 --> 00:03:04,860 Aggiorniamo l'apertura del cono. Nessun errore 43 00:03:04,890 --> 00:03:05,860 E puoi vedere che aggiorno la pagina e tutto quel codice viene eseguito in quella funzione di init. 44 00:03:06,180 --> 00:03:11,370 E dentro di lì sta ripristinando tutto ciò che vediamo. 45 00:03:11,370 --> 00:03:15,270 Quindi i nostri ascoltatori sono impostati correttamente. 46 00:03:15,270 --> 00:03:17,190 Otteniamo il messaggio corretto. 47 00:03:17,460 --> 00:03:19,140 Giochiamo ancora. 48 00:03:19,140 --> 00:03:20,160 Funziona tutto bene. 49 00:03:20,370 --> 00:03:21,890 Giochiamo alla modalità facile. 50 00:03:22,170 --> 00:03:24,440 Eccoci. 51 00:03:25,680 --> 00:03:26,340 Giochiamo ancora una volta. 52 00:03:26,340 --> 00:03:31,430 Grande. 53 00:03:31,530 --> 00:03:32,000 Quindi funziona bene. 54 00:03:32,100 --> 00:03:35,880 C'è un altro cambiamento che potremmo fare che è che questa 55 00:03:35,910 --> 00:03:40,890 funzione è qui ed ora è un po 'lunga e alcune persone con cui 56 00:03:40,890 --> 00:03:45,750 ho lavorato hanno regole molto rigide su quanto dovrebbe essere la funzione lunga. 57 00:03:45,750 --> 00:03:46,290 Alcune persone diranno se il tuo codice è più lungo di 10 linee, devi dividerlo nella sua funzione. 58 00:03:46,290 --> 00:03:51,900 Quindi potremmo farlo qui. 59 00:03:52,230 --> 00:03:53,500 Questa potrebbe essere una 60 00:03:53,700 --> 00:03:59,370 funzione a sé stante, tutto ciò che fa è impostare un ascoltatore di pulsanti in modo da poterlo fare qui. 61 00:03:59,370 --> 00:04:00,000 O semplicemente 62 00:04:00,040 --> 00:04:09,690 scrivendo il pulsante della modalità chiamiamolo pulsanti della modalità di configurazione e poi dichiareremo che la funzione qui sotto funzione i pulsanti della modalità di impostazione. 63 00:04:09,690 --> 00:04:15,010 E qui dentro incolleremo quel codice 64 00:04:15,960 --> 00:04:24,900 che eseguirà un indent correttamente una volta solo all'inizio. 65 00:04:24,900 --> 00:04:25,470 Impostiamo gli ascoltatori dei pulsanti di modalità e possiamo fare la stessa cosa qui. 66 00:04:25,470 --> 00:04:29,450 Copia questo codice e daremo a questo un 67 00:04:29,460 --> 00:04:38,100 nome per impostare gli ascoltatori quadrati o chiamiamolo impostare piazze simili e quindi scriveremo una funzione impostata. 68 00:04:38,100 --> 00:04:45,120 E sto notando che non ho usato una capitale sei lì. 69 00:04:45,120 --> 00:04:48,240 Quindi ho bisogno di prestare attenzione 70 00:04:48,300 --> 00:04:55,740 a questo set up qui e ci assicureremo che il nostro codice funzioni allo stesso modo. 71 00:04:55,740 --> 00:04:56,340 Quindi ora il nostro init è veramente bello e pulito. 72 00:04:56,340 --> 00:04:59,130 Imposta i pulsanti di modalità che imposta i quadrati e reimposta tutto ciò che vediamo. 73 00:04:59,250 --> 00:05:04,610 Proviamo a rinfrescare. 74 00:05:04,680 --> 00:05:06,850 Sembra che il nostro quadrato funzioni ancora bene. 75 00:05:07,170 --> 00:05:10,970 Se li aggiorniamo, i nostri pulsanti di modalità funzionano ancora bene. 76 00:05:11,100 --> 00:05:15,510 Quindi è tutto fantastico e sembra che tutto funzioni bene. 77 00:05:15,510 --> 00:05:19,040 Per ora ci occuperemo del refactoring. 78 00:05:19,430 --> 00:05:21,600 Ma ti mostrerò alcune cose che vorremmo migliorare nei video futuri. 79 00:05:21,600 --> 00:05:26,360 Una volta che avremo imparato qualcosa in più su javascript e ci saremo più a nostro agio, parleremo di alcuni modelli di 80 00:05:26,610 --> 00:05:31,020 design e i Pattern di progettazione sono fondamentalmente modi di strutturare il tuo codice in modo da poter avere questo codice. 81 00:05:31,020 --> 00:05:36,690 Funziona allo stesso modo con la stessa logica per creare lo stesso gioco e 10 persone diverse potrebbero scriverlo in 82 00:05:36,690 --> 00:05:42,030 10 modi diversi e non si tratta solo di quali funzioni si cavalcano o dei nomi delle variabili. 83 00:05:42,030 --> 00:05:47,690 Riguarda anche il modo in cui strutturiamo le cose in generale e il più 84 00:05:47,820 --> 00:05:53,100 semplice o uno dei più comuni è chiamato il modello di progettazione del modulo. 85 00:05:53,460 --> 00:05:55,650 E ciò significa che possiamo aggiungere un 86 00:05:55,890 --> 00:06:01,860 po 'di proprietà agli oggetti in modo da non avere variabili come questa che non siano all'interno di un oggetto. 87 00:06:01,860 --> 00:06:05,460 Non abbiamo funzioni che siano da sole come questo sull'oggetto della finestra. 88 00:06:05,550 --> 00:06:10,000 Piuttosto li aggiungiamo al nostro oggetto. 89 00:06:10,080 --> 00:06:12,790 Quindi sembrerebbe qualcosa di simile a un oggetto di gioco. 90 00:06:12,870 --> 00:06:16,840 E poi potremmo scrivere Game Point e ne faremo solo una parte. 91 00:06:17,280 --> 00:06:21,840 Game dot init è una funzione e dovremmo semplicemente copiare questo 92 00:06:21,870 --> 00:06:30,690 codice lassù e lo faremo per ogni singola funzione ogni singola variabile di proprietà e alla fine avremmo semplicemente eseguito il gioco. 93 00:06:30,690 --> 00:06:36,590 E il ragionamento dietro questo è un po 'più complicato. 94 00:06:36,620 --> 00:06:41,130 La versione breve è che ci aiuta a mantenere le cose strutturate e organizzate. 95 00:06:41,130 --> 00:06:44,720 Inoltre, aiuta a evitare le collisioni nello spazio dei nomi che ho menzionato prima in uno dei video degli oggetti. 96 00:06:44,940 --> 00:06:50,290 Quindi non passerò attraverso questo intero refactoring. 97 00:06:50,460 --> 00:06:52,620 Quello che abbiamo è abbastanza buono. 98 00:06:52,620 --> 00:06:53,730 Funziona bene. 99 00:06:53,730 --> 00:06:54,880 Ma mentre continui a 100 00:06:54,990 --> 00:06:59,100 crescere come sviluppatore e impari sempre di più, una delle cose a cui dovrai prestare attenzione 101 00:06:59,100 --> 00:07:04,590 una volta che ti senti più a tuo agio sono i modelli di progettazione javascript e ci sono libri scritti su questo. 102 00:07:04,590 --> 00:07:05,010 Ci sono 103 00:07:05,010 --> 00:07:10,740 saggi e blog e così tanti video e ci sono interi corsi in realtà online solo per strutturare il tuo javascript. 104 00:07:10,740 --> 00:07:11,670 Quindi non è l'obiettivo. 105 00:07:11,790 --> 00:07:12,940 E voglio ancora concentrarmi 106 00:07:12,970 --> 00:07:18,390 sul contenuto il codice HTML che la javascript C valuta sulla logica e la struttura può venire dopo. 107 00:07:18,450 --> 00:07:20,910 Ma voglio solo che tu sappia che ci sono altri modi per strutturare questo 108 00:07:21,210 --> 00:07:24,260