JavaScript and JQuery Essentials Trainin... (56 Blogs) Become a Certified Professional
AWS Global Infrastructure

Front End Web Development

Topics Covered
  • AngularJS (29 Blogs)
  • jQuery UI Development (2 Blogs)
  • The Complete WebDeveloper (38 Blogs)
  • ReactJS (7 Blogs)
SEE MORE

MI-new-launch

myMock Interview Service for Real Tech Jobs

myMock-widget-banner-bg

What is the JavaScript MVC Architecture and How does it Work?

Last updated on Nov 27,2019 195 Views
A Data Science Enthusiast with in-hand skills in programming languages such as... A Data Science Enthusiast with in-hand skills in programming languages such as Java & Python.
14 / 29 Blog from JavaScript

MI-new-launch

myMock Interview Service for Real Tech Jobs

myMock-mobile-banner-bg

myMock Interview Service for Real Tech Jobs

  • Mock interview in latest tech domains i.e JAVA, AI, DEVOPS,etc
  • Get interviewed by leading tech experts
  • Real time assessment report and video recording

In the development process of object-oriented programming, model-view-controller (MVC) is a methodology or design pattern that helps you in relating the user interface to underlying data models efficiently and successfully. In this article, we will learn about the JavaScript MVC architecture in the following sequence:

JavaScript MVC Architecture

In recent times, the MVC pattern is applied to a diverse range of programming languages, including JavaScript. JavaScript consists of a number of frameworks to support MVC architecture or variations on it. It allows the developers to add structure to their applications easily and without much effort.

 

MVC - JavaScript MVC - edureka

 

MVC consists of three components:

  • Model
  • View
  • Controller

Now, let’s move on and get into the depth of these three JavaScript MVC components.

Models

Models are used for managing the data for an application. They are not concerned with the user-interface or presentation layers. Instead, they represent unique forms of data that an application may require. When a model is changed or updated, it will typically notify its observers about the change that has occurred so that they can act accordingly.

Let’s take an example of a simplistic model implemented using Backbone:


var Photo = Backbone.Model.extend({
// Default attributes for the photo
defaults: {
src: "placeholder.jpg",
caption: "A default image",
viewed: false
},
// Ensure that each photo created has an `src`.
initialize: function() {
this.set( { "src": this.defaults.src} );
}
});

In a photo gallery, the concept of a photo would merit its own model, as it represents a unique kind of domain-specific data. Such a model may contain related attributes such as a caption, image source, and additional metadata. In the above example, a specific photo would be stored in an instance of a model.

Views

Views are a visual representation of models that provide a filtered view of their current state. The JavaScript views are used for building and maintaining a DOM element. A view typically observes a model and is notified when the model changes, allowing the view to update itself accordingly. For example:


var buildPhotoView = function ( photoModel, photoController ) {
var base = document.createElement( "div" ),
photoEl = document.createElement( "div" );
base.appendChild(photoEl);
var render = function () {
// We use a templating library such as Underscore
// templating which generates the HTML for our
// 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";
};
return {
showView: show,
hideView: hide
};
};

The benefit of this architecture is that each component plays its own separate role in making the application function as needed.

Controllers

Controllers act like intermediates between models and views, which are responsible for updating the model when the user manipulates the view. In the above example of our photo gallery application, a controller would be responsible for handling changes the user made to the edit view for a particular photo, updating a specific photo model when a user has finished editing.


var PhotosController = Spine.Controller.sub({
init: function () {
this.item.bind( "update" , this.proxy( this.render ));
this.item.bind( "destroy", this.proxy( this.remove ));
},
render: function () {
// Handle templating
this.replace( $( "#photoTemplate" ).tmpl( this.item ) );
return this;
},
remove: function () {
this.el.remove();
this.release();
}
});

This example will provide you with a very lightweight, simple way to manage changes between the model and the view.

JavaScript MVC Frameworks

In the last few years, a series of JavaScript MVC frameworks have been developed. Each one of these frameworks follows some form of MVC pattern with the goal of encouraging developers to write more structured JavaScript code. Some of the Frameworks are:

  • backbone.js
  • Ember.js
  • AngularJS
  • Sencha
  • Kendo UI

With this, we have come to the end of the JavaScript MVC article. I hope you understood the three components involved in the MVC architecture.

Now that you know about JavaScript MVC, check out the Web Development Certification Training by Edureka. Web Development Certification Training will help you learn how to create impressive websites using HTML5, CSS3, Twitter Bootstrap 3, jQuery and Google APIs and deploy it to Amazon Simple Storage Service(S3). 

Got a question for us? Please mention it in the comments section of “JavaScript MVC” and we will get back to you.

Comments
0 Comments

Browse Categories

webinar REGISTER FOR FREE WEBINAR
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP

Subscribe to our Newsletter, and get personalized recommendations.