Σταματήσαμε στο τελευταίο βίντεο με λίγο μπερδεμένο χάος. Όλα σε ένα μπλοκ της JavaScript συνδυάζαμε την ανάκτηση δεδομένων, την οθόνη και τη λογική της επιχείρησης και το πρότυπο. Σε αυτό το βίντεο θα αρχίσουμε να σπάζουμε αυτά τα πράγματα για να φτάσουμε στον πιο οργανωμένο, διατηρήσιμο και κατανοητό κώδικα. Ένα μεγάλο μέρος αυτού είναι το templating.
Πάρτε το νούμερο 1 στην templating περιπέτειά μας με τιμόνι Το Handlebars έχει μια έξυπνη προσέγγιση στο ότι το HTML για το πρότυπο τοποθετείται κυριολεκτικά στο HTML. Χρησιμοποιείτε μια ειδική ετικέτα. Κάνει ωραία συγγραφή γιατί μπορούμε να ξεφύγουμε από την αδεξιότητα της συνένωσης χορδών (όλα αυτά τα αποσπάσματα και τα πλεονεκτήματα) και να πάρουμε την ωραία επισήμανση σύνταξης για HTML που παρέχει ο συντάκτης σας. Το πρότυπό μας τελικά μοιάζει με αυτό:
((movieTitle))
((movieDirector))
Σημειώστε το παράξενο typeχαρακτηριστικό στην ετικέτα σεναρίου Αυτό εμποδίζει την εκτέλεση του περιεχομένου αυτής της ετικέτας. Τελικά, το Handlebars απλώς τραβάει τα κότσια αυτής της ετικέτας και το μετατρέπει σε μια λειτουργία προτύπου. Αρκετά έξυπνος τρόπος να το χειριστείς πραγματικά.
Αυτά τα κομμάτια όπως ((movieTitle))είναι τα σημαντικά μέρη. Περνάμε τελικά ένα αντικείμενο στη συνάρτηση templating που δημιουργείται και οι ιδιότητες αυτού του αντικειμένου ταιριάζουν με αυτά τα bit κράτησης θέσης. Το τιμόνι ονομάζεται τιμόνι, πιθανώς, επειδή αυτά τα κομμάτια κράτησης θέσης είναι τυλιγμένα σε σγουρά τιράντες που μοιάζουν λίγο σαν τιμόνι από πάνω.
Ακολουθώντας τον απλό οδηγό στον ιστότοπο Handlebars, δημιουργούμε τη λειτουργία templating μας ως εξής:
var source = $("#movie-template").html(); var template = Handlebars.compile(source);Στη συνέχεια, μέσα στο forβρόχο μας , καλούμε τη νέα συνάρτηση templating με το αντικείμενο (το περιβάλλον) που περιέχει μία ταινία. Το HTML θα επιστραφεί και το προσαρτάμε στη σελίδα.
var html = template(data.movies(i)); $("#movies").append(html);Παίρνουμε επίσης το πρότυπο σε αυτό το βίντεο και το κινηματογραφούμε σε διαφορετικό στυλό. Αυτό σημαίνει απλώς πώς θα χωρίσετε τον δικό σας κώδικα σε ένα πραγματικό έργο. Το πρότυπο θα ήταν σχεδόν σίγουρα μια «συμπερίληψη» κάποιου είδους.
Εδώ καταλήξαμε:
Δείτε το Pen mdCjJ του Chris Coyier (@chriscoyier) στο CodePen
Έχουμε κάνει πολλά καλά βήματα προς τον καλύτερο κώδικα, αλλά πρέπει να κάνουμε περισσότερα για να το κάνουμε απόλυτα καθαρό.