La création de modèles est une partie importante du travail avec les applications JavaScript. Il est assez courant que les données vous soient disponibles, mais pas dans un format prêt à s'afficher à l'écran. Il s'agit généralement (mais pas toujours) de données au format JSON. C'est un excellent format pour travailler avec JavaScript, mais nous devons toujours le formater en quelque chose que nous pouvons utiliser.
Par exemple, voici quelques données fictives que nous pourrions avoir sous la main:
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" ),… ) )Et finalement, nous aimerions en faire:
Ender's Game
Gavin Hood
Vous pourriez penser que jQuery est génial à cela. jQuery regorge d'outils de traversée / manipulation DOM. Mais il n'a pas un ensemble très robuste d'outils de création DOM, direz-vous. Je crois que l'équipe jQuery envisageait d'ajouter des modèles à un moment donné, et a même joué avec un plugin «officiel», mais cela n'a pas décollé.
Dans cette vidéo, nous ne faisons tout simplement pas ce que l'on considère aujourd'hui comme un modèle. Nous construisons simplement un nouveau avec jQuery et utilisons la concaténation de chaînes pour créer le HTML dont nous avons besoin et l'injecter finalement sur la page. Il n'y a rien de techniquement incorrect à ce sujet, mais j'essaie de comprendre comment cette approche peut rapidement devenir incontrôlable.
Dans juste le petit peu de JS que nous écrivons dans cette vidéo, nous mélangons une variété de préoccupations / emplois:
- Obtenir les données. Nous l'avons juste sous la main, mais c'est probablement un peu plus complexe. Peut-être une requête Ajax asynchrone avec gestion des erreurs et mise en cache, etc.
- Afficher la logique. Décider de ce que nous devons montrer. Combien de? Quelles parties? Basé sur quoi?
- Gestion des événements. La gestion des événements a été ajoutée à nos div nouvellement injectés au fur et à mesure que nous les avons créés, plutôt que de les déléguer.
- Templating. Le HTML que nous créons pour réaliser la conception, structurer les données et s'adapter aux besoins.
C'est le code spaghetti-ish avec lequel nous avons fini:
Voir le Pen 31b07f30dce13b31904da36693b29b41 par Chris Coyier (@chriscoyier) sur CodePen
Le prochain bloc de vidéos va se concentrer sur la création de modèles parce que c'est très important, mais en fin de compte, nous allons en quelque sorte briser toutes ces préoccupations et nous retrouver avec un code beaucoup plus organisé et maintenable.