Δημιουργήστε αντιδραστικά περιβάλλοντα δεδομένων με το Backbone.js

Μεταξύ των Backbone.js, AngularJS, Ember.js, React και όλων των υπόλοιπων, οι προγραμματιστές δεν χάνουν για βιβλιοθήκες JavaScript υψηλής ποιότητας για να τροφοδοτούν τις διεπαφές χρήστη. Κάθε βιβλιοθήκη προσφέρει περίπου το ίδιο βασικό σύνολο χαρακτηριστικών: δυναμική αλληλεπίδραση μεταξύ δεδομένων και οπτικής αναπαράστασης, οργάνωση αυτών των δεδομένων μέσω καταστημάτων και διακριτών μοντέλων και διατήρηση μιας κατάστασης προγράμματος περιήγησης.

Ωστόσο, σε αντίθεση με βιβλιοθήκες όπως το AngularJS και το Ember.js, Backbone.js έχει σχεδιαστεί γύρω από ένα προσαρμόσιμο σύνολο «προβολών» (που ενσωματώνει λογική πίσω από ανεξάρτητα στοιχεία που δεσμεύονται με δεδομένα), «μοντέλα» (δομημένες μονάδες δεδομένων και λογική για συγκεκριμένα περιβάλλοντα) και «συλλογές» (συνήθως με ένα API για φόρτωση, φιλτράρισμα και αλλιώς χειριστείτε σύνολα μονάδων δεδομένων). Επιπλέον, προσφέρει αποστολή συμβάντων, χειρισμό διευθύνσεων URL από πλευράς πελάτη και διαχείριση ιστορικού.



Στο Δίκρανο , η προσέγγισή μας είναι συχνά να δημιουργήσουμε τη σκελετική δομή μιας διεπαφής σε HTML και, στη συνέχεια, να την διαμορφώσουμε με το Backbone. Για να δώσουμε μια σύντομη αίσθηση της ελαφρότητας και της ισχύος του Backbone, ας χρησιμοποιήσουμε αυτήν τη στρατηγική για να σχεδιάσουμε μια απλή διασύνδεση που αντικατοπτρίζει την τρέχουσα τιμή από μια περιοδικά ενημερωμένη ροή δεδομένων - ένα ρολόι. Αυτό θα δείξει πόσο απλή είναι η μοντελοποίηση ενός αντιδραστικού περιβάλλοντος εργασίας χρήστη, χρησιμοποιώντας τα εργαλεία που παρέχει το Backbone.

Ξεκινώντας

Αρχικά, ας εκκινήσουμε την εφαρμογή μας με Backbone, Underscore (μια λειτουργική βιβλιοθήκη προγραμματισμού και τη μοναδική σκληρή απαίτηση του Backbone) και jQuery. Αυτές οι βιβλιοθήκες πρέπει να φορτωθούν στο έγγραφό μας. Ας υποθέσουμε ότι ζουν σε ένα φάκελο με το όνομα «js» στο ίδιο επίπεδο με τη σελίδα μας, index.html. Εδώ, θα συμπεριλάβουμε επίσης την πηγή της εφαρμογής μας, app.js - τοποθετήστε όλη τη JavaScript μέσα σε αυτό το αρχείο. Μέσα είναι ένα κενό στοιχείο που θα δεσμεύσουμε στο ρολόι μας.

Αυτό είναι το σύνολο της διεπαφής μας. Φορτώσαμε τις απαραίτητες βιβλιοθήκες και σχεδιάσαμε τον σκελετό της διεπαφής χρήστη. Τώρα θα τυλίξουμε τη διεπαφή με το Backbone.

Σχεδιάζοντας την εφαρμογή μας

Εξετάστε για μια στιγμή τα τρία κινούμενα μέρη αυτής της εφαρμογής: έναν διεκπεραιωτή, μια ροή δεδομένων και μια προβολή. Ας τα καταστρέψουμε.

Οι αλλαγές μετάδοσης είναι ζωτικής σημασίας για μια εφαρμογή που αντιδρά σε δεδομένα. Επειδή οποιοσδήποτε αριθμός στοιχείων διεπαφής χρήστη ενδέχεται να χρειαστεί να λάβει μέτρα βάσει αλλαγών σε μια ροή δεδομένων, έχουμε πολλά να κερδίσουμε από τη συγκέντρωση της επικοινωνίας σε ένα μόνο σημείο, που ονομάζεται διεκπεραιωτής. Το Backbone.Events παρέχει έναν τρόπο για τα ενδιαφερόμενα μέρη - προβολές, συλλογές και ούτω καθεξής - να εγγραφούν και να δημοσιεύσουν συμβάντα και σχετικά δεδομένα.

καλύτερη εξωτερική κάρτα ήχου για παραγωγή μουσικής

Οι συνδρομητές λένε στον αποστολέα ότι ενδιαφέρονται να ανταποκριθούν σε ένα συγκεκριμένο συμβάν παρέχοντας μια λειτουργία, που ονομάζεται callback, που προορίζεται να χειριστεί αυτό το συμβάν. Οι εκδότες μεταδίδουν πληροφορίες ενεργοποιώντας συγκεκριμένα συμβάντα με νέα ή σχετικά δεδομένα. Ουσιαστικά, ο αποστολέας είναι αυτό που συγχρονίζει την επικοινωνία μεταξύ αποσυνδεδεμένων κινούμενων μερών. Στο παράδειγμά μας, ενώνει το ρολόι με την ώρα και την οθόνη του ρολογιού.

Ας δημιουργήσουμε έναν διεκπεραιωτή και ονομάστε ένα συμβάν για επικοινωνία.

var newDataFlag = 'data-arrived'; var Dispatcher = _.extend({}, Backbone.Events);

