MVC Design Pattern in JavaScript by ADMEC Multimedia Institute

R
A Presentation by: Ravi Bhadauria
ISO 9001 : 2008 CERTIFIED
Learn JavaScript, jQuery, AngularJS from Expert in
ADMEC MULTIMEDIA INSTITUTE
www.admecindia.co.in | www.graphic-design-institute.com
Phones: +91-9811-8181-22, +91-9911-7823-50
MVC Design Pattern in JavaScript

MVC in JavaScript: A Practical Explanation
● MVC Introduction
– What is MVC?
– What is M in MVC?
– What is V in MVC?
– What is C in MVC?
● Use of MVC in an Application
– Planning for an MVC Application
– Writing code for Model
– Writing code for View
– Writing code for Controller
● Testing and Debugging
– Useful tools
– Validating the code
By: Ravi Bhadauria
Date: 22-01-2016
Purpose: Lecture

Preface & Acknowledgment
Dear reader,
ADMEC Multimedia Institute is a growing institute that is providing industry oriented
training in web design and web development along with multimedia, animation, graphic
design, cad etc to the world at large.
This presentation is one of the best presentations from our study material for our
JavaScript Object Oriented workshops which ADMEC conducts every week at the
center. We have planned to share it with the world so that everyone can take benefits
from our small efforts.
This presentation contains a brief information for “MVC Design Patterns in JavaScript”.
We express thanks to many books and websites for making it one of the best
presentations of all the time.
Thanks
Ravi Bhadauria, Instructor (Web UI and Back-end Development)
Profile: Director ADMEC Multimedia Institute
Url: http://www.admecindia.co.in

What is MVC?
Earlier I was working in ActionScript and PHP. I used to think that it is
only my favorite programming but when I started using JavaScript in
2006 then it changed my opinion.
Now JavaScript is my one of the best programming languages that I am
using for client side and server side requirements. The reason behind
that is its simplicity and scalability. Other programmings start buckling up
as they get bigger or larger while JavaScript provides an easy to use and
easy to understand manner in that situation.
MVC is a design pattern that provide design solution for JavaScript
programmers. MVC is not a JavaScript specific design patter; it is being
used by many languages as it is a best practice to code which is
scalable, flexible, modular, and easy to manage.

What is M letter in MVC?
M is one of the most important components of MVC. M
stands for Model.
Model is the domain-specific representation of the
information on which the application operates. Model
handles the business logic and database related
responsibilities. Domain logic adds meaning to raw data
(e.g. calculating if today is the user’s birthday, or the totals,
taxes and shipping charges for shopping cart items).

What is V letter in MVC?
V stands for View in MVC. It handles the presentation of the
web page or web application.
It fetches the data from model and renders that into a form
suitable for interaction, typically a user interface element.
MVC is often seen in web applications, where the view is the
HTML page and the code which gathers dynamic data for
the page.

What is C letter in MVC?
C is the last and very important component of MVC as it
controls the application logic and It is known as Controller.
It helps in processing and responding to events, typically
user actions, and invokes changes on the model and
perhaps the view.

How MVC Improves JavaScript?
What is a robust and successful application of JavaScript?
The answer is very simple:
“An application which has good features,
provides best performance, and scale well
when needed”
And I would say that MVC is the only rescue of such
applications in JavaScript to provide such features.

Creating an Application using MVC
I will show you how you can create a list of items which can
be manipulated using two buttons.
The data of the component is just a list of items, in which
one particular item can be selected and deleted. So, the
model of the component is very simple - it consists of an
array and a selected item index; and here it is on the next
slide.

Learn Advanced JavaScript from Experts
Leader in Animation & Digital Media Education
- Visit Our Websites -
www.admecindia.co.in
Phones: +91-9811-8181-22, +91-9911-7823-50
- Contact Us -

Planning for the UI in JavaScript
UI would be very simple with just 3 elements. You should
use Bootstrap's CSS and jQuery library for better results.

Implementing Observer Pattern - I
Event is a simple class for implementing the Observer pattern:
function Event(sender) {
this._sender = sender;
this._listeners = [];
}
Event.prototype = {
attach : function (listener) {
this._listeners.push(listener);
},

Implementing Observer Pattern - II
notify : function (args) {
var index;
for (index = 0; index < this._listeners.length; index += 1) {
this._listeners[index](this._sender, args);
}
}
};

Coding Model First - I
/**
* The Model. Model stores items and notifies
* observers about changes.
*/
function ListModel(items) {
this._items = items;
this._selectedIndex = -1;
this.itemAdded = new Event(this);
this.itemRemoved = new Event(this);
this.selectedIndexChanged = new Event(this);
}

Coding Model First - II
ListModel.prototype = {
getItems : function () {
return [].concat(this._items);
},
addItem : function (item) {
this._items.push(item);
this.itemAdded.notify({ item : item });
},

Coding Model First - III
removeItemAt : function (index) {
var item;
item = this._items[index];
this._items.splice(index, 1);
this.itemRemoved.notify({ item : item });
if (index === this._selectedIndex) {
this.setSelectedIndex(-1);
}
},

Coding Model First - IV
getSelectedIndex : function () {
return this._selectedIndex;
},
setSelectedIndex : function (index) {
var previousIndex;
previousIndex = this._selectedIndex;
this._selectedIndex = index;
this.selectedIndexChanged.notify({ previous : previousIndex });
}
};

