JavaScript Avanzado: Refactorización, Empaquetado y Transpilación

En esta lección, veremos refactorizar nuestro código y documentarlo. Y aquí hay buenas noticias. Si llegamos a este punto, podría significar que estamos cerca hasta el final de lo que tenemos que hacer con el código, o al menos esa iteración a través lo que tenemos que hacer por el código. Así que algunas de estas cosas probablemente suenen como el sentido común, pero en mi carrera de consultoría y codificación Encontré que a veces el sentido común no es tan común. Entonces, si ya sabes estas cosas, bien por ti. Primero que nada, queremos mirar en formas de adjuntar controladores de eventos y todos adquirimos hábitos de codificación, ¿verdad? El problema aquí con estos dos controladores de eventos ¿queremos hacer dos cosas diferentes? cuando alguien hace clic en un botón en particular. El problema con la forma en que lo hemos hecho es uno de estos va a sobrescribir el otro debido a la forma en que hicimos la asignación del evento, así que realmente queremos evitar eso y ojalá no venga a la etapa de refactorización antes de que descubramos eso. Pero si lo hace entonces cambiemos esto por algo diferente. Por ejemplo, si tiene jQuery, puede usar on. Si usa JavaScript normal puede agregar un detector de eventos. Esto asegura que cualquier controlador adicional no sobrescriba los controladores anteriores como teníamos allí. Hasta ahora tan bueno. Una vez más, tal vez una especie de conocimiento de sentido común. Lo siguiente es y me pongo en este mismo hábito a veces, Me meto en un método y no estoy seguro de qué cosas sobre un objeto en particular en un método que voy a necesitar. Así que fíjate que tengo nombres esparcidos por ahí en algunas configuraciones diferentes y siento que mientras refactorizo ​​lo que realmente quiero hacer es volver atrás y hacer que el código sea más conciso, o al menos menos susceptible a mis errores tipográficos porque soy uno grande en jQuery de simplemente hacer eso y olvidar el signo de libra y luego mi código no funciona. Entonces, si tuviera que cambiar esto, Solo voy a crear variables. Entonces este es ese cuadro desplegable para que pueda simplemente hacer un índice seleccionado o puedo virar en un jQuery busque y obtenga la opción seleccionada y luego hacer el pre-pend cuando esté listo poner algo ahí. Así que solo hay un par de consejos rápidos en solo salvarte de ti mismo. ¿Qué hay sobre eso? Lo siguiente de nuevo puede parecer elemental, pero lo que no queremos hacer es acabar con algún tipo de archivo de script separado donde simplemente coloque un montón de funciones allí. Por lo general, verá que se llama nuestro archivo de utils, a la derecha, porque no sabemos cómo llamarlo. Aquí tienes un consejo. Si no tienes un nombre realmente claro cuál es su archivo, entonces probablemente tenga demasiadas cosas vertidas en un archivo. Así que solo hay unos pocos aquí, pero tengo una suma y resta y una multiplicación, y luego aquí está el problema también, que está ahí fuera en el espacio de nombres global porque tengo otro complemento en el archivo de este cliente y si los estoy usando en la misma página, ahora tengo un conflicto. En lo que respecta a esto, una de las cosas que podemos hacer es simplemente poner eso en un módulo. Y también podríamos explorar simplemente ponerlo en una clase también. Pero con los módulos de JavaScript, esto le da la opción de exportar solo ciertas funciones y no estás sacando cosas por ahí en el espacio de nombres global o al menos es una construcción más fácil para asegurarse de que no lo haga. Así que tenía todos estos aquí, por ejemplo, sumar, restar y multiplicar. Y otra cosa que estoy mirando cuando veo esto es, ya sabes, todos tienen el mismo conjunto de parámetros. Si se encuentra en esa situación, lo que quizás quieras mirar está convirtiendo esto en un objeto en su lugar porque queremos que nuestra lista de parámetros sea lo más concisa como sea posible, especialmente aquellos de ustedes que vienen del mundo funcional, eso es ciertamente una preocupación. Entonces, tal vez si tenemos todos estos y están atrapados en una clase de utilidades con un montón de otro código que tal vez no debería estar allí, sigamos adelante y pongamos esto en otro lugar. Así que creé una clase llamada operaciones de matemáticas, y nuevamente, estos no son innovadores operaciones de tipo matemático, son muy simples, pero estoy tratando de demostrar más un punto sobre cómo podemos crear nuestra funcionalidad sin tener que tenerlo en el espacio de nombres global. Ahora tengo esta clase llamada operaciones de matemáticas eso hace falta un constructor, pero observe que cada una de las sumas y restas y los métodos de multiplicar ahora toman un solo parámetro llamado triple, y lo que he creado para respaldar eso es solo otra clase llamada triples y valida que estas cosas son números para crearlo y simplemente sigue adelante y les da sus valores para que pueda pasarlos allí. Ahora también quería hablar un poco sobre documentación. Ahora puedes notar que tengo algunos comentarios adicionales allí. con algunas fichas extra y lo que es esto es una forma para documentar su código y es un paquete llamado JS doc. Puedes conseguirlo en una variedad de lugares. El lugar de donde lo obtuve es NPM aquí, así que si aún no lo tienes, es una cuestión sencilla de ir a la línea de comandos y haciendo una instalación NPM de JS doc. Una vez que tenga ese paquete, ahora puedes empezar a crear estos comentarios. Y de hecho, si quieres, ni siquiera tienes que escribir todo esto. Puedo probar este de aquí, por ejemplo. Si solo hago eso, ahí vamos la barra diagonal y dos asteriscos, realmente leerá la firma de la función por mí y como construir el comienzo de esa documentación. Ahora, lo que he hecho con estos es que he especificado el tipo de datos del parámetro y también el tipo de datos de lo que vuelve. El resto de esto es solo una descripción. Y lo que haremos es crear una página para la documentación. y esto se va a mostrar aquí. Así que podemos poner texto arbitrario justo después de cualquier cosa aquí. y esto creará las páginas HTML cuando regresemos a la línea de comando y crea esto. Y en cuanto a lo básico, param es solo, puedes poner los nombres ahí, y de nuevo, cualquier descripción que desee. No sé si lo necesito o no, pero ya sabes así es con los comentarios. Mientras lo leemos, pensamos, bueno, sabemos exactamente qué es, pero a medida que retrocedemos algún tiempo después o cuando otra persona usa nuestro código, probablemente sea una buena idea poner esto ahí. Así que lo he designado como constructor. Hay información sobre todos los parámetros. Esto se mostrará como una descripción. y cualquier cosa que devuelva un valor marcamos como devoluciones con el tipo. Ahora, si vas a crear documentación para diferentes archivos, también puede usar esto para crear un enlace en las páginas HTML que crea para que la gente pueda navegar de uno a otro. Ahora bien, estas clases están bastante acopladas en este punto. y en esta página, quiero dar un enlace a la documentación para triples y triples Le doy un enlace a operaciones matemáticas. Así que puedes hacer todo lo que quieras. Y si regresa a su línea de comando, vamos a hacer JS doc y luego necesito decirle a donde ir para que los archivos se compilen, y opcionalmente también puedo decirle dónde poner los archivos cuando los construye. Entonces, para este proyecto, Voy a dejar que haga lo que quiera hacer en cuanto a dónde va a poner esos archivos. Pero quería ir a buscar la documentación. de todo lo que está aquí en los guiones. Entonces, cualquier cosa sobre la que tenga documentación, obtendré una página para, de lo contrario, simplemente lo ignorará. Y el mejor resultado aquí, allá vamos, es que hago esto y acabo de recuperar el símbolo del sistema. Entonces debería tener una carpeta de salida. Ahí está. Ese es el valor predeterminado que crea en mi aplicación. y puedo acceder a todo esto a través de index dot HTML. Entonces están las clases que está documentando. No hice ninguna descripción en la página básica, pero hay operaciones matemáticas. Ahí está mi constructor. Hay cada uno de los métodos. Me dice dónde está en el código. y puedo usar ese enlace para navegar a la otra clase y puedes ver que no hice descripciones para todo, pero cuando lo hago aparece ahí mismo. Así que es una buena forma práctica de poder hacer documentación. Es solo cuestión de hacer algunos comentarios y todos sabemos por hacer esto, es más fácil si lo haces en el momento en que lo crea, no hacerlo más tarde. Gracias por ver. En nuestra próxima lección, hablaremos de empaquetar y minificar mientras nos preparamos para enviar nuestro producto.