In het ontwikkelingsproces van object georiënteerd programmeren , model-view-controller (MVC) is een methodologie of ontwerppatroon waarmee u de gebruikersinterface efficiënt en succesvol kunt relateren aan onderliggende datamodellen. In dit artikel zullen we leren over de MVC-architectuur in de volgende volgorde:
JavaScript MVC-architectuur
In de afgelopen tijd is het MVC-patroon toegepast op een breed scala aan programmeertalen, waaronder . JavaScript bestaat uit een aantal frameworks om MVC-architectuur of variaties daarop te ondersteunen. Het stelt de ontwikkelaars in staat om eenvoudig en zonder veel moeite structuur aan hun applicaties toe te voegen.
MVC bestaat uit drie componenten:
- Model
- Visie
- Controller
Laten we nu verder gaan en dieper ingaan op deze drie JavaScript MVC-componenten.
Modellen
Modellen worden gebruikt om de data voor een applicatie te beheren. Ze houden zich niet bezig met de gebruikersinterface of presentatielagen. In plaats daarvan vertegenwoordigen ze unieke vormen van gegevens die een toepassing mogelijk nodig heeft. Wanneer een model wordt gewijzigd of bijgewerkt, stelt het zijn waarnemers doorgaans op de hoogte van de wijziging die heeft plaatsgevonden, zodat ze dienovereenkomstig kunnen handelen.
Laten we een voorbeeld nemen van een simplistisch model dat is geïmplementeerd met Backbone:
var Photo = Backbone.Model.extend ({// Standaardkenmerken voor de standaardinstellingen van de foto: {src: 'placeholder.jpg', caption: 'A default image', seen: false}, // Zorg ervoor dat elke gemaakte foto een `src`. initialize: function () {this.set ({'src': this.defaults.src})}})In een fotogalerij zou het concept van een foto een eigen model verdienen, aangezien het een uniek soort domeinspecifieke gegevens vertegenwoordigt. Zo'n model kan gerelateerde attributen bevatten, zoals een bijschrift, afbeeldingsbron en aanvullende metadata. In het bovenstaande voorbeeld zou een specifieke foto worden opgeslagen in een exemplaar van een model.
Keer bekeken
Weergaven zijn een visuele weergave van modellen die een gefilterde weergave van hun huidige staat bieden. De JavaScript-weergaven worden gebruikt voor het bouwen en onderhouden van een DOM-element. Een weergave observeert doorgaans een model en krijgt een melding wanneer het model verandert, zodat de weergave zichzelf dienovereenkomstig kan bijwerken. Bijvoorbeeld:
var buildPhotoView = function (photoModel, photoController) {var base = document.createElement ('div'), photoEl = document.createElement ('div') base.appendChild (photoEl) var render = function () {// We gebruiken een sjabloonbibliotheek zoals Underscore // sjabloon die de HTML genereert voor ons // foto-item photoEl.innerHTML = _.template ('#photoTemplate', {src: photoModel.getSrc ()})} photoModel.addSubscriber (render) photoEl. addEventListener ('klik', functie () {photoController.handleEvent ('klik', photoModel)}) var show = function () {photoEl.style.display = ''} var hide = function () {photoEl.style.display = 'none'} retourneer {showView: show, hideView: hide}}Het voordeel van deze architectuur is dat elke component zijn eigen afzonderlijke rol speelt bij het naar behoefte laten functioneren van de applicatie.
Controllers
Controllers fungeren als tussenpersonen tussen modellen en weergaven, die verantwoordelijk zijn voor het bijwerken van het model wanneer de gebruiker de weergave manipuleert. In het bovenstaande voorbeeld van onze fotogalerijtoepassing zou een controller verantwoordelijk zijn voor het afhandelen van wijzigingen die de gebruiker heeft aangebracht in de bewerkingsweergave voor een bepaalde foto, waarbij een specifiek fotomodel wordt bijgewerkt wanneer een gebruiker klaar is met bewerken.
var PhotosController = Spine.Controller.sub ({init: function () {this.item.bind ('update', this.proxy (this.render)) this.item.bind ('destroy', this.proxy (dit .remove))}, render: function () {// Behandel sjablonen this.replace ($ ('#photoTemplate') .tmpl (this.item)) return this}, remove: function () {this.el.remove () this.release ()}})Dit voorbeeld biedt u een zeer lichte, eenvoudige manier om wijzigingen tussen het model en de weergave te beheren.
JavaScript MVC Frameworks
In de afgelopen jaren is een reeks JavaScript MVC zijn ontwikkeld. Elk van deze frameworks volgt een of andere vorm van MVC-patroon met als doel ontwikkelaars aan te moedigen om meer gestructureerde JavaScript-code te schrijven. Enkele van de Frameworks zijn:
- backbone.js
- Ember.js
- AngularJS
- Sencha
- Kendo gebruikersinterface
Hiermee zijn we aan het einde gekomen van het JavaScript MVC-artikel. Ik hoop dat je de drie componenten van de MVC-architectuur hebt begrepen.
wat is aggregatie in java
Nu u meer weet over JavaScript MVC, kunt u het door Edureka. Web Development Certification Training helpt u te leren hoe u indrukwekkende websites kunt maken met HTML5, CSS3, Twitter Bootstrap 3, jQuery en Google API's en deze kunt implementeren op Amazon Simple Storage Service (S3).
Heeft u een vraag voor ons? Vermeld het in het opmerkingengedeelte van 'JavaScript MVC' en we nemen contact met u op.