1 00:00:00,330 --> 00:00:05,310 De acuerdo, hay un último lugar donde podemos usar la función de reinicio que está al principio de nuestro código. 2 00:00:05,550 --> 00:00:11,000 Cuando la página se cargue la primera vez, lo que necesitamos es que tengamos que elegir los 3 00:00:11,010 --> 00:00:17,220 colores aleatorios que haya hecho, entonces tenemos que elegir un color de los nuevos colores aleatorios que ya tenemos aquí. 4 00:00:17,820 --> 00:00:24,570 Y luego tenemos que asignar un color a cada cuadrado en la página para que podamos usar nuestra función de reinicio porque 5 00:00:24,570 --> 00:00:26,290 eso es básicamente lo que hace. 6 00:00:26,490 --> 00:00:31,960 Y voy a limpiar las cosas simplemente ejecutando una función desde el principio llamada init y 7 00:00:32,340 --> 00:00:33,430 eso no existe. 8 00:00:33,600 --> 00:00:38,610 Y dentro de nuestra función init vamos a poner todo lo que necesita para ejecutarse cuando se carga la página. 9 00:00:39,000 --> 00:00:41,490 Entonces tendremos la función init. 10 00:00:41,790 --> 00:00:47,970 Y luego, dentro de nuestra función de red, lo primero que podemos hacer es continuar y agregar nuestros oyentes de 11 00:00:47,970 --> 00:00:49,070 botones de modo. 12 00:00:50,250 --> 00:00:52,200 Y esto es realmente solo para limpiar las cosas. 13 00:00:52,230 --> 00:00:55,110 Entonces, no es solo flotar en el medio de la nada. 14 00:00:55,320 --> 00:00:56,850 Entonces sangrará esto apropiadamente. 15 00:00:57,000 --> 00:01:05,260 Así que este es nuestro modo botones, escuchas de eventos y voy a tomar este código aquí. 16 00:01:05,400 --> 00:01:10,420 Y lo que hace es cambiar el color de cada cuadrado del que podemos deshacernos. 17 00:01:10,560 --> 00:01:16,410 Ya no necesitamos hacer eso porque usaremos ese restablecimiento y luego también agrega oyentes klick a cada cuadrado 18 00:01:16,410 --> 00:01:21,780 para que cuando haga clic en, aún necesitemos toda esta lógica, podamos limpiar esto un poco. 19 00:01:22,620 --> 00:01:26,980 Estamos cambiando la visualización del mensaje, estamos cambiando el botón de reinicio cambiando los colores. 20 00:01:27,030 --> 00:01:33,780 Así que solo voy a copiar esto en nuestra función de inicio porque también queremos que se ejecute al 21 00:01:33,900 --> 00:01:38,560 principio cuando la página se carga tan bien y también lo hace correctamente. 22 00:01:38,820 --> 00:01:44,970 que hemos configurado los controladores de eventos aquí para los botones de modo botones y para los 23 00:01:45,060 --> 00:01:52,080 cuadrados, entonces queremos simplemente reiniciar la pantalla, lo que significa ejecutar la función de reinicio y lo que hará 24 00:01:52,080 --> 00:01:59,610 el reinicio es que realmente generará nuestros colores para que podamos tener los colores indefinidos o una matriz vacía al comienzo. 25 00:01:59,610 --> 00:02:01,260 Y lo último una vez 26 00:02:01,260 --> 00:02:02,230 Empezaré con eso. 27 00:02:02,280 --> 00:02:04,040 Bueno, primero le daremos una matriz vacía. 28 00:02:04,350 --> 00:02:11,910 Y luego, lo que podemos hacer es establecer el color seleccionado para que sea una variable sin valor y guardarlo y para hacer 29 00:02:11,910 --> 00:02:13,920 las cosas un poco más limpias. 30 00:02:14,010 --> 00:02:19,980 Voy a mover mis selectores aquí abajo para que arriba tenemos tres variables que no están 31 00:02:19,980 --> 00:02:20,760 seleccionando cosas. 32 00:02:20,760 --> 00:02:25,620 Y luego tenemos variables que están seleccionando los diferentes elementos en la página. 33 00:02:26,100 --> 00:02:26,620 DE ACUERDO. 34 00:02:26,790 --> 00:02:29,360 Entonces, ¿qué pasa al principio? 35 00:02:29,550 --> 00:02:34,600 Ejecutamos la función init que ejecutará todo este código aquí. 36 00:02:35,010 --> 00:02:42,160 Y ese código va a configurar nuestros oyentes de botones de modo y va a configurar nuestros oyentes cuadrados y luego 37 00:02:42,600 --> 00:02:49,050 ejecutamos el restablecimiento, que elige los colores, elige un color aleatorio de los colores que elige, cambia el contenido 38 00:02:49,050 --> 00:02:50,980 del texto y todo eso. 39 00:02:51,150 --> 00:02:56,400 Y podemos deshacernos de esta línea porque estamos haciendo esto ahora dentro de la función init que 40 00:02:56,520 --> 00:02:57,730 está llamando a reiniciar. 41 00:02:57,780 --> 00:03:01,720 Así que asegurémonos de que esto funcione antes de seguir adelante. 42 00:03:02,610 --> 00:03:04,860 Actualizamos abre la estafa. Sin errores. 43 00:03:04,890 --> 00:03:05,860 Y puede ver que actualizo la página y todo ese código se está ejecutando en esa función de inicio. 44 00:03:06,180 --> 00:03:11,370 Y dentro de eso está restableciendo todo lo que vemos. 45 00:03:11,370 --> 00:03:15,270 Entonces nuestros oyentes están configurados correctamente. 46 00:03:15,270 --> 00:03:17,190 Recibimos el mensaje correcto. 47 00:03:17,460 --> 00:03:19,140 Juguemos otra vez. 48 00:03:19,140 --> 00:03:20,160 Todo está funcionando bien. 49 00:03:20,370 --> 00:03:21,890 Vamos a jugar en el modo fácil. 50 00:03:22,170 --> 00:03:24,440 Aquí vamos. 51 00:03:25,680 --> 00:03:26,340 Volvamos a jugar una vez más. 52 00:03:26,340 --> 00:03:31,430 Estupendo. 53 00:03:31,530 --> 00:03:32,000 Entonces funciona bien. 54 00:03:32,100 --> 00:03:35,880 Hay un cambio más que podríamos hacer, que es que esta 55 00:03:35,910 --> 00:03:40,890 función aquí y ahora es un poco larga y algunas personas con las que 56 00:03:40,890 --> 00:03:45,750 he trabajado tienen reglas realmente estrictas sobre cuánto tiempo debe funcionar la función. 57 00:03:45,750 --> 00:03:46,290 Algunas personas dirán que si su código tiene más de 10 líneas, necesita dividirlo en su propia función. 58 00:03:46,290 --> 00:03:51,900 Entonces podríamos hacer eso aquí. 59 00:03:52,230 --> 00:03:53,500 Esto podría ser una función 60 00:03:53,700 --> 00:03:59,370 de sí mismo, todo lo que hace es configurar un oyente de botón de modo para que podamos hacer eso aquí. 61 00:03:59,370 --> 00:04:00,000 O simplemente 62 00:04:00,040 --> 00:04:09,690 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. 63 00:04:09,690 --> 00:04:15,010 Y aquí dentro solo pegaremos ese código 64 00:04:15,960 --> 00:04:24,900 que luego ejecutará una sangría correctamente una sola vez al principio. 65 00:04:24,900 --> 00:04:25,470 Configuramos los oyentes del botón de modo y podemos hacer lo mismo aquí. 66 00:04:25,470 --> 00:04:29,450 Copie este código y le daremos a este un 67 00:04:29,460 --> 00:04:38,100 nombre de oyentes cuadrados configurados o simplemente lo llamaremos configurar cuadrados así y luego escribiremos una función configurada. 68 00:04:38,100 --> 00:04:45,120 Y me doy cuenta de que no usé capital, ¿estás ahí? 69 00:04:45,120 --> 00:04:48,240 Así que tengo que prestar atención a 70 00:04:48,300 --> 00:04:55,740 esa configuración de cuadrados aquí y nos aseguraremos de que nuestro código funcione de la misma manera. 71 00:04:55,740 --> 00:04:56,340 Así que ahora nuestro init es realmente agradable y limpio. 72 00:04:56,340 --> 00:04:59,130 Configura los botones de modo que configura los cuadrados y restablece todo lo que vemos. 73 00:04:59,250 --> 00:05:04,610 Intentemos refrescar 74 00:05:04,680 --> 00:05:06,850 Parece que funcionó nuestra Plaza todavía funciona bien. 75 00:05:07,170 --> 00:05:10,970 Si los refrescamos más, nuestros botones de modo también funcionan igual de bien. 76 00:05:11,100 --> 00:05:15,510 Así que eso es genial y parece que todo está funcionando bien. 77 00:05:15,510 --> 00:05:19,040 Eso es todo lo que tomaremos para refactorizar por ahora. 78 00:05:19,430 --> 00:05:21,600 Pero te mostraré algunas cosas que desearíamos mejorar en futuros videos. 79 00:05:21,600 --> 00:05:26,360 Una vez que aprendamos un poco más sobre JavaScript y nos sintamos más cómodos con él, hablaremos sobre algunos patrones de 80 00:05:26,610 --> 00:05:31,020 diseño y los Patrones de Diseño son básicamente formas de estructurar su código para que podamos tener este código. 81 00:05:31,020 --> 00:05:36,690 Funciona de la misma manera la misma lógica para hacer el mismo juego y 10 personas diferentes podrían escribirlo de 82 00:05:36,690 --> 00:05:42,030 10 maneras diferentes y no se trata solo de qué funciones manejamos o los nombres de las variables. 83 00:05:42,030 --> 00:05:47,690 También se trata de cómo estructuramos las cosas en general y el más simple 84 00:05:47,820 --> 00:05:53,100 o uno de los más comunes se llama patrón de diseño del módulo. 85 00:05:53,460 --> 00:05:55,650 Y lo que eso significa es que podemos agregar 86 00:05:55,890 --> 00:06:01,860 un conjunto de propiedades a los objetos, por lo que no tenemos variables como esta flotando que no estén dentro de un objeto. 87 00:06:01,860 --> 00:06:05,460 No tenemos ninguna función que esté sola como esta en el objeto ventana. 88 00:06:05,550 --> 00:06:10,000 Más bien, los agregamos a nuestro propio objeto. 89 00:06:10,080 --> 00:06:12,790 Entonces se vería algo como esto, podrías tener un objeto de juego. 90 00:06:12,870 --> 00:06:16,840 Y luego podríamos escribir Game dot y solo haremos una parte de eso. 91 00:06:17,280 --> 00:06:21,840 Game dot init es una función y simplemente copiaríamos este código 92 00:06:21,870 --> 00:06:30,690 allí arriba y haríamos esto para cada función, cada variable de propiedad y luego, al final, solo ejecutaremos el juego. 93 00:06:30,690 --> 00:06:36,590 Y el razonamiento detrás de esto es un poco más complicado. 94 00:06:36,620 --> 00:06:41,130 La versión corta es que nos ayuda a mantener las cosas estructuradas y organizadas. 95 00:06:41,130 --> 00:06:44,720 Y también ayuda a evitar colisiones de espacios de nombres que mencioné anteriormente en uno de los videos objeto. 96 00:06:44,940 --> 00:06:50,290 Entonces no voy a revisar todo este refactor. 97 00:06:50,460 --> 00:06:52,620 Lo que tenemos es lo suficientemente bueno. 98 00:06:52,620 --> 00:06:53,730 Funciona bien. 99 00:06:53,730 --> 00:06:54,880 Pero a medida que 100 00:06:54,990 --> 00:06:59,100 continúas creciendo como desarrollador y aprendes más y más una de las cosas a las que 101 00:06:59,100 --> 00:07:04,590 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. 102 00:07:04,590 --> 00:07:05,010 Hay 103 00:07:05,010 --> 00:07:10,740 ensayos, blogs y muchos videos, y hay cursos enteros en línea sobre estructurar tu javascript. 104 00:07:10,740 --> 00:07:11,670 Entonces ese no es el foco. 105 00:07:11,790 --> 00:07:12,940 Y de todos modos solo 106 00:07:12,970 --> 00:07:18,390 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. 107 00:07:18,450 --> 00:07:20,910 Pero solo quiero que sepas que hay otras formas de estructurar esto 108 00:07:21,210 --> 00:07:24,260