• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Week 06 Modular Javascript_Brandon, S. H. Wu
 

Week 06 Modular Javascript_Brandon, S. H. Wu

on

  • 936 views

Week 06

Week 06
Reusable Code at Clients: Layouts and MVC

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

(2013-03-28)

Statistics

Views

Total Views
936
Views on SlideShare
936
Embed Views
0

Actions

Likes
1
Downloads
7
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Week 06 Modular Javascript_Brandon, S. H. Wu Week 06 Modular Javascript_Brandon, S. H. Wu Presentation Transcript

    • App創業與實作App Entrepreneurship and implementation Week 06 Reusable Code at Clients: Layouts and MVC 吳尚鴻 (清大資工系專任教授) (2013-03-28)本授權條款允許使用者重製、散布、傳輸著作,但不得為商業目的之使用,亦不得修改該著作。使用時必須按照著作人指定的方式表彰其姓名。
    • CC (Creative Commons)姓名標示─非商業性─禁止改作本授權條款允許使用者重製、散布、傳輸著作,但不得為商業目的之使用,亦不得修改該著作。使用時必須按照著作人指定的方式表彰其姓名。
    • Modular JavaScript Shan-Hung Wu CS, NTHU, Spring, 2013
    • Agenda• The consequence of complex clients• Object-oriented JavaScript• Modular GUI: components, containers, and layouts• Client-side MVC 2
    • Agenda• The consequence of complex clients• Object-oriented JavaScript• Modular GUI: components, containers, and layouts• Client-side MVC 3
    • Today’s JavaScript Clients are Very Complex 4
    • Can you write JavaScript like that? 5
    • 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
    • Agenda• The consequence of complex clients• Object-oriented JavaScript• Modular GUI: components, containers, and layouts• Client-side MVC 7
    • Why OOP in JavaScript? 8
    • You Want This Toolbar MailToolbar CalendarToolbar• Pros: – Reusable code in Toolbar 9
    • 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
    • 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
    • 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
    • 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
    • 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
    • OK, so how to define a subclass ofUser? 15
    • 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
    • Reusing Toolbar 17
    • You Can Do This Toolbar MailToolbar CalendarToolbar• Toolbar: – Basic look, button events• MailToolbar and CalendarToolbar: – Buttons, event handler, and specialized look 18
    • Homework• How to define static members of a class? 19
    • Agenda• The consequence of complex clients• Object-oriented JavaScript• Modular GUI: components, containers, and layouts• Client-side MVC 20
    • Components, Containers, and Layouts2013/3/28 21
    • 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
    • Page Life Cycle • onReady • Init. objects and their members Adjust relative sizing & placing• Load scripts• Class system • Component -> HTML• Dom Ready • Downward recursively 23
    • Initialization• Right after the onReady() function is called• Each component and container should be constructed and wired together2013/3/28 24
    • Render• Convert initialized components and containers to html• Downward along the containing relationship by recursively calling(), for example, onRender()2013/3/28 25
    • 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
    • Agenda• The consequence of complex clients• Object-oriented JavaScript• Modular GUI: components, containers, and layouts• Client-side MVC 27
    • What is MVC? 28
    • Why do we need MVC at clients? 29
    • 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
    • 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
    • Good design?A component is not reusable anymoreas it is dependent to data 32
    • 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
    • An Example Project Structure Application name MVC filesApplication start point 34
    • Q&A 35