Download as PDF, PPTX
![Observer Pattern -- Internals
var events = [
{“abitraryString1” : [function1, function2] },
//model.notify(“arbitraryString2”) would
//cause function2 and function3 to be called.
{“abritraryString2” : [function2, function3] },
//model.subscribe(“arbitraryString3”,function4)
//would add function4 to this list
{“abritraryString3” : [function3] },
//model.subscribe(“arbitraryString4”,function1)
//would add a new member to the events array
];](https://image.slidesharecdn.com/justaview-111229131721-phpapp02/85/Just-a-View-An-Introduction-To-Model-View-Controller-Pattern-27-320.jpg)
Uploaded byAaron Nordyke
Just a View: An Introduction To Model-View-Controller Pattern
This document discusses model-view-controller (MVC), including its separation of concerns and observer pattern. It highlights templating libraries and MVC frameworks as useful tools. MVC separates an application into three components - the model, the view, and the controller - with the observer pattern coordinating changes between them. Templating libraries and MVC frameworks make implementing MVC easier by handling concerns like updating views on model changes and separating programming logic from user interface markup.
More Related Content
Similar to Just a View: An Introduction To Model-View-Controller Pattern
![[DSBW Spring 2009] Unit 07: WebApp Design Patterns & Frameworks (1/3)](https://cdn.slidesharecdn.com/ss_thumbnails/unit07-1-wadp-090513110219-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
![[Coscup 2012] JavascriptMVC](https://cdn.slidesharecdn.com/ss_thumbnails/coscupjavascriptmvc-120818115356-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
Just a View: An Introduction To Model-View-Controller Pattern
- 1. It’s Just aView An Introduction to model view controller Aaron Nordyke, Sr. Software Engineer
- 2.
- 3. Spaghetti Code UGLY g the
- 4. There once was adrug named Xigris…
- 5. Xigris Xigris Xigris Xigris Xigris Xigris Xigris Xigris Xigris Xigris Xigris Xigris Xigris
- 6. Modules GOOD th e
- 7.
- 9.
- 10. MVC BADASS g the
- 11. DATA DOM
- 12. Controller View to Model Interaction One Direction View Model User Interaction Data HTML Business Logic DB Interaction Observer Pattern
- 13. 2 View alerts Controller Controller Updates Model controller of 3 particular event 4 Model alerts view that it has changed. View Model 5 View grabs model data 1 User interacts and updates itself. with a view
- 14. 2 View alerts Controller Controller Updates Model controller of 3 particular event View 1 Model 4 Model alerts view that it has changed. 1 User interacts with a view View 2 5 View grabs model data and updates itself.
- 15. Controller View to Model Interaction One Direction View Model User Interaction Data HTML Business Logic DB Interaction Observer Pattern
- 16. Percentage of Code Views Models Controllers
- 17. The page isnot the view View
- 18. The page containsthe views View View View View View View View View View View View View View View View
- 19. MVC’s Bestest Friends ObserverPattern Templating Library MVC Framework
- 20. Best Friend #1 Observer Pattern
- 21. Controller View-Model Interaction One Direction View Model User Interaction Data HTML Business Logic DB Interaction Observer Pattern
- 22. Lame Real-world Analogy 1 “If little Billy gets hurt, I want you to call this number immediately.” Mother Babysitter 2 Little Billy breaks his arm while ice-skating, so babysitter calls the supplied number.
- 23. Observer and Subject 1 “If this thing I care about happens, call this function.” Observer Subject 2 The things happens, so the subject calls the function.
- 24. Observer Observer Observer Observer Subject Observer Observer Observer Observer
- 25. View-Model Relationship 1 “If this certain data changes, call my function view.foo(). View Model (Observer) (Subject) 2 The change happens, 3 The view grabs the so the model calls changed data from the view.foo(). model and updates itself.
- 26. Observer Pattern –Basic Use 3 view.prototype.render = function(){ //grab model data and update view html } /* * view tells model that if “change” happens, * then call view’s render function */ 1 model.subscribe(“change”,view.render); /* * The “change” happens, so the model alerts * any observers of “change” */ 2 model.notify(“change”);
- 27. Observer Pattern --Internals var events = [ {“abitraryString1” : [function1, function2] }, //model.notify(“arbitraryString2”) would //cause function2 and function3 to be called. {“abritraryString2” : [function2, function3] }, //model.subscribe(“arbitraryString3”,function4) //would add function4 to this list {“abritraryString3” : [function3] }, //model.subscribe(“arbitraryString4”,function1) //would add a new member to the events array ];
- 28. Best Friend #2 {{Templating}} Library
- 29. Look Familiar? var container= Util.cep("div",{ "className":"wrap", }); var firstName = Util.cep("span",{ "className":"name", "innerHTML":person.firstName }); var lastName = Util.cep("span",{ "className":"name", "innerHTML":person.lastName }); Util.ac(firstName,container); Util.ac(lastName,container);
- 30. Replaced with {{Templates}} //template <divclass="wrap"> <span class="name">{{firstName}}</span> <span class="name">{{lastName}}</span> </div> var html = Mustache.to_html(template,person)
- 31. Popular Templates } mustache.js Logic-less templates Minimal Templating on Steroids http://mustache.github.com/ http://www.handlebarsjs.com/
- 32.
- 33. Sole focus Help youdo MVC
- 34. • Classes forthe separate concerns of Models, Views, and Controllers • Observer Pattern built-in • Templating built-in • Event Delegation built-in • Small -- 4.6kb, compressed
- 35. “It's all tooeasy to create JavaScript applications that end up as tangled piles of jQuery selectors and callbacks, all trying frantically to keep data in sync between the HTML UI, your JavaScript logic, and the database on your server.” Jeremy Ashkenas, Creator of Backbone.js
- 36.