La creazione di modelli è una parte importante del lavoro con le applicazioni JavaScript. È abbastanza comune che i dati siano disponibili per te, ma non in un formato che è pronto per essere visualizzato sullo schermo. Questi sono comunemente (ma non sempre) dati nel formato JSON. È un ottimo formato per lavorare con JavaScript, ma dobbiamo ancora formattarlo in qualcosa che possiamo usare.
Ad esempio, ecco alcuni dati fittizi che potremmo avere a portata di 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" ),… ) )E alla fine vorremmo trasformarlo in:
Ender's Game
Gavin Hood
Potresti pensare che jQuery sia fantastico in questo. jQuery è pieno di strumenti di manipolazione / attraversamento DOM. Ma non ha un set molto robusto di strumenti per la creazione di DOM si potrebbe dire. Credo che il team di jQuery a un certo punto stesse considerando l'aggiunta di modelli, e persino giocato con un plug-in "ufficiale", ma non è decollato.
In questo video semplicemente non facciamo quello che oggi è tradizionalmente considerato un modello. Creiamo semplicemente un nuovo con jQuery e usiamo la concatenazione di stringhe per costruire l'HTML di cui abbiamo bisogno e alla fine lo iniettiamo nella pagina. Non c'è nulla di tecnicamente scorretto in questo, ma cerco di spiegare come questo approccio possa sfuggire rapidamente di mano.
Solo nella piccola parte di JS che scriviamo in questo video, stiamo mescolando una varietà di preoccupazioni / lavori:
- Recupero dei dati. L'abbiamo solo a portata di mano qui, ma probabilmente è un po 'più complesso. Forse una richiesta Ajax asincrona con gestione degli errori e memorizzazione nella cache e così via.
- Logica di visualizzazione. Decidere cosa dobbiamo mostrare. Quanti? Quali parti? In base a cosa?
- Gestione degli eventi. Ai nostri div appena iniettati è stata aggiunta la gestione degli eventi durante la creazione, anziché la delega.
- Modelli. L'HTML che creiamo per realizzare il design, strutturare i dati e soddisfare le esigenze.
Questo è il codice spaghetti-ish che abbiamo finito con:
Guarda la penna 31b07f30dce13b31904da36693b29b41 di Chris Coyier (@chriscoyier) su CodePen
Il prossimo blocco di video si concentrerà sulla creazione di modelli perché è molto importante, ma alla fine smembreremo tutte queste preoccupazioni e ci ritroveremo con un codice molto più organizzato e gestibile.