Στη διαδικασία ανάπτυξης του αντικειμενοστραφής προγραμματισμός , το μοντέλο-view-controller (MVC) είναι μια μεθοδολογία ή σχέδιο σχεδίασης που σας βοηθά να συνδέσετε το περιβάλλον εργασίας χρήστη με τα υποκείμενα μοντέλα δεδομένων αποτελεσματικά και με επιτυχία. Σε αυτό το άρθρο, θα μάθουμε για το Αρχιτεκτονική MVC με την ακόλουθη ακολουθία:
Αρχιτεκτονική JavaScript MVC
Τα τελευταία χρόνια, το μοτίβο MVC εφαρμόζεται σε ένα ευρύ φάσμα γλωσσών προγραμματισμού, συμπεριλαμβανομένων . Το JavaScript αποτελείται από έναν αριθμό πλαισίων που υποστηρίζουν την αρχιτεκτονική MVC ή παραλλαγές σε αυτό. Επιτρέπει στους προγραμματιστές να προσθέσουν δομή στις εφαρμογές τους εύκολα και χωρίς πολλή προσπάθεια.
Το MVC αποτελείται από τρία συστατικά:
- Μοντέλο
- Θέα
- Ελεγκτής
Τώρα, ας προχωρήσουμε και να μπει στο βάθος αυτών των τριών στοιχείων MVC JavaScript.
Μοντέλα
Τα μοντέλα χρησιμοποιούνται για τη διαχείριση των δεδομένων για μια εφαρμογή. Δεν ασχολούνται με τα επίπεδα διεπαφής χρήστη ή παρουσίασης. Αντ 'αυτού, αντιπροσωπεύουν μοναδικές μορφές δεδομένων που μπορεί να απαιτήσει μια εφαρμογή. Όταν ένα μοντέλο αλλάζει ή ενημερώνεται, συνήθως ειδοποιεί τους παρατηρητές του για την αλλαγή που έχει συμβεί, ώστε να μπορούν να ενεργήσουν ανάλογα.
Ας πάρουμε ένα παράδειγμα ενός απλοϊκού μοντέλου που εφαρμόζεται χρησιμοποιώντας το Backbone:
var Photo = Backbone.Model.extend ({// Προεπιλεγμένα χαρακτηριστικά για τις προεπιλεγμένες φωτογραφίες: {src: 'placeholder.jpg', υπότιτλος: 'Μια προεπιλεγμένη εικόνα', είδε: false}, // Βεβαιωθείτε ότι κάθε φωτογραφία που δημιουργήθηκε `src`. initialize: function () {this.set ({'src': this.defaults.src})}})Σε μια συλλογή φωτογραφιών, η έννοια μιας φωτογραφίας θα αξίζει το δικό της μοντέλο, καθώς αντιπροσωπεύει ένα μοναδικό είδος δεδομένων για συγκεκριμένο τομέα. Ένα τέτοιο μοντέλο μπορεί να περιέχει σχετικά χαρακτηριστικά, όπως λεζάντα, πηγή εικόνας και πρόσθετα μεταδεδομένα. Στο παραπάνω παράδειγμα, μια συγκεκριμένη φωτογραφία θα αποθηκευόταν σε μια παρουσία ενός μοντέλου.
java μισθός προγραμματιστή στην Ινδία
Προβολές
Οι προβολές είναι μια οπτική αναπαράσταση μοντέλων που παρέχουν φιλτραρισμένη προβολή της τρέχουσας κατάστασής τους. Οι προβολές JavaScript χρησιμοποιούνται για τη δημιουργία και τη συντήρηση ενός στοιχείου DOM. Μια προβολή συνήθως παρατηρεί ένα μοντέλο και ειδοποιείται όταν αλλάζει το μοντέλο, επιτρέποντας στην προβολή να ενημερώνεται αναλόγως. Για παράδειγμα:
var buildPhotoView = function (photoModel, photoController) {var base = document.createElement ('div'), photoEl = document.createElement ('div') base.appendChild (photoEl) var render = function () {// Χρησιμοποιούμε ένα βιβλιοθήκη templating όπως το Underscore // templating που δημιουργεί το HTML για το // photo entry photoEl.innerHTML = _.template ('#photoTemplate', {src: photoModel.getSrc ()})} photoModel.addSubscriber (render) photoEl. addEventListener ('click', function () {photoController.handleEvent ('click', photoModel)}) var show = function () {photoEl.style.display = '} var hide = function () {photoEl.style.display = 'none'} επιστροφή {showView: show, hideView: hide}}Το πλεονέκτημα αυτής της αρχιτεκτονικής είναι ότι κάθε στοιχείο παίζει το δικό του ξεχωριστό ρόλο στη λειτουργία της εφαρμογής όπως απαιτείται.
Ελεγκτές
Οι ελεγκτές ενεργούν σαν ενδιάμεσα μεταξύ μοντέλων και προβολών, τα οποία είναι υπεύθυνα για την ενημέρωση του μοντέλου όταν ο χρήστης χειρίζεται την προβολή. Στο παραπάνω παράδειγμα της εφαρμογής συλλογής φωτογραφιών μας, ένας ελεγκτής θα είναι υπεύθυνος για τον χειρισμό των αλλαγών που έκανε ο χρήστης στην προβολή επεξεργασίας για μια συγκεκριμένη φωτογραφία, ενημερώνοντας ένα συγκεκριμένο μοντέλο φωτογραφίας όταν ένας χρήστης έχει ολοκληρώσει την επεξεργασία.
var PhotosController = Spine.Controller.sub ({init: function () {this.item.bind ('update', this.proxy (this.render)) this.item.bind ('καταστροφή', this.proxy (αυτό .remove))}, render: function () {// Handle templating this.replace ($ ('#photoTemplate') .tmpl (this.item)) επιστροφή αυτού}, αφαίρεση: function () {this.el.remove () this.release ()}})Αυτό το παράδειγμα θα σας προσφέρει έναν πολύ ελαφρύ, απλό τρόπο διαχείρισης των αλλαγών μεταξύ του μοντέλου και της προβολής.
Πλαίσια JavaScript MVC
Τα τελευταία χρόνια, μια σειρά JavaScript MVC έχει αναπτυχθεί. Κάθε ένα από αυτά τα πλαίσια ακολουθεί κάποια μορφή μοτίβου MVC με στόχο να ενθαρρύνει τους προγραμματιστές να γράψουν πιο δομημένο κώδικα JavaScript. Μερικά από τα Πλαίσια είναι:
- backbone.js
- Ember.js
- Γωνιακό JS
- Σέντσα
- Kendo UI
Με αυτό, φτάσαμε στο τέλος του άρθρου JavaScript MVC. Ελπίζω να καταλάβετε τα τρία στοιχεία που εμπλέκονται στην αρχιτεκτονική MVC.
Τώρα που γνωρίζετε για το JavaScript MVC, ρίξτε μια ματιά στο από την Edureka. Η Εκπαίδευση Πιστοποίησης Ανάπτυξης Ιστού θα σας βοηθήσει να μάθετε πώς να δημιουργείτε εντυπωσιακούς ιστότοπους χρησιμοποιώντας HTML5, CSS3, Twitter Bootstrap 3, jQuery και Google API και να το αναπτύξετε στην υπηρεσία απλής αποθήκευσης Amazon (S3).
Έχετε μια ερώτηση για εμάς; Παρακαλώ αναφέρετέ το στην ενότητα σχολίων του 'JavaScript MVC' και θα επικοινωνήσουμε μαζί σας.