$30 off During Our Annual Pro Sale. View Details »

OO javaScript Class Construction.pdf

OO javaScript Class Construction.pdf

Ken Collins

April 11, 2012
Tweet

More Decks by Ken Collins

Other Decks in Technology

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