Week 06 Modular Javascript_Brandon, S. H. Wu
1 like1,072 views
This document discusses reusable code at clients using layouts and the model-view-controller (MVC) pattern. It covers object-oriented JavaScript for writing reusable classes. It also discusses modular GUI development with components, containers, and layouts to build assemblable user interfaces. Finally, it introduces client-side MVC to help maintain large JavaScript projects by separating concerns into models, views, and controllers.
Week 06 Modular Javascript_Brandon, S. H. Wu
- 1. App創業與實作 App Entrepreneurship and implementation Week 06 Reusable Code at Clients: Layouts and MVC 吳尚鴻 (清大資工系專任教授) (2013-03-28) 本授權條款允許使用者重製、散布、傳輸著作，但不得為商業目的之使用，亦不得修改該著作。 使用時必須按照著作人指定的方式表彰其姓名。
- 3. Modular JavaScript Shan-Hung Wu CS, NTHU, Spring, 2013
- 4. Agenda • The consequence of complex clients • Object-oriented JavaScript • Modular GUI: components, containers, and layouts • Client-side MVC 2
- 5. Agenda • The consequence of complex clients • Object-oriented JavaScript • Modular GUI: components, containers, and layouts • Client-side MVC 3
- 6. Today’s JavaScript Clients are Very Complex 4
- 7. Can you write JavaScript like that? 5
- 8. The Missing Topics • Object-oriented JavaScript – Writing reusable classes • Modular GUI: components, containers, and layouts – Writing assemblable GUI components • Client-side MVC – Maintaining tractable projects 6
- 9. Agenda • The consequence of complex clients • Object-oriented JavaScript • Modular GUI: components, containers, and layouts • Client-side MVC 7
- 10. Why OOP in JavaScript? 8
- 11. You Want This Toolbar MailToolbar CalendarToolbar • Pros: – Reusable code in Toolbar 9
- 12. Function Objects: A Review • In JavaScript, functions are objects 1. var User = function() { 2. this.name = ... 3. }; 4. // as object 5. User.name = ...; 6. // as function 7. var ret = User(); 8. // as constructor 9. var usr = new User(); • What does it really mean? 10
- 13. Homework: the memory scheme? 1. var obj = new Object(); 2. obj.x = 1; 3. obj.y = 2; 4. 5. var User = function(name) { 6. this.name = name; 7. }; 8. var usr = new User(); 11
- 14. Memory Scheme 1. var obj = new Object(); Object prototype 2. obj.x = 1; prototype : object __proto__ : object 3. obj.y = 2; constructor: function 4. 5. var User = function(name) { 6. this.name = name; obj 7. }; __proto__ : object 8. var usr = new User(); x: number y: number • __proto__ is not accessible directly User prototype – Only through prototype : object __proto__ : object Object.prototype constructor: function • Different objs reference usr the same prototype object __proto__ : object name: string 12
- 15. Prototype Chain 1. var obj = new Object(); Object prototype 2. obj.x = 1; prototype : object __proto__ : object 3. obj.y = 2; constructor: function 4. 5. var User = function(name) { 6. this.name = name; obj 7. }; __proto__ : object 8. var usr = new User(); x: number y: number • Members of an object are sought User prototype along the prototype prototype : object __proto__ : object constructor: function chain from bottom up usr – The first reached __proto__ : object wins name: string 13
- 16. OOP Goals • Inheritance – The ability to define the behavior of one object in terms of another by sub-classing • Polymorphism – The ability for two classes to respond to the same (collection of) methods • Encapsulation – Hidden details via private members – Not recommended since • Bad performance • The benefits of using private members is rather limited in the context of JavaScript (which is already lacking any form of type safety) 14
- 17. OK, so how to define a subclass of User? 15
- 18. Classing & Subclassing 1. var User = function(name) { 2. this.name = name; Object prototype 3. }; 4. // define method (why in prototype?) prototype : object __proto__ : object 5. User.prototype.getName = function() { constructor: function 6. return this.name; 7. } 8. 9. var usr = new User(); User prototype 10. alert(usr instanceof User); // true 11. alert(usr.getName()); prototype : object __proto__ : object 12. Constructor : function getName : function 13. // define subclass 14. Var Vip = function(name, title) { 15. User.call(this); usr 16. this.title = title; 17. } __proto__ : object name: string 18. Vip.prototype = new User(); 19. Vip.prototype.constructor = Vip; 20. // override method 21. Vip.prototype.getName = function() { 22. // if necessary: User.prototype.getName() Vip prototype 23. // .call(this); 24. return title + ': ' + name; prototype : object __proto__ : object 25. } constructor: function getName : function 26. usr = new Vip(...); 27. alert(usr instanceof Vip); // true usr 28. alert(usr instanceof User); // true __proto__ : object 29. alert(usr.getName()); // polymorphism name: string title: string 16
- 19. Reusing Toolbar 17
- 20. You Can Do This Toolbar MailToolbar CalendarToolbar • Toolbar: – Basic look, button events • MailToolbar and CalendarToolbar: – Buttons, event handler, and specialized look 18
- 21. Homework • How to define static members of a class? 19
- 22. Agenda • The consequence of complex clients • Object-oriented JavaScript • Modular GUI: components, containers, and layouts • Client-side MVC 20
- 23. Components, Containers, and Layouts 2013/3/28 21
- 24. Containing Relationship vs. Is-a Relationship • Containing relationship ≠ is-a Relationship • Containing relationship Component Layout – Between components – Visual level • Is-a relationship Container – Between classes – Code level 2013/3/28 22
- 25. Page Life Cycle • onReady • Init. objects and their members Adjust relative sizing & placing • Load scripts • Class system • Component -> HTML • Dom Ready • Downward recursively 23
- 26. Initialization • Right after the onReady() function is called • Each component and container should be constructed and wired together 2013/3/28 24
- 27. Render • Convert initialized components and containers to html • Downward along the containing relationship by recursively calling(), for example, onRender() 2013/3/28 25
- 28. Layout • Positioning, sizing, and CSS calculation between each container and its containing components – Upward recursively – Done by the layout object associated with each container • Every time the layout changed, DOM will re- compute all elements in the site. 2013/3/28 26
- 29. Agenda • The consequence of complex clients • Object-oriented JavaScript • Modular GUI: components, containers, and layouts • Client-side MVC 27
- 30. What is MVC? 28
- 31. Why do we need MVC at clients? 29
- 32. Think about Data • Despite of protocols (SOAP, REST, etc.), you want to store data obtained from server – Saves time if two components share the same data – Also reduces server load • What if one component change the data? – How to notify another component? 30
- 33. Trick 1. Define JS objects that represent/wrap the data 2. Allow these objects to fire events (e.g., data_changed(oldVal, newVal)) 3. Let Component objects listen to these data events 31
- 34. Good design? A component is not reusable anymore as it is dependent to data 32
- 35. Client-side MVC • Model is a collection of objects reflecting data and their fields – Fire data-related events – Relational model at client-side – Can define advanced classes to ease data manipulation, e.g., searcher • View is a collection of component – E.g., Grids, trees, toolbar, etc. – Fires view-related events • Controllers bind views and models together – Listen to events from both views and models and handle them • Pros? 33
- 36. An Example Project Structure Application name MVC files Application start point 34
- 37. Q&A 35