Vorlagen sind ein wichtiger Bestandteil der Arbeit mit JavaScript-Anwendungen. Es ist ziemlich üblich, dass Daten für Sie verfügbar sind, jedoch nicht in einem Format, das auf dem Bildschirm angezeigt werden kann. Das sind häufig (aber nicht immer) Daten im JSON-Format. Das ist ein großartiges Format für die Arbeit mit JavaScript, aber wir müssen es noch in etwas formatieren, das wir verwenden können.
Hier sind zum Beispiel einige fiktive Daten, die wir möglicherweise zur Hand haben:
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" ),… ) )Und letztendlich möchten wir daraus machen:
Ender's Game
Gavin Hood
Sie könnten denken, dass jQuery dabei großartig ist. jQuery ist voll von DOM-Traversing- / Manipulations-Tools. Es gibt jedoch keine sehr robusten Tools zur DOM-Erstellung, wie Sie vielleicht sagen. Ich glaube, das jQuery-Team hat überlegt, irgendwann Vorlagen hinzuzufügen, und sogar mit einem „offiziellen“ Plugin gespielt, aber es hat nicht angefangen.
In diesem Video machen wir einfach nicht das, was heutzutage traditionell als Vorlage angesehen wird. Wir erstellen gerade ein neues mit jQuery und verwenden die Zeichenfolgenverkettung, um das benötigte HTML zu erstellen und es schließlich auf die Seite zu injizieren. Daran ist technisch nichts auszusetzen, aber ich versuche nach Hause zu fahren, wie dieser Ansatz schnell außer Kontrolle geraten kann.
In dem kleinen Teil von JS, den wir in diesem Video schreiben, mischen wir eine Vielzahl von Anliegen / Jobs:
- Daten abrufen. Wir haben es hier nur zur Hand, aber wahrscheinlich ist dies etwas komplexer. Vielleicht eine asynchrone Ajax-Anfrage mit Fehlerbehandlung und Caching und so.
- Logik anzeigen. Entscheiden, was wir zeigen müssen. Wie viele? Welche Teile? Basierend worauf?
- Handhabung des Events. Bei unseren neu injizierten Divs wurde die Ereignisbehandlung hinzugefügt, als wir sie erstellt haben, anstatt sie zu delegieren.
- Vorlagen. Der HTML-Code, den wir erstellen, um das Design zu erstellen, die Daten zu strukturieren und den Anforderungen gerecht zu werden.
Dies ist der Spaghetti-Code, mit dem wir fertig sind:
Siehe den Stift 31b07f30dce13b31904da36693b29b41 von Chris Coyier (@chriscoyier) auf CodePen
Der nächste Block von Videos wird sich auf das Templating konzentrieren, weil das sehr wichtig ist, aber letztendlich werden wir all diese Bedenken auseinander brechen und am Ende viel besser organisierten und wartbaren Code haben.