OK quindi c'è un ultimo posto in cui possiamo usare la funzione di reset che è proprio all'inizio del nostro codice.
Quando la pagina carica per la prima volta quello che dobbiamo fare è necessario scegliere i
colori casuali che hai fatto, quindi dobbiamo scegliere un colore da quei nuovi colori casuali che abbiamo già qui.
E poi dobbiamo assegnare un colore a ogni quadrato della pagina in modo che possiamo usare la nostra funzione di reset perché
questo è fondamentalmente ciò che fa.
E ho intenzione di ripulire le cose semplicemente eseguendo una funzione proprio all'inizio chiamata init e
che non esiste.
E all'interno della nostra funzione di init metteremo tutto ciò che deve essere eseguito quando la pagina viene caricata.
Quindi avremo la funzione init.
E poi all'interno della nostra funzione di rete, la prima cosa che possiamo fare è andare avanti e aggiungere i nostri ascoltatori
di pulsanti in modalità.
E questo è solo per pulire le cose.
Quindi non sta semplicemente fluttuando nel mezzo del nulla.
In questo modo verrà indentato correttamente.
Quindi questo è il nostro modo pulsanti per gli ascoltatori di eventi e ho intenzione di prendere questo codice qui.
E ciò che fa è cambiare il colore di ogni quadrato di cui possiamo semplicemente sbarazzarci.
Non abbiamo più bisogno di farlo perché useremo quel reset e poi aggiungerà klick listener a ogni quadrato
in modo che quando clicchiamo ancora abbiamo bisogno di tutta questa logica per ripulire un po 'questo.
Stiamo cambiando il display dei messaggi stiamo cambiando il pulsante di reset cambiando i colori.
Quindi ho intenzione di copiarlo nella nostra funzione di init perché vogliamo anche che sia eseguito all'inizio
quando la pagina si carica così bene e lo ha fatto correttamente.
volta che abbiamo impostato qui i gestori di eventi per i pulsanti della modalità pulsanti e per
i quadrati, quindi vogliamo semplicemente resettare lo schermo che significa eseguire la funzione di reset e cosa farà il
reset è in realtà genererà i nostri colori quindi possiamo semplicemente avere i colori non definiti o una matrice vuota all'inizio.
E poi l'ultima cosa una
Comincerò con questo.
Beh, prima gli daremo un array vuoto.
E poi quello che possiamo fare è impostare il colore scelto solo per essere una variabile senza valore e salvarla e rendere
le cose un po 'più pulite.
Sposterò qui i miei selettori in modo che in cima ci siano tre variabili che non selezionano
le cose.
E poi abbiamo variabili che selezionano i diversi elementi sulla pagina.
OK.
Quindi, di nuovo, cosa succede all'inizio.
Eseguiamo la funzione init che eseguirà tutto questo codice qui.
E quel codice imposterà i nostri ascoltatori di pulsanti di modalità e preparerà i nostri ascoltatori quadrati e quindi eseguiremo il
reset che seleziona i colori che preleva un colore casuale da quei colori che sceglie cambia il contenuto del
testo e tutto il resto.
E possiamo sbarazzarci di questa linea perché stiamo facendo questo ora all'interno della funzione init
che sta chiamando reset.
Quindi assicuriamoci che funzioni prima di andare avanti.
Aggiorniamo l'apertura del cono. Nessun errore
E puoi vedere che aggiorno la pagina e tutto quel codice viene eseguito in quella funzione di init.
E dentro di lì sta ripristinando tutto ciò che vediamo.
Quindi i nostri ascoltatori sono impostati correttamente.
Otteniamo il messaggio corretto.
Giochiamo ancora.
Funziona tutto bene.
Giochiamo alla modalità facile.
Eccoci.
Giochiamo ancora una volta.
Grande.
Quindi funziona bene.
C'è un altro cambiamento che potremmo fare che è che questa
funzione è qui ed ora è un po 'lunga e alcune persone con cui
ho lavorato hanno regole molto rigide su quanto dovrebbe essere la funzione lunga.
Alcune persone diranno se il tuo codice è più lungo di 10 linee, devi dividerlo nella sua funzione.
Quindi potremmo farlo qui.
Questa potrebbe essere una
funzione a sé stante, tutto ciò che fa è impostare un ascoltatore di pulsanti in modo da poterlo fare qui.
O semplicemente
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.
E qui dentro incolleremo quel codice
che eseguirà un indent correttamente una volta solo all'inizio.
Impostiamo gli ascoltatori dei pulsanti di modalità e possiamo fare la stessa cosa qui.
Copia questo codice e daremo a questo un
nome per impostare gli ascoltatori quadrati o chiamiamolo impostare piazze simili e quindi scriveremo una funzione impostata.
E sto notando che non ho usato una capitale sei lì.
Quindi ho bisogno di prestare attenzione
a questo set up qui e ci assicureremo che il nostro codice funzioni allo stesso modo.
Quindi ora il nostro init è veramente bello e pulito.
Imposta i pulsanti di modalità che imposta i quadrati e reimposta tutto ciò che vediamo.
Proviamo a rinfrescare.
Sembra che il nostro quadrato funzioni ancora bene.
Se li aggiorniamo, i nostri pulsanti di modalità funzionano ancora bene.
Quindi è tutto fantastico e sembra che tutto funzioni bene.
Per ora ci occuperemo del refactoring.
Ma ti mostrerò alcune cose che vorremmo migliorare nei video futuri.
Una volta che avremo imparato qualcosa in più su javascript e ci saremo più a nostro agio, parleremo di alcuni modelli di
design e i Pattern di progettazione sono fondamentalmente modi di strutturare il tuo codice in modo da poter avere questo codice.
Funziona allo stesso modo con la stessa logica per creare lo stesso gioco e 10 persone diverse potrebbero scriverlo in
10 modi diversi e non si tratta solo di quali funzioni si cavalcano o dei nomi delle variabili.
Riguarda anche il modo in cui strutturiamo le cose in generale e il più
semplice o uno dei più comuni è chiamato il modello di progettazione del modulo.
E ciò significa che possiamo aggiungere un
po 'di proprietà agli oggetti in modo da non avere variabili come questa che non siano all'interno di un oggetto.
Non abbiamo funzioni che siano da sole come questo sull'oggetto della finestra.
Piuttosto li aggiungiamo al nostro oggetto.
Quindi sembrerebbe qualcosa di simile a un oggetto di gioco.
E poi potremmo scrivere Game Point e ne faremo solo una parte.
Game dot init è una funzione e dovremmo semplicemente copiare questo
codice lassù e lo faremo per ogni singola funzione ogni singola variabile di proprietà e alla fine avremmo semplicemente eseguito il gioco.
E il ragionamento dietro questo è un po 'più complicato.
La versione breve è che ci aiuta a mantenere le cose strutturate e organizzate.
Inoltre, aiuta a evitare le collisioni nello spazio dei nomi che ho menzionato prima in uno dei video degli oggetti.
Quindi non passerò attraverso questo intero refactoring.
Quello che abbiamo è abbastanza buono.
Funziona bene.
Ma mentre continui a
crescere come sviluppatore e impari sempre di più, una delle cose a cui dovrai prestare attenzione
una volta che ti senti più a tuo agio sono i modelli di progettazione javascript e ci sono libri scritti su questo.
Ci sono
saggi e blog e così tanti video e ci sono interi corsi in realtà online solo per strutturare il tuo javascript.
Quindi non è l'obiettivo.
E voglio ancora concentrarmi
sul contenuto il codice HTML che la javascript C valuta sulla logica e la struttura può venire dopo.
Ma voglio solo che tu sappia che ci sono altri modi per strutturare questo