Έχουμε κάνει μια πολύ καλή δουλειά μέχρι στιγμής να οργανωθούμε. Η διάσπαση του HTML σε ένα πρότυπο ήταν ένα μεγάλο βήμα. Μας πλένουν πλέον τα νερά για να το πούμε. Τα διαφορετικά κομμάτια λειτουργικά σε JavaScript χωρίζονται σε διακριτικές ενότητες, κάνοντας τα πράγματα πιο εύκολα κατανοητά και συντηρημένα. Ξέρω ότι συνεργαζόμασταν με ένα αρκετά μικρό demo, αλλά ελπίζω ότι μπορείτε να φανταστείτε πώς καθώς μια εφαρμογή γίνεται πιο περίπλοκη και περισσότερες γραμμές κώδικα, αυτός ο οργανισμός είναι απίστευτα πολύτιμος.
Το JavaScript δεν έχει καμία «γνώμη» όπως αφορούσε την οργάνωση. Αυτό είναι πιθανό γιατί μερικοί άνθρωποι το λατρεύουν και κάποιοι νιώθουν χαμένοι σε αυτό. Το πώς επιλέγετε να το οργανώσετε εξαρτάται αποκλειστικά από εσάς. Αυτός είναι επίσης πιθανός λόγος για τον οποίο μερικοί άνθρωποι ασχολούνται πραγματικά με τα πλαίσια που, κατά τη γνώμη τους ή όχι, παρέχουν μια οργανωτική δομή. Για παράδειγμα, το Backbone. Αλλά αυτή είναι μια άλλη σειρά!
Για την επίδειξή μας, θα οργανώσουμε απλά γύρω από ένα αντικείμενο που απλά δημιουργούμε.
var Movies = ( )Κάθε πράγμα που κάνουμε εδώ σχετίζεται με τη λήψη κάποιων ταινιών στη σελίδα, οπότε θα το συμπεριλάβουμε σε ένα «πράγμα» που ονομάζεται Ταινίες. Θυμηθείτε ότι κάνουμε ό, τι έχει νόημα για εμάς οργανωτικά. Αυτό έχει το πλεονέκτημα της τοποθέτησης μόνο μιας μεταβλητής στο "παγκόσμιο πεδίο". Εάν κάναμε τα πάντα στο παγκόσμιο πεδίο, θα ήταν ένα χάος των τυχαίων παρακάμπτοντας μεταβλητές (και συναρτήσεις και οτιδήποτε) δηλώθηκε αλλού.
Ωστόσο, ένα τέτοιο αντικείμενο δεν «κάνει» τίποτα. Θα πρέπει να "ξεκινήσουμε".
var Movies = ( init: function() ( ) ) Movies.init();Έχοντας μια συνάρτηση που ονομάζεται init είναι λίγο πρότυπο που επιτρέπει σε οποιονδήποτε διαβάζει αυτόν τον κώδικα να γνωρίζει ότι ο κώδικας που υπάρχει εκεί είναι που τρέχει όταν εκτελείται αυτή η ομάδα κώδικα. Αυτό πρέπει να είναι λίγο σαν πίνακας περιεχομένων για το τι συμβαίνει με αυτήν την ομάδα κώδικα. Στη συνέχεια, κάνουμε άλλες λειτουργίες (περισσότερες ιδιότητες του αντικειμένου Ταινίες) που κάνουν πράγματα που πρέπει να κάνουμε, σε διακριτά κομμάτια. Θυμηθείτε ότι μπορούμε να καλέσουμε πράγματα ό, τι θέλουμε, ό, τι έχει νόημα για εμάς.
var Movies = ( init: function() ( this.setUpTemplate(); this.getData(); this.bindUIActions(); ), setUpTemplate: function() ( // Templating here ), getData: function() ( // Data getting here ), appendMoviesToPage: function(data) ( // Display logic here ), bindUIActions: function() ( // Event delegating binding here. ) ) Movies.init();Αρκετά καθαρό ε; Ίσως παρατηρήσετε appendMovesToPageότι δεν καλείται στο init. Αυτό συμβαίνει επειδή δεν μπορούμε να το καλέσουμε μέχρι να έχουμε δεδομένα για να τα στείλουμε. Αυτά τα δεδομένα θα προέρχονται από μια κλήση Ajax, που σημαίνει ότι χρειαζόμαστε μια επανάκληση. getDataΘα καταλήξει λοιπόν σε αυτό.
Οτιδήποτε άλλο θα συμπληρώσει εδώ είναι απλά να μετακινήσουμε κομμάτια κώδικα που έχουμε ήδη γράψει στο σωστό μέρος.
var Movies = ( init: function() ( this.setUpTemplate(); this.getData(); this.bindUIActions(); ), setUpTemplate: function() ( Movies.compiled = _.template( "" + " " + "" + "" + "
" + "" + "" + "
" + " " + " " ); ), getData: function() ( $.getJSON("http://codepen.io/chriscoyier/pen/0b21d5b4f7fbf4e7858b2ffc8890e007.js", function(data) ( Movies.appendMoviesToPage(data); )); ), appendMoviesToPage: function(data) ( var i, html = ""; for (i = 0; i < data.movies.length; i++) ( html += Movies.compiled(data.movies(i)); ) $("#movies").append(html); ), bindUIActions: function() ( $(document).on("click", ".module-movie", function() ( alert("movie added"); )); ) ) Movies.init();
Και τελείωσε.
Ας δούμε τις τέσσερις ανησυχίες που σκιαγραφήσαμε νωρίτερα και ας δούμε τι κάναμε γι 'αυτούς.
- Λήψη των δεδομένων. Μετακινήσαμε το JSON σε ένα αρχείο με το οποίο θα μπορούσαμε να χτυπήσουμε
$.getJSON, καθώς είναι πιθανό να χρειαστεί να κάνουμε σε μια πραγματική κατάσταση. Εκτός από την απλή πρακτική, αυτό θα μας επιτρέψει να γράψουμε τεστ γύρω από αυτό. - Λογική οθόνης. Τώρα έχουμε μια πολύ συγκεκριμένη λειτουργία appendMoviesToPage που καλείται όταν είμαστε έτοιμοι να προσθέσουμε τις ταινίες μας στη σελίδα. Οι λειτουργίες μίας χρήσης είναι ιδανικές για (πάλι) οργάνωση, κατανοητότητα και συντήρηση.
- Χειρισμός εκδηλώσεων. Χρησιμοποιώντας εκχώρηση συμβάντων, δεν αναμιγνύουμε πλέον αυτήν την "επιχειρησιακή λογική" με τη λογική εμφάνισης ή το πρότυπο. Δεν χρειάζεται καν να ανησυχούμε για την εκτέλεση της παραγγελίας πηγής, γιατί τελικά συνδέουμε τα γεγονότα στο
document. Η λειτουργικότητά μας θα λειτουργήσει ανεξάρτητα από το πότε / πώς προσαρτάται το πρότυπο στη σελίδα. - Πρότυπο. Εντελώς μετακινημένος για τη χρήση βιβλιοθηκών που προορίζονται ειδικά για templating.
Θα το έλεγα νίκη. Εδώ καταλήξαμε:
Δείτε το Pen BwbhI του Chris Coyier (@chriscoyier) στο CodePen