Oo java script class construction

OO JavaScript Class Construction

Using The Prototype JavaScript Framework

July 8th 2008Ken Collins http://metaskills.net/

1Thursday, July 10, 2008

http://metaskills.net

http://metaskills.net

Topic Overview


Topic Overview

• Basic JavaScript Refresher


Topic Overview


• The Ruby Object Model


Topic Overview



• JavaScript Code Usage/Organization Types


Topic Overview




• Prototype Class Construction


Topic Overview




• Prototype Class Construction

• Review HomeMarks v2.0


Basic JavaScript Refresher



• JavaScript is a prototype-based language.


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






• JavaScript objects are best thought about as hashes. New values and even functions can just be tacked on.


JavaScript Object Model




• Get firebug and use console.log() liberally!



http://getfirebug.com/releases/


http://m.onkey.org/2008/3/29/rspec-v-s-cobol







• Remember, that functions are objects too. With non-strict argument options.






• 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)



The Ruby Object ModelKnowing Ruby’s object model will help you with Prototype’s class construction and how it mimics

inheritance and mixins.


Inheritance in Ruby


Module Mixins in Ruby


Prototyping in Ruby


http://www.pragprog.com/screencasts/v-dtrubyom/the-ruby-object-model-and-metaprogramming






JavaScript Code Usage/Organization

Types


JavaScript Code Usage/Organization Types


• Oh so uncool inline events.

• Procedural functions at the window level.



Inheritance in Ruby




• Namespaced modules. Essentially just a hash of stateless functions.



Inheritance in Ruby





• GO FULL OO IN JAVASCRIPT!



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:


• The DOM element(s) they represent.






• The behavior needed to change the page.






• The behavior needed to change the page.

• The state changes to report to the application server. (with ajax)





PrototypeClass

Construction


Prototype Class Construction


• All examples from prototypejs.org




• Get very familiar with the whole APIhttp://www.prototypejs.org/api



http://www.prototypejs.org/api




• You must learn! Tips and tricks.http://www.prototypejs.org/learn





http://www.prototypejs.org/learn




• You must learn! Tips and tricks.http://www.prototypejs.org/learn

• Focus on classes and inheritance.http://www.prototypejs.org/learn/class-inheritance







http://www.prototypejs.org/learn/class-inheritance


Basic Class Constructor


Review


HomeMarks v2.0 Review


• 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



http://www.metaskills.net/2008/5/24/the-ajax-head-br-design-pattern






http://www.metaskills.net/2008/6/18/restful-ajax-with-forgery-protection









• Focus on these class files in the Github project.



http://github.com/metaskills/homemarks/tree/master/public/javascripts/homemarks






HomeMarks Follow Up


• 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



• 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




Shared knowledge of DOM elements common to all.

HomeMarks Follow Up





How to communicate to the server with AJAX. This allows the app to have one AJAX observer constructor.

HomeMarks Follow Up






A this.flash() function to send dashboard messages.

HomeMarks Follow Up






A this.flash() function to send dashboard messages.

Access to this.modal() for any fancy modal displays.

HomeMarks Follow Up


Oo java script class construction

Technology

Transcript of Oo java script class construction