A modelagem é uma parte importante do trabalho com aplicativos JavaScript. É bastante comum que os dados estejam disponíveis para você, mas não em um formato pronto para exibição na tela. São comumente (mas nem sempre) dados no formato JSON. É um ótimo formato para trabalhar com JavaScript, mas ainda precisamos formatá-lo em algo que possamos usar.
Por exemplo, aqui estão alguns dados fictícios que podemos ter em mãos:
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" ),… ) )E, no final, gostaríamos de transformar isso em:
Ender's Game
Gavin Hood
Você pode achar que jQuery é incrível nisso. jQuery está cheio de ferramentas de travessia / manipulação de DOM. Mas você pode dizer que não tem um conjunto muito robusto de ferramentas de criação de DOM. Acredito que a equipe jQuery estava pensando em adicionar modelos em algum momento, e até brincou com um plugin “oficial”, mas não decolou.
Neste vídeo, simplesmente não fazemos o que hoje é tradicionalmente considerado como modelagem. Nós simplesmente construímos um novo com jQuery e usamos a concatenação de string para construir o HTML de que precisamos e, por fim, injetá-lo na página. Não há nada tecnicamente incorreto nisso, mas tento mostrar como essa abordagem pode ficar rapidamente fora de controle.
Com apenas um pouco de JS que escrevemos neste vídeo, estamos misturando uma variedade de preocupações / trabalhos:
- Obtendo os dados. Nós apenas temos isso em mãos aqui, mas provavelmente é um pouco mais complexo. Talvez uma solicitação assíncrona Ajax com tratamento de erros e armazenamento em cache e tal.
- Lógica de exibição. Decidir o que precisamos mostrar. Quantos? Quais partes? Com base no que?
- Manipulação de eventos. Nossos divs recém-injetados tiveram o tratamento de eventos adicionado conforme os criamos, em vez de delegar.
- Templating. O HTML que criamos para realizar o design, estruturar os dados e acomodar ou necessidades.
Este é o código espaguete com o qual concluímos:
Veja a Caneta 31b07f30dce13b31904da36693b29b41 de Chris Coyier (@chriscoyier) no CodePen
O próximo bloco de vídeos vai se concentrar muito em modelos porque isso é muito importante, mas, no final das contas, vamos quebrar todas essas preocupações e acabar com um código muito mais organizado e sustentável.