De acuerdo, hay un último lugar donde podemos usar la función de reinicio que está al principio de nuestro código.
Cuando la página se cargue la primera vez, lo que necesitamos es que tengamos que elegir los
colores aleatorios que haya hecho, entonces tenemos que elegir un color de los nuevos colores aleatorios que ya tenemos aquí.
Y luego tenemos que asignar un color a cada cuadrado en la página para que podamos usar nuestra función de reinicio porque
eso es básicamente lo que hace.
Y voy a limpiar las cosas simplemente ejecutando una función desde el principio llamada init y
eso no existe.
Y dentro de nuestra función init vamos a poner todo lo que necesita para ejecutarse cuando se carga la página.
Entonces tendremos la función init.
Y luego, dentro de nuestra función de red, lo primero que podemos hacer es continuar y agregar nuestros oyentes de
botones de modo.
Y esto es realmente solo para limpiar las cosas.
Entonces, no es solo flotar en el medio de la nada.
Entonces sangrará esto apropiadamente.
Así que este es nuestro modo botones, escuchas de eventos y voy a tomar este código aquí.
Y lo que hace es cambiar el color de cada cuadrado del que podemos deshacernos.
Ya no necesitamos hacer eso porque usaremos ese restablecimiento y luego también agrega oyentes klick a cada cuadrado
para que cuando haga clic en, aún necesitemos toda esta lógica, podamos limpiar esto un poco.
Estamos cambiando la visualización del mensaje, estamos cambiando el botón de reinicio cambiando los colores.
Así que solo voy a copiar esto en nuestra función de inicio porque también queremos que se ejecute al
principio cuando la página se carga tan bien y también lo hace correctamente.
que hemos configurado los controladores de eventos aquí para los botones de modo botones y para los
cuadrados, entonces queremos simplemente reiniciar la pantalla, lo que significa ejecutar la función de reinicio y lo que hará
el reinicio es que realmente generará nuestros colores para que podamos tener los colores indefinidos o una matriz vacía al comienzo.
Y lo último una vez
Empezaré con eso.
Bueno, primero le daremos una matriz vacía.
Y luego, lo que podemos hacer es establecer el color seleccionado para que sea una variable sin valor y guardarlo y para hacer
las cosas un poco más limpias.
Voy a mover mis selectores aquí abajo para que arriba tenemos tres variables que no están
seleccionando cosas.
Y luego tenemos variables que están seleccionando los diferentes elementos en la página.
DE ACUERDO.
Entonces, ¿qué pasa al principio?
Ejecutamos la función init que ejecutará todo este código aquí.
Y ese código va a configurar nuestros oyentes de botones de modo y va a configurar nuestros oyentes cuadrados y luego
ejecutamos el restablecimiento, que elige los colores, elige un color aleatorio de los colores que elige, cambia el contenido
del texto y todo eso.
Y podemos deshacernos de esta línea porque estamos haciendo esto ahora dentro de la función init que
está llamando a reiniciar.
Así que asegurémonos de que esto funcione antes de seguir adelante.
Actualizamos abre la estafa. Sin errores.
Y puede ver que actualizo la página y todo ese código se está ejecutando en esa función de inicio.
Y dentro de eso está restableciendo todo lo que vemos.
Entonces nuestros oyentes están configurados correctamente.
Recibimos el mensaje correcto.
Juguemos otra vez.
Todo está funcionando bien.
Vamos a jugar en el modo fácil.
Aquí vamos.
Volvamos a jugar una vez más.
Estupendo.
Entonces funciona bien.
Hay un cambio más que podríamos hacer, que es que esta
función aquí y ahora es un poco larga y algunas personas con las que
he trabajado tienen reglas realmente estrictas sobre cuánto tiempo debe funcionar la función.
Algunas personas dirán que si su código tiene más de 10 líneas, necesita dividirlo en su propia función.
Entonces podríamos hacer eso aquí.
Esto podría ser una función
de sí mismo, todo lo que hace es configurar un oyente de botón de modo para que podamos hacer eso aquí.
O simplemente
escribiendo el botón de modo, vamos a llamarlo botones de modo de configuración y luego declararemos esa función aquí botones de modo de configuración de función.
Y aquí dentro solo pegaremos ese código
que luego ejecutará una sangría correctamente una sola vez al principio.
Configuramos los oyentes del botón de modo y podemos hacer lo mismo aquí.
Copie este código y le daremos a este un
nombre de oyentes cuadrados configurados o simplemente lo llamaremos configurar cuadrados así y luego escribiremos una función configurada.
Y me doy cuenta de que no usé capital, ¿estás ahí?
Así que tengo que prestar atención a
esa configuración de cuadrados aquí y nos aseguraremos de que nuestro código funcione de la misma manera.
Así que ahora nuestro init es realmente agradable y limpio.
Configura los botones de modo que configura los cuadrados y restablece todo lo que vemos.
Intentemos refrescar
Parece que funcionó nuestra Plaza todavía funciona bien.
Si los refrescamos más, nuestros botones de modo también funcionan igual de bien.
Así que eso es genial y parece que todo está funcionando bien.
Eso es todo lo que tomaremos para refactorizar por ahora.
Pero te mostraré algunas cosas que desearíamos mejorar en futuros videos.
Una vez que aprendamos un poco más sobre JavaScript y nos sintamos más cómodos con él, hablaremos sobre algunos patrones de
diseño y los Patrones de Diseño son básicamente formas de estructurar su código para que podamos tener este código.
Funciona de la misma manera la misma lógica para hacer el mismo juego y 10 personas diferentes podrían escribirlo de
10 maneras diferentes y no se trata solo de qué funciones manejamos o los nombres de las variables.
También se trata de cómo estructuramos las cosas en general y el más simple
o uno de los más comunes se llama patrón de diseño del módulo.
Y lo que eso significa es que podemos agregar
un conjunto de propiedades a los objetos, por lo que no tenemos variables como esta flotando que no estén dentro de un objeto.
No tenemos ninguna función que esté sola como esta en el objeto ventana.
Más bien, los agregamos a nuestro propio objeto.
Entonces se vería algo como esto, podrías tener un objeto de juego.
Y luego podríamos escribir Game dot y solo haremos una parte de eso.
Game dot init es una función y simplemente copiaríamos este código
allí arriba y haríamos esto para cada función, cada variable de propiedad y luego, al final, solo ejecutaremos el juego.
Y el razonamiento detrás de esto es un poco más complicado.
La versión corta es que nos ayuda a mantener las cosas estructuradas y organizadas.
Y también ayuda a evitar colisiones de espacios de nombres que mencioné anteriormente en uno de los videos objeto.
Entonces no voy a revisar todo este refactor.
Lo que tenemos es lo suficientemente bueno.
Funciona bien.
Pero a medida que
continúas creciendo como desarrollador y aprendes más y más una de las cosas a las que
prestarás atención una vez que te sientas más cómodo son los patrones de diseño de JavaScript y hay libros escritos sobre esto.
Hay
ensayos, blogs y muchos videos, y hay cursos enteros en línea sobre estructurar tu javascript.
Entonces ese no es el foco.
Y de todos modos solo
quiero centrarme en el contenido: el código, el HTML, el javascript, la C, evalúan la lógica y la estructura puede venir más tarde.
Pero solo quiero que sepas que hay otras formas de estructurar esto