Coding View then - I
/**
* The View. View presents the model and provides
* the UI events. The controller is attached to these
* events to handle the user interraction.
*/
function ListView(model, elements) {
this._model = model;
this._elements = elements;
this.listModified = new Event(this);
this.addButtonClicked = new Event(this);
this.delButtonClicked = new Event(this);

Coding View then - II
var _this = this;
// attach model listeners
this._model.itemAdded.attach(function () {
_this.rebuildList();
});
this._model.itemRemoved.attach(function () {
_this.rebuildList();
});

Coding View then - III
// attach listeners to HTML controls
this._elements.list.change(function (e) {
_this.listModified.notify({ index : e.target.selectedIndex });
});
this._elements.addButton.click(function () {
_this.addButtonClicked.notify();
});
this._elements.delButton.click(function () {
_this.delButtonClicked.notify();
});
}

Coding View then - IV
ListView.prototype = {
show : function () {
this.rebuildList();
},
rebuildList : function () {
var list, items, key;
list = this._elements.list;
list.html('');

Coding View then - V
items = this._model.getItems();
for (key in items) {
if (items.hasOwnProperty(key)) {
list.append($('<option>' + items[key] + '</option>'));
}
}
this._model.setSelectedIndex(-1);
}
};

Coding Controller Finally - I
/**
* The Controller. Controller responds to user actions and
* invokes changes on the model.
*/
function ListController(model, view) {
this._model = model;
this._view = view;
var _this = this;

Coding Controller Finally - II
this._view.listModified.attach(function (sender, args) {
_this.updateSelected(args.index);
});
this._view.addButtonClicked.attach(function () {
_this.addItem();
});
this._view.delButtonClicked.attach(function () {
_this.delItem();
});
}

Coding Controller Finally - III
ListController.prototype = {
addItem : function () {
var item = window.prompt('Add item:', '');
if (item) {
this._model.addItem(item);
}
},
delItem : function () {
var index;

Coding Controller Finally - IV
index = this._model.getSelectedIndex();
if (index !== -1) {
this._model.removeItemAt(this._model.getSelectedIndex());
}
},
updateSelected : function (index) {
this._model.setSelectedIndex(index);
}
};

The HTML
<div class="row container">
<div class="col-xs-4">
<select id="list" class="form-control" size="10"></select>
</div>
<div class="col-xs-8">
<button id="plusBtn" class="btn btn-default btn-block">+</button>
<button id="minusBtn" class="btn btn-default btn-block">-</button>
</div>
</div>
And I hope you didn't forget add Bootstrap CSS, jQuery Library, and MVC
JavaScript file which we created recently.

Clubbing up all
And of course, the Model, View, and Controller classes should be instantiated. The
sample, which you can below, uses the following code to instantiate and configure the
classes. You should put this code inside the html page just before closing body.
$(function () {
var model = new ListModel(['PHP', 'ActionScript', 'JavaScript']),
view = new ListView(model, {
'list' : $('#list'),
'addButton' : $('#plusBtn'),
'delButton' : $('#minusBtn')
}),
controller = new ListController(model, view);
view.show();
});

Testing MVC Application in JavaScript
Open your html page in any of the browser and test. I am sure
you will have some lists inside the select and use add and
delete buttons for better use.
You can use Ctrl + Shift + J to find the first stage syntax errors
in any of the browser specially Firefox (as I am working in it).
You can debug your code line by line using Firebug for better
testing and error solving.
Please visit my website i.e. www.admecindia.co.in for more
blogs and write me at info@admecindia.co.in if you are
interested in learning JavaScript at advanced level.
Thanks

Learn Advanced AngularJS from Experts
Leader in Animation & Digital Media Education
- Visit Our Websites -
www.admecindia.co.in
www.graphic-design-institute.com
Phones: +91-9811-8181-22, +91-9911-7823-50
- Contact Us -

Interview Q&A of MVC in JavaScript
Theory:
Write down all the answers of given below questions and email me at the
given below email address.
● What is MVC?
● Why MVC is so important in JavaScript?
● Write down the roles and responsibilities of M, V, and C in a
JavaScript application.
● Explain all the useful and common tools and methods to debug
JavaScript.
Practical:
Create a record entry application that follow MVC code structure.
And don't forget to email me at: info@admecindia.co.in for the review.

Phones and Url:
Helpline 1: +91 9811-8181-22
Helpline 2: +91 9911-7823-50
Url: http://web-development-institute.com
Contact
Want to read more about our JavaScript Course, please visit
http://www.admecindia.co.in/javascript-master.html
Hey! Want to Learn Advanced JavaScript !!!
R

MVC Design Pattern in JavaScript by ADMEC Multimedia Institute

More Related Content

What's hot (20)

Similar to MVC Design Pattern in JavaScript by ADMEC Multimedia Institute (20)

More from Ravi Bhadauria (20)

Recently uploaded (20)

MVC Design Pattern in JavaScript by ADMEC Multimedia Institute