La creación de plantillas es una parte importante del trabajo con aplicaciones JavaScript. Es bastante común que los datos estén disponibles, pero no en un formato que esté listo para mostrarse en la pantalla. Suelen ser (pero no siempre) datos en formato JSON. Es un gran formato para trabajar con JavaScript, pero aún necesitamos formatearlo en algo que podamos usar.
Por ejemplo, aquí hay algunos datos ficticios que podríamos tener a mano:
var data = ( movies: ( ( movieTitle: "Ender's Game", movieDirector: "Gavin Hood", movieImage: "http://s3-us-west-2.amazonaws.com/s.cdpn.io/3/movie-endersgame.jpg.webp" ),… ) )Y, en última instancia, nos gustaría convertir eso en:
Ender's Game
Gavin Hood
Podrías pensar que jQuery es increíble en eso. jQuery está lleno de herramientas de manipulación / desplazamiento DOM. Pero podría decirse que no tiene un conjunto muy sólido de herramientas de creación de DOM. Creo que el equipo de jQuery estaba considerando agregar plantillas en algún momento, e incluso jugó con un complemento "oficial", pero no despegó.
En este video simplemente no hacemos lo que hoy se considera tradicionalmente como plantillas. Simplemente construimos un nuevo con jQuery y usamos la concatenación de cadenas para construir el HTML que necesitamos y finalmente lo inyectamos en la página. No hay nada técnicamente incorrecto en eso, pero trato de aclarar cómo este enfoque puede salirse de control rápidamente.
En solo un poco de JS que escribimos en este video, estamos mezclando una variedad de preocupaciones / trabajos:
- Obteniendo los datos. Lo tenemos a mano aquí, pero probablemente esto sea un poco más complejo. Quizás una solicitud Ajax asíncrona con manejo de errores y almacenamiento en caché y tal.
- Lógica de visualización. Decidir lo que tenemos que mostrar. ¿Cuántos? ¿Qué partes? ¿Basado en que?
- Manejo de eventos. A nuestros divs recién inyectados se les agregó manejo de eventos a medida que los creamos, en lugar de delegar.
- Plantillas. El HTML que creamos para lograr el diseño, estructurar los datos y adaptarnos a nuestras necesidades.
Este es el código espagueti con el que terminamos:
Vea el Pen 31b07f30dce13b31904da36693b29b41 de Chris Coyier (@chriscoyier) en CodePen
El siguiente bloque de videos se enfocará en la creación de plantillas porque eso es muy importante, pero en última instancia, estaremos separando todas estas preocupaciones y terminaremos con un código mucho más organizado y fácil de mantener.