OO javaScript Class Construction.pdf

Transcript

1. OO JavaScript Class Construction Using The Prototype JavaScript Framework July 8th 2008 Ken Collins http://metaskills.net/ 1 Thursday, July 10, 2008
2. Topic Overview 2 Thursday, July 10, 2008
3. Topic Overview • Basic JavaScript Refresher 2 Thursday, July 10, 2008
4. Topic Overview • Basic JavaScript Refresher • The Ruby Object Model 2 Thursday, July 10, 2008
5. Topic Overview • Basic JavaScript Refresher • The Ruby Object Model • JavaScript Code Usage/Organization Types 2 Thursday, July 10, 2008
6. Topic Overview • Basic JavaScript Refresher • The Ruby Object Model • JavaScript Code Usage/Organization Types • Prototype Class Construction 2 Thursday, July 10, 2008
7. Topic Overview • Basic JavaScript Refresher • The Ruby Object Model • JavaScript Code Usage/Organization Types • Prototype Class Construction • Review HomeMarks v2.0 2 Thursday, July 10, 2008
8. Basic JavaScript Refresher 3 Thursday, July 10, 2008
9. Basic JavaScript Refresher 4 Thursday, July 10, 2008
10. Basic JavaScript Refresher • JavaScript is a prototype-based language. 4 Thursday, July 10, 2008
11. Prototype-based programming is a style of object-oriented programming in which classes are not present, and behavior reuse (known as inheritance in class-based languages) is performed via a process of cloning existing objects that serve as prototypes. This model can also be known as class- less, prototype-oriented or instance-based programming. http://en.wikipedia.org/wiki/Prototype-based_programming 5 Thursday, July 10, 2008
12. Basic JavaScript Refresher • JavaScript is a prototype-based language. 6 Thursday, July 10, 2008
13. Basic JavaScript Refresher • JavaScript is a prototype-based language. • JavaScript objects are best thought about as hashes. New values and even functions can just be tacked on. 6 Thursday, July 10, 2008
14. JavaScript Object Model 7 Thursday, July 10, 2008
15. JavaScript Object Model 7 Thursday, July 10, 2008
16. • JavaScript is a prototype-based language. • JavaScript objects are best thought about as hashes. New values and even functions can just be tacked on. Basic JavaScript Refresher 8 Thursday, July 10, 2008
17. • JavaScript is a prototype-based language. • JavaScript objects are best thought about as hashes. New values and even functions can just be tacked on. • Get firebug and use console.log() liberally! Basic JavaScript Refresher 8 Thursday, July 10, 2008
18. http://getfirebug.com/releases/ 9 Thursday, July 10, 2008
19. 10 Thursday, July 10, 2008
20. • JavaScript is a prototype-based language. • JavaScript objects are best thought about as hashes. New values and even functions can just be tacked on. • Get firebug and use console.log() liberally! Basic JavaScript Refresher 11 Thursday, July 10, 2008
21. • JavaScript is a prototype-based language. • JavaScript objects are best thought about as hashes. New values and even functions can just be tacked on. • Get firebug and use console.log() liberally! • Remember, that functions are objects too. With non-strict argument options. Basic JavaScript Refresher 11 Thursday, July 10, 2008
22. 12 Thursday, July 10, 2008
23. • JavaScript is a prototype-based language. • JavaScript objects are best thought about as hashes. New values and even functions can just be tacked on. • Get firebug and use console.log() liberally! • Remember, that functions are objects too. With non-strict argument options. • Knowing what “this” is can save you lots of debugging and headaches. (another topic) Basic JavaScript Refresher 13 Thursday, July 10, 2008
24. The Ruby Object Model Knowing Ruby’s object model will help you with Prototype’s class construction and how it mimics inheritance and mixins. 14 Thursday, July 10, 2008
25. Inheritance in Ruby 15 Thursday, July 10, 2008
26. Module Mixins in Ruby 16 Thursday, July 10, 2008
27. Prototyping in Ruby 17 Thursday, July 10, 2008
28. http://www.pragprog.com/screencasts/v-dtrubyom/the-ruby-object-model-and-metaprogramming 18 Thursday, July 10, 2008
29. JavaScript Code Usage/Organization Types 19 Thursday, July 10, 2008
30. JavaScript Code Usage/ Organization Types 20 Thursday, July 10, 2008
31. • Oh so uncool inline events. • Procedural functions at the window level. JavaScript Code Usage/ Organization Types 20 Thursday, July 10, 2008
32. Inheritance in Ruby 21 Thursday, July 10, 2008
33. • Oh so uncool inline events. • Procedural functions at the window level. JavaScript Code Usage/ Organization Types 22 Thursday, July 10, 2008
34. • Oh so uncool inline events. • Procedural functions at the window level. • Namespaced modules. Essentially just a hash of stateless functions. JavaScript Code Usage/ Organization Types 22 Thursday, July 10, 2008
35. Inheritance in Ruby 23 Thursday, July 10, 2008
36. • Oh so uncool inline events. • Procedural functions at the window level. • Namespaced modules. Essentially just a hash of stateless functions. JavaScript Code Usage/ Organization Types 24 Thursday, July 10, 2008
37. • Oh so uncool inline events. • Procedural functions at the window level. • Namespaced modules. Essentially just a hash of stateless functions. • GO FULL OO IN JAVASCRIPT! JavaScript Code Usage/ Organization Types 24 Thursday, July 10, 2008
38. Do not think about DOM elements that have events attached to them, but instead think in terms of JavaScript objects that are instances of classes modeled in your domain which know about: 25 Thursday, July 10, 2008
39. • The DOM element(s) they represent. Do not think about DOM elements that have events attached to them, but instead think in terms of JavaScript objects that are instances of classes modeled in your domain which know about: 25 Thursday, July 10, 2008
40. • The DOM element(s) they represent. • The behavior needed to change the page. Do not think about DOM elements that have events attached to them, but instead think in terms of JavaScript objects that are instances of classes modeled in your domain which know about: 25 Thursday, July 10, 2008
41. • The DOM element(s) they represent. • The behavior needed to change the page. • The state changes to report to the application server. (with ajax) Do not think about DOM elements that have events attached to them, but instead think in terms of JavaScript objects that are instances of classes modeled in your domain which know about: 25 Thursday, July 10, 2008
42. Prototype Class Construction 26 Thursday, July 10, 2008
43. Prototype Class Construction 27 Thursday, July 10, 2008
44. • All examples from prototypejs.org Prototype Class Construction 27 Thursday, July 10, 2008
45. • All examples from prototypejs.org • Get very familiar with the whole API http://www.prototypejs.org/api Prototype Class Construction 27 Thursday, July 10, 2008
46. • All examples from prototypejs.org • Get very familiar with the whole API http://www.prototypejs.org/api • You must learn! Tips and tricks. http://www.prototypejs.org/learn Prototype Class Construction 27 Thursday, July 10, 2008
47. • All examples from prototypejs.org • Get very familiar with the whole API http://www.prototypejs.org/api • You must learn! Tips and tricks. http://www.prototypejs.org/learn • Focus on classes and inheritance. http://www.prototypejs.org/learn/class-inheritance Prototype Class Construction 27 Thursday, July 10, 2008
48. Basic Class Constructor 28 Thursday, July 10, 2008
49. http://www.prototypejs.org/learn/class-inheritance 29 Thursday, July 10, 2008
50. Review 30 Thursday, July 10, 2008
51. HomeMarks v2.0 Review 31 Thursday, July 10, 2008
52. • Total rewrite for rails 2.1 HomeMarks v2.0 Review 31 Thursday, July 10, 2008
53. • Total rewrite for rails 2.1 • Completely Restful. App focuses solely on the data’s state change. Like an web service. HomeMarks v2.0 Review 31 Thursday, July 10, 2008
54. • Total rewrite for rails 2.1 • Completely Restful. App focuses solely on the data’s state change. Like an web service. • Articles on MetaSkills.net HomeMarks v2.0 Review 31 Thursday, July 10, 2008
55. http://www.metaskills.net/2008/5/24/the-ajax-head-br-design-pattern 32 Thursday, July 10, 2008
56. http://www.metaskills.net/2008/6/18/restful-ajax-with-forgery-protection 33 Thursday, July 10, 2008
57. • Total rewrite for rails 2.1 • Completely Restful. App focuses solely on the data’s state change. Like an web service. • Articles on MetaSkills.net HomeMarks v2.0 Review 34 Thursday, July 10, 2008
58. • Total rewrite for rails 2.1 • Completely Restful. App focuses solely on the data’s state change. Like an web service. • Articles on MetaSkills.net • Focus on these class files in the Github project. HomeMarks v2.0 Review 34 Thursday, July 10, 2008
59. http://github.com/metaskills/homemarks/tree/master/public/javascripts/homemarks 35 Thursday, July 10, 2008
60. HomeMarks Follow Up 36 Thursday, July 10, 2008
61. • JS classes split into two virtual domains. A cluster of them are for the site, others for the app. Focus on the application cluster. Includes base, app, page, column, box... HomeMarks Follow Up 36 Thursday, July 10, 2008
62. • JS classes split into two virtual domains. A cluster of them are for the site, others for the app. Focus on the application cluster. Includes base, app, page, column, box... • All domain classes like column, box, etc inherit from the HomeMarksApp class. This gives object from these sub classes access to things like 4 things every object needs to know: HomeMarks Follow Up 36 Thursday, July 10, 2008
63. • JS classes split into two virtual domains. A cluster of them are for the site, others for the app. Focus on the application cluster. Includes base, app, page, column, box... • All domain classes like column, box, etc inherit from the HomeMarksApp class. This gives object from these sub classes access to things like 4 things every object needs to know: Shared knowledge of DOM elements common to all. HomeMarks Follow Up 36 Thursday, July 10, 2008
64. • JS classes split into two virtual domains. A cluster of them are for the site, others for the app. Focus on the application cluster. Includes base, app, page, column, box... • All domain classes like column, box, etc inherit from the HomeMarksApp class. This gives object from these sub classes access to things like 4 things every object needs to know: Shared knowledge of DOM elements common to all. How to communicate to the server with AJAX. This allows the app to have one AJAX observer constructor. HomeMarks Follow Up 36 Thursday, July 10, 2008
65. • JS classes split into two virtual domains. A cluster of them are for the site, others for the app. Focus on the application cluster. Includes base, app, page, column, box... • All domain classes like column, box, etc inherit from the HomeMarksApp class. This gives object from these sub classes access to things like 4 things every object needs to know: Shared knowledge of DOM elements common to all. How to communicate to the server with AJAX. This allows the app to have one AJAX observer constructor. A this.flash() function to send dashboard messages. HomeMarks Follow Up 36 Thursday, July 10, 2008
66. • JS classes split into two virtual domains. A cluster of them are for the site, others for the app. Focus on the application cluster. Includes base, app, page, column, box... • All domain classes like column, box, etc inherit from the HomeMarksApp class. This gives object from these sub classes access to things like 4 things every object needs to know: Shared knowledge of DOM elements common to all. How to communicate to the server with AJAX. This allows the app to have one AJAX observer constructor. A this.flash() function to send dashboard messages. Access to this.modal() for any fancy modal displays. HomeMarks Follow Up 36 Thursday, July 10, 2008