Στη συνέχεια, θα χρειαστούμε έναν μηχανισμό που θα λειτουργεί ως ζωντανή ροή δεδομένων. Στην πράξη αυτό θα μπορούσε να είναι μια λειτουργία WebSocket ή Ajax ή οτιδήποτε παράγει δεδομένα. Για τους σκοπούς μας, θα δημιουργήσουμε ένα ρολόι με το setInterval. Κάθε δευτερόλεπτο, αποστέλλουμε την τρέχουσα ώρα μέσω του γεγονότος που έφτασε τα δεδομένα. Όταν ο διεκπεραιωτής ενεργοποιεί την άφιξη των δεδομένων, όποιος ακούει θα λάβει την τρέχουσα ώρα.

setInterval(function() { var currentTime = (new Date()).toLocaleTimeString(); Dispatcher.trigger(newDataFlag, currentTime); }, 1000);

Τέλος, θα χρειαζόμαστε μια προβολή Backbone για να τυλίξουμε το στοιχείο διεπαφής χρήστη, να ακούσουμε ενημερωμένα δεδομένα από τον διεκπεραιωτή και να αντικατοπτρίσουμε νέα δεδομένα στη διεπαφή χρήστη. Για να δημιουργήσουμε μια προβολή, θα επεκτείνουμε το Backbone.View με τη λογική μας. Η προβολή μας, την οποία θα ονομάσουμε CurrentTimeView, θα τυλίξει το στοιχείο UI # current-time, το οποίο θα καθορίσουμε αργότερα, κατά τη στιγμή της δημιουργίας. Είναι η κόλλα μεταξύ της ροής δεδομένων και της διεπαφής χρήστη. Θα προσθέσουμε δύο μεθόδους: instantiate - τον κατασκευαστή της προβολής και απόδοση, η οποία ενημερώνει το στοιχείο DOM της προβολής με την τρέχουσα ώρα.

Όταν μια προβολή δημιουργείται, ονομάζεται μέθοδος αρχικοποίησης. Βασικές εργασίες ρύθμισης μπορούν να γίνουν εδώ, όπως η δέσμευση για κλικ ή βασικά συμβάντα ή η απόδοση της ίδιας της προβολής. Η άποψή μας πρέπει να κάνει δύο πράγματα όταν πρόκειται για τη ζωή. Πρώτον, πρέπει να μοιραστεί την κατάσταση της προβολής με μια μέθοδο απόδοσης «δεσμεύοντάς την» στην προβολή. Δεύτερον, πρέπει να εγγραφεί σε ενημερώσεις διεκπεραιωτή.

Κατά την εγγραφή, η προβολή καθορίζει ότι η μέθοδος απόδοσης πρέπει να κληθεί όταν το συμβάν που έφτασε τα δεδομένα ενεργοποιείται από τον διεκπεραιωτή. Όταν καλείται, η μέθοδος απόδοσης αυτής της προβολής λαμβάνει την τρέχουσα ώρα και ενημερώνει το υποκείμενο στοιχείο DOM που θα το δώσουμε κατά την εκκίνηση.

Έτσι φαίνεται η άποψή μας:

var CurrentTimeView = Backbone.View.extend({ initialize: function() { // bind 'render' to this view with Underscore's 'bindAll' _(this).bindAll('render'); // render this view when new data is broadcast Dispatcher.on(newDataFlag, this.render); }, render: function(currentTime) { // set our DOM element's text content to the clock's current time this.el.textContent = currentTime; } });

Παρατηρήστε αυτό το .el στην απόδοση; Οι αναλυτικές προβολές εκθέτουν τα υποκείμενα στοιχεία DOM με δύο τρόπους: this.el, τον πραγματικό κόμβο DOM και αυτό. $ El, ένα αντικείμενο jQuery γύρω από το στοιχείο. Αν και δεν είναι απαραίτητο για την απλή ενημέρωση του κειμένου ενός στοιχείου, η ευκολία αυτού του. $ El δεν πρέπει να σημειώνεται.

Και αυτό είναι! Έχουμε σχεδιάσει μια ροή δεδομένων που αντλεί δεδομένα, έναν πομπό που διατηρεί τον αριθμό των συνδρομητών σε συγχρονισμό με τις ενημερώσεις δεδομένων και μια προβολή που συνδέει τα δεδομένα με τη διεπαφή. Το μόνο που μένει τώρα είναι η εκκίνηση της εφαρμογής κατά τη φόρτωση της σελίδας. Για εκκίνηση, απλώς εγκαθιστούμε το CurrentTimeView, καθορίζοντας το στοιχείο που θα τυλίξει.

$(function() { new CurrentTimeView({ el: document.getElementById('current-time') }); });

Τα αποτελέσματα είναι ορατά ταυτόχρονα. Το Backbone μας επέτρεψε να σχεδιάσουμε ένα απλό περιβάλλον εργασίας χρήστη, να το τυλίξουμε με διαδραστικότητα και να θέσουμε τα θεμέλια για το συγχρονισμό πληροφοριών από μια ροή, μέσω ενός ή πολλών στοιχείων. Φανταστείτε να αντικαταστήσετε αυτό το απλό παράδειγμα με κάτι πιο ισχυρό. Μπορείτε να δείτε πόσο λίγος κώδικας χρειάζεται για την ανάπτυξη μιας ουσιαστικής εφαρμογής βάσει δεδομένων με το Backbone.

στυλό και άγγιγμα μπαμπού wacom

Λόγια : Ματ Ντένβιτς

Ο Matt Dennewitz είναι αντιπρόεδρος του προϊόντος στο Pitchfork. Αυτό το άρθρο δημοσιεύτηκε αρχικά στο τεύχος 267 του καθαρό περιοδικό .

Σας άρεσε αυτό; Διαβάστε αυτά!