Better JavaScript class generation

For years, I have been espousing how great Script# is. I often do an advanced MS ASP.NET Ajax client talk and end it with a Script# talk. Mainly because I think that the idea of learning the nuances of JavaScript OO techniques can be a little confusing. It’s really the challenge (All you need to do is search the archives of my blog and you’ll see my own confusion on this topic).

I think many web developers can wrap their heads around building the functionality, but making something private/public/static can get a little confusing. Especially if you are used to using something like C# or VB to do it.

Kevin “ByteMaster” Wolf and I have been talking about this. As a result of those talks I started playing with an idea of allowing developers create something that feels more like OO… Anyway, I have come up with a very alpha version.

A Better OO For JavaScript??

   1: compileClasses({    
   2:     testClass: {        
   3:         ctor: function() {            
   4:             // this is a test        
   5:         },        
   6:         private: {            
   7:             privateVar:1,            
   8:             privateMethd:function() {                
   9:                 // test method            
  10:             }        
  11:         },        
  12:         public:{            
  13:             // public stuff here            
  14:             publicVar:"2"        
  15:         },        
  16:         static:{            
  17:             //public statics            
  18:             staticVar:"test"        
  19:         }    
  20:     },    
  21:     testClass2: {        
  22:         ctor: testFunc,        
  23:         private: {            
  24:             privateVar2:"2"        
  25:         },        
  26:         public:{            
  27:             publicMethod:function() {                
  28:                 return true;            
  29:             },            
  30:             myVar:"this is a test",            
  31:             dispose:function() {            
  32:             }        
  33:         },        
  34:         implements:["Sys.IDisposable"]    
  35:     }
  36: });

Two classes are defined here.. the first one is the testClass. you will see that I’m creating a JSON object that has members called “ctor” (constructor), “private” (private members are contained within this object), “public” (public members are contained within this object),”static” (static public members are contained within this object), and “implements” (“array of interfaces that are implemented). I also will handle single inheritance using a member called “inherits.”

I think this makes class definition a little more straightforward for those of us who aren’t closure gurus, and it just might replace the pull of Script# on my life.

Right now this all works with a simple function that uses the MS Ajax Client framework. I’m considering doing this for other frameworks (so if you love some other framework, never fear I’m considering your framework as well).

I created a codeplex project which contains a single release that contains a simple ASP.NET project (could have been a simple html page too).. Don’t fret I expect the code to be a ton cleaner in the next version (I’m reading the MEAP version of John Resig’s Secrets of the JavaScript Ninja (and am learning a ton!)

Here’s the link: JsClassDef Project

Let me know what you think.. does it stink? is it cool? I know it ain’t Resig-like, but both Kevin and I think the simplified structure is nice and not un-JavaScript-like

Print | posted on Wednesday, June 24, 2009 5:15 PM

Feedback

# re: Better JavaScript class generation

left by julian jelfs at 6/25/2009 3:13 AM Gravatar
I use Dean Edwards Base library for js inheritance. Not the full blown Base2, but just Base which is a very simple and lightweight script which makes OO javascript pretty straightforward.

# re: Better JavaScript class generation

left by Jim at 6/26/2009 4:41 AM Gravatar
It's cool!!
How about ExtJs?
I hope you doing this for ExtJs,
Thanks
Comments have been closed on this topic.