Friday, October 26, 2007

JavaScript Class Structures

So 8 years ago or so I worked for this company and was hired to fix and admin tool they wrote in JavaScript... The system had 10's of thousands of lines and loaded as an HTA and looked and feeled like a win 32 app. This was cool but everything they used visual studio to debug everything feel to pieces. I spent a long time looking over the code and what bothered me was how they laid out classes. They would always declare a class (function) and then add functions to it effectively making them all global. It turns out when a move of a curlly braces so that it appeared more like a traditional class (minus the key word class) with the methods(functions) being nested in the class (top function). Like magic the application preformance went up and visual studio stopped blowing up on contact. It was really amazing. Since then I have been pretty sold on using a JavaScript class structure like this... Over the years my self rightousnous about JavaScript has grown to the point of having trouble getting in the door with my big head... What is the saying the bigger they are the harder they fall. Anyway in my self rightousness I over looked a little key word called 'prototype'. I don't know if it just wasn't around 10 years ago when I started JavaScript and came later or what but one day I wake up and there is class structure using prototypes that gives me heart burn as it keeps giving me flash backs to this one project. And alas I have learned something new. With all my winnying about properly structured javascript some one pointed out that oh look this key word makes all instances use the same copy... gasp choke [descriptive explative] what? So I ask to see the link and do a bit of research. and what do you know a better way of doing something.

So it turns out that if I declare my class with its properties and then declare using prototype my methods then all instances of the class use the same method. this is also how to extend core classes as well. (dah, as I have seen that before) So then the new rule is that proper javascript class declarations should look like this:

function myclass()

{

this.WhateverProperty = "";

}

myclass.prototype =

{

Method1: function( param1, param2 )

{

// some code

},

method2: function( param1, param2 )

{

//some more code

}

}

Yes I know my curly braces are matching and not the OLD school javascript standard but will all the other languages it just seems to be that JavaScript should follow suit, anyway this is how a javascript class should look like until I am proved otherwise... (hmm. setting my self up again). :)

No comments:

Post a Comment