Το Templating είναι ένα σημαντικό μέρος της εργασίας με εφαρμογές JavaScript. Είναι αρκετά κοινό ότι τα δεδομένα είναι διαθέσιμα σε εσάς, αλλά όχι σε μορφή που είναι έτοιμη να εμφανιστεί στην οθόνη. Αυτά είναι συνήθως (αλλά όχι πάντα) δεδομένα σε μορφή JSON. Αυτή είναι μια εξαιρετική μορφή για εργασία με JavaScript, αλλά πρέπει ακόμα να το μορφοποιήσουμε σε κάτι που μπορούμε να χρησιμοποιήσουμε.
Για παράδειγμα, εδώ είναι μερικά φανταστικά δεδομένα που ενδέχεται να έχουμε στη διάθεσή σας:
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" ),… ) )Και τελικά θα θέλαμε να το κάνουμε σε:
Ender's Game
Gavin Hood
Ίσως πιστεύετε ότι το jQuery είναι φοβερό σε αυτό Το jQuery είναι γεμάτο εργαλεία DOM traversing / manipulation. Αλλά δεν διαθέτει ένα πολύ ισχυρό σύνολο εργαλείων δημιουργίας DOM που μπορείτε να πείτε. Πιστεύω ότι η ομάδα jQuery σκέφτηκε να προσθέσει templating σε κάποιο σημείο, και μάλιστα έπαιξε με ένα «επίσημο» πρόσθετο, αλλά δεν απογειώθηκε.
Σε αυτό το βίντεο απλά δεν κάνουμε αυτό που σήμερα θεωρείται παραδοσιακά ως templating. Απλά δημιουργούμε ένα νέο με το jQuery και χρησιμοποιούμε τη συνένωση συμβολοσειρών για να χτίσουμε το HTML που χρειαζόμαστε και τελικά να το εγχύσουμε στη σελίδα. Δεν υπάρχει τίποτα τεχνικά λανθασμένο σχετικά με αυτό, αλλά προσπαθώ να οδηγήσω στο σπίτι πώς αυτή η προσέγγιση μπορεί να ξεφύγει γρήγορα από το χέρι.
Σε λίγο το JS που γράφουμε σε αυτό το βίντεο, συνδυάζουμε μια ποικιλία από ανησυχίες / θέσεις εργασίας:
- Λήψη των δεδομένων. Απλώς το έχουμε εδώ, αλλά μάλλον αυτό είναι λίγο πιο περίπλοκο. Ίσως ένα αίτημα ασύγχρονης Ajax με χειρισμό σφαλμάτων και προσωρινή αποθήκευση και τέτοια.
- Λογική οθόνης. Αποφασίζοντας τι πρέπει να δείξουμε. Πόσα? Ποια μέρη; Με βάση τι;
- Χειρισμός εκδηλώσεων. Τα πρόσφατα εγχυθέντα div μας είχαν προσθέσει το χειρισμό συμβάντων καθώς τα δημιουργήσαμε, αντί να αναθέτουμε.
- Πρότυπο. Ο HTML που δημιουργούμε για την ολοκλήρωση του σχεδιασμού, τη δομή των δεδομένων και την προσαρμογή ή τις ανάγκες.
Αυτός είναι ο κωδικός σπαγγέτι με τον οποίο ολοκληρώσαμε:
Δείτε το στυλό 31b07f30dce13b31904da36693b29b41 του Chris Coyier (@chriscoyier) στο CodePen
Το επόμενο μπλοκ βίντεο θα επικεντρωθεί σε ένα πρότυπο επειδή αυτό είναι εξαιρετικά σημαντικό, αλλά τελικά θα είμαστε κάπως διαλυμένοι όλων αυτών των ανησυχιών και καταλήγοντας με πολύ πιο οργανωμένο και διατηρήσιμο κώδικα.