Για χρόνια, οι προγραμματιστές εκμεταλλεύονται τα πλαίσια της PHP όπως το CakePHP, το CodeIgniter και ακόμη και τα πλαίσια Ruby με βάση το πρότυπο MVC. Αλλά αν το σκεφτείτε, δεν υπήρχαν πολλά πλαίσια JavaScript για να μας βοηθήσετε με τον ίδιο τρόπο.
Ίσως επειδή η JavaScript συχνά κοιτάζει κάτω από τους «πραγματικούς» προγραμματιστές, αλλά τα πλαίσια του JavaScript έχουν πάντα καθυστερήσει λίγο. Σπονδυλική στήλη αλλάξαμε αυτό και όπως θα δείτε σε αυτή την εισαγωγή, χρησιμοποιεί το μοτίβο MVC για να διαχωρίσει τον κώδικα JavaScript και να μας βοηθήσει να δημιουργήσουμε δομημένες εφαρμογές. Στην πραγματικότητα, παρέχει το μοτίβο MVC στην ανάπτυξη του εμπρός τμήματος.
Το Backbone είναι μια ελαφριά βιβλιοθήκη JavaScript από τον ίδιο δημιουργό CoffeeScript. Αλλά μην αφήνετε το γεγονός ότι είναι μια βιβλιοθήκη να σας κάνει να το συγχέετε με το jQuery, το Backbone είναι πρωταθλήματα μακριά από το jQuery όταν πρόκειται για λειτουργικότητα. Το Backbone δεν χειρίζεται τα στοιχεία του DOM, γι 'αυτό πολλοί προγραμματιστές το χρησιμοποιούν χέρι χέρι με το jQuery. Δομή οργάνωσης βάσης και jQuery που χειρίζεται το DOM.
Τι Backbone κάνει πολύ καλά είναι η δομή της προσφοράς στις εφαρμογές JavaScript και επειδή λειτουργεί με το JSON, είναι απλό να εισάγεται σε σχεδόν οποιοδήποτε σύστημα δημιουργίας προτύπων.
Το MVC σημαίνει Μοντέλα, Προβολές και Συλλογές. και στο Backbone, με Routers.
Στην Backbone ένα μοντέλο αντιπροσωπεύει και οντότητα, έτσι ώστε, για παράδειγμα, αν ασχολούμαστε με χρήστες, κάθε χρήστης θα είναι ένα μοντέλο. είναι σαν μια σειρά σε μια βάση δεδομένων.
Για να δημιουργήσετε ένα απλό μοντέλο χρησιμοποιώντας το Backbone θα πληκτρολογήσαμε:
var user = Backbone.Model.extend({});Αυτός ο κώδικας είναι τεχνικά σωστός, αλλά το Μοντέλο δεν θα έχει καμία λειτουργικότητα, οπότε πρέπει να προσθέσουμε κάτι για αυτό το Μοντέλο για να το κάνουμε, όταν είναι τυποποιημένο και για να το κάνουμε αυτό, θα χρησιμοποιούσαμε λίγο πιο περίπλοκο κώδικα:
User = Backbone.Model.extend({initialize: function(){alert('Welcome to {$lang_domain} '), προεπιλογή: {όνομα:' John Doe ', ηλικία: 30,}}) var user = new Χρήστης. Στον παραπάνω κώδικα, η λειτουργία initialize θα ενεργοποιείται κάθε φορά που δημιουργούμε μια νέα εμφάνιση αυτού του μοντέλου, αφού αρχικοποιήσουμε ό, τι έχουμε κάνει είναι να προσθέσουμε μερικές προεπιλογές σε περίπτωση που δεν διαβιβαστούν δεδομένα για το μοντέλο. Με αυτό που έγινε, για να δημιουργήσουμε μια παρουσία του Μοντέλου θα χρησιμοποιούσαμε κώδικα όπως:
var dave = new User({name:'Dave Smith', age:25});Για να ανακτήσετε ένα χαρακτηριστικό μιας συγκεκριμένης στιγμής, θα χρησιμοποιήσαμε:
var name = dave.get('name');Και για να αλλάξουμε ένα χαρακτηριστικό που θα χρησιμοποιούσαμε:
dave.set({age:31});Αυτά είναι τα βασικά στοιχεία για το πώς λειτουργούν τα μοντέλα στην Backbone, υπάρχουν πολλά περισσότερα που μπορούν να επιτύχουν, αλλά ελπίζουμε ότι μπορείτε να δείτε τις δυνατότητες δημιουργίας κώδικα ήδη.
Θυμάστε ότι είπα ότι ένα μοντέλο ήταν σαν χρήστης; Λοιπόν, ακολουθώντας αυτή την αναλογία μια συλλογή είναι όλοι οι χρήστες που έχουμε. Οι συλλογές είναι ουσιαστικά σύνολα μοντέλων και από τη στιγμή που έχουμε ήδη το μοντέλο του χρήστη μας, θα χτίσουμε μια συλλογή από εκεί:
var Users = Backbone.Collection.extend({model: User});Αυτήν τη στιγμή αυτή η συλλογή είναι κενή, αλλά είναι απλό να δημιουργήσετε μερικούς χρήστες και να τις προσθέσετε στη συλλογή:
var barney = new User({ name: 'Barney Stinson', age: 30});var ted = new User({ name: 'Ted Mosby', age:32});var lily = new User({ name: 'Lily Aldrin', age: 29});var himym = new Users([barney, ted, lily]);Τώρα, αν κονσόλα.log himym.models θα πάρουμε τις αξίες από barney, ted και κρίνο.
Οι προβολές σχετίζονται με ένα μέρος του DOM, έχουν σχεδιαστεί για να συνδέονται με τα Μοντέλα που είναι ουσιαστικά τα δεδομένα της εφαρμογής και χρησιμεύουν για την παρουσίαση αυτών των δεδομένων στον τελικό χρήστη.
Η δημιουργία μιας προβολής είναι απλή:
UserView = Backbone.View.extend({tagName: 'div',className: 'user',render: function(){}});Αυτή είναι η βασική δομή μιας όψης. Το tagName είναι το στοιχείο που θα χρησιμοποιηθεί για να τυλίξει την προβολή, η τάξη έχει οριστεί χρησιμοποιώντας το className και τέλος προσθέτουμε μια λειτουργία rendering, αν και σε αυτή την τελευταία περίπτωση η λειτουργία ήταν κενή. Είναι η λειτουργία rendering που χρησιμοποιούμε για να προσθέσουμε στη σκηνή, όπως έτσι:
UserView = Backbone.View.extend({tagName: 'div',className: 'user',render: function(){this.el.innerHTML = this.model.get('age');}});Το στοιχείο el στη λειτουργία rendering αναφέρεται στο περιτύλιγμα που δημιουργήσαμε και χρησιμοποιώντας τη λειτουργία innerHTML που τοποθετήσαμε την ηλικία του χρήστη μέσα στο div.
Αυτό το παράδειγμα δεν έχει χρησιμοποιήσει κανένα σύστημα δημιουργίας προτύπων, αλλά αν θέλετε να μπορείτε να επωφεληθείτε από το Underscore.js που παρέχεται με το Backbone.
Μπορούμε επίσης να ακούσουμε τα γεγονότα συνδέοντας έναν ακροατή του γεγονότος με την άποψή μας και σε αυτό το παράδειγμα θα δημιουργήσουμε έναν απλό ακροατή κλικ για το div μας (αυτός ο κώδικας πηγαίνει αμέσως μετά τη λειτουργία rendering):
events:{'click.user': 'divClicked'},divClicked: function(event){alert('You clicked the div');}Οι δρομολογητές backbone χρησιμοποιούνται για τη δρομολόγηση των διευθύνσεων URL στην εφαρμογή όταν χρησιμοποιούν hashtags (#). Για να ορίσετε ένα δρομολογητή, πρέπει πάντα να προσθέσετε τουλάχιστον μία διαδρομή και τουλάχιστον μια λειτουργία που θα εκτελεστεί όταν φτάσει η επιθυμητή διεύθυνση URL, όπως π.χ.:
var appRouter = Backbone.Router.extend({routes:{'user': 'userRoute'},userRoute: function() {// the code to run when http://example.com/#user}});Backbone.history.start();Αυτός είναι ένας εξαιρετικά απλός δρομολογητής που θα εκτελέσει μια ενέργεια όταν φτάσει ο / # hash χρήστη. Η κλήση με τη μέθοδο μεθόδου Backbone.history.start () ζητάει από το Backbone να παρακολουθεί τα hashtag, έτσι ώστε οι διάφορες καταστάσεις του ιστότοπου να είναι αξιόπιστες και να μπορούν να πλοηγηθούν με το πρόγραμμα περιήγησης.
Αυτό το άρθρο καλύπτει μόνο τα βασικά στοιχεία του Backbone, το οποίο μπορεί να χρησιμοποιηθεί για την κατασκευή δομημένων εφαρμογών στο JavaScript. Σας συμβουλεύω να ελέγξετε το σύστημα templating για χρήση σε συνδυασμό με το Backbone για να δείτε όλες τις δυνατότητες αυτής της βιβλιοθήκης. Ελπίζω ότι αυτές οι σύντομες εισαγωγές σας έδειξαν πόσο χρήσιμο MVC μπορεί να είναι στο front-end.
Έχετε δημιουργήσει εφαρμογές με Backbone; Τι είδους εφαρμογή θα θέλατε να χτίσετε; Ενημερώστε μας στα σχόλια.
Προτεινόμενη εικόνα / μικρογραφία, εικόνα σκαλωσιάς μέσω Shutterstock.