MVC Design Pattern in JavaScript A Presentation by: Ravi Bhadauria
R
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 in JavaScript: A Practical Explanation ●
MVC Introduction – – – –
●
Use of MVC in an Application – – – –
●
What is MVC? What is M in MVC? What is V in MVC? What is C in MVC?
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
- Contact Us -
ADMEC MULTIMEDIA INSTITUTE Leader in Animation & Digital Media Education ISO 9001 : 2008 CERTIFIED
- Visit Our Websites -
www.admecindia.co.in Phones: +91-9811-8181-22, +91-9911-7823-50
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(); });â&#x20AC;&#x2039;
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
- Contact Us -
ADMEC MULTIMEDIA INSTITUTE Leader in Animation & Digital Media Education ISO 9001 : 2008 CERTIFIED
- Visit Our Websites www.admecindia.co.in www.graphic-design-institute.com Phones: +91-9811-8181-22, +91-9911-7823-50
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.
Hey! Want to Learn Advanced JavaScript !!!
Contact
ADMEC MULTIMEDIA INSTITUTE Want to read more about our JavaScript Course, please visit http://www.admecindia.co.in/javascript-master.html
Phones and Url: Helpline 1: +91 9811-8181-22 Helpline 2: +91 9911-7823-50 Url: http://web-development-institute.com
R