• Save
Week 06 Modular Javascript_Brandon, S. H. Wu
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Week 06 Modular Javascript_Brandon, S. H. Wu

  • 1,031 views
Uploaded on

Week 06 ...

Week 06
Reusable Code at Clients: Layouts and MVC

吳尚鴻
(清大資工系專任教授)

(2013-03-28)

More in: Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,031
On Slideshare
1,031
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
7
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. App創業與實作App Entrepreneurship and implementation Week 06 Reusable Code at Clients: Layouts and MVC 吳尚鴻 (清大資工系專任教授) (2013-03-28)本授權條款允許使用者重製、散布、傳輸著作,但不得為商業目的之使用,亦不得修改該著作。使用時必須按照著作人指定的方式表彰其姓名。
  • 2. CC (Creative Commons)姓名標示─非商業性─禁止改作本授權條款允許使用者重製、散布、傳輸著作,但不得為商業目的之使用,亦不得修改該著作。使用時必須按照著作人指定的方式表彰其姓名。
  • 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 Scheme1. var obj = new Object(); Object prototype2. obj.x = 1; prototype : object __proto__ : object3. obj.y = 2; constructor: function4.5. var User = function(name) {6. this.name = name; obj7. }; __proto__ : object8. 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 Chain1. var obj = new Object(); Object prototype2. obj.x = 1; prototype : object __proto__ : object3. obj.y = 2; constructor: function4.5. var User = function(name) {6. this.name = name; obj7. }; __proto__ : object8. 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 ofUser? 15
  • 18. Classing & Subclassing1. var User = function(name) {2. this.name = name; Object prototype3. };4. // define method (why in prototype?) prototype : object __proto__ : object5. User.prototype.getName = function() { constructor: function6. return this.name;7. }8.9. var usr = new User(); User prototype10. alert(usr instanceof User); // true11. alert(usr.getName()); prototype : object __proto__ : object12. Constructor : function getName : function13. // define subclass14. Var Vip = function(name, title) {15. User.call(this); usr16. this.title = title;17. } __proto__ : object name: string18. Vip.prototype = new User();19. Vip.prototype.constructor = Vip;20. // override method21. Vip.prototype.getName = function() {22. // if necessary: User.prototype.getName() Vip prototype23. // .call(this);24. return title + : + name; prototype : object __proto__ : object25. } constructor: function getName : function26. usr = new Vip(...);27. alert(usr instanceof Vip); // true usr28. alert(usr instanceof User); // true __proto__ : object29. 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 Layouts2013/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 level2013/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 together2013/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. Trick1. Define JS objects that represent/wrap the data2. 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 anymoreas 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 filesApplication start point 34
  • 37. Q&A 35