Functional JavaScript OO model that actually works?

[Frank]

Who knows of one? Because I'm writing an app in javascript atm, and that is really a very big pain in the ass.

I've read *MANY* different proposals in the last week, but most of them either don't work or only make things more complex.

I really want to build a large class library, and this is extremely frustrating.

I would be very happy if someone could point me to one that actually works.



Btw, I don't really know in which forum I should post general programming questions, so I simply picked this one.

 

[DemoCoder]

Have you looked at Prototype or Dojo toolkits?

 

[Frank]

Have you looked at Prototype or Dojo toolkits?

Not as such. I came across them, but I wanted to do it myself.

Are they good? Which one would you recommend? I'll use it right away.

 

[Frank]

Prototype might be nice, but the documentation seems to assume you already know what to do, and only need a handy reference.

Dojo does look very promising. I'm now reading the very comprehensive and understandable documentation. Then again, the documetation page alone generates 6 javascript errors...

 

[Frank]

I found what I was looking for here:

//Defines the top level Class
function Class() { }
Class.prototype.construct = function() {};
Class.extend = function(def) {
    var classDef = function() {
        if (arguments[0] !== Class) { this.construct.apply(this, arguments); }
    };
    
    var proto = new this(Class);
    var superClass = this.prototype;
    
    for (var n in def) {
        var item = def[n];                        
        if (item instanceof Function) item.$ = superClass;
        proto[n] = item;
    }

    classDef.prototype = proto;
    
    //Give this new class the same static extend method    
    classDef.extend = this.extend;        
    return classDef;
};



//Hey, this class definition approach
//looks much cleaner than then others.
var BaseClass = Class.extend({
    construct: function() { /* optional constructor method */ },
        
    getName: function() {
        return "BaseClass(" + this.getId() + ")";
    },
    
    getId: function() {
        return 1;
    }
});

var SubClass = BaseClass.extend({
    getName: function() {
        //Calls the getName() method of BaseClass
        return "SubClass(" + this.getId() + ") extends " +
            arguments.callee.$.getName.call(this);
    },
    
    getId: function() {
        return 2;
    }
});

var TopClass = SubClass.extend({
    getName: function() {
        //Calls the getName() method of SubClass
        return "TopClass(" + this.getId() + ") extends " +
            arguments.callee.$.getName.call(this);
    },
    
    getId: function() {
        //Just like the last example, this.getId()
        //always returns the proper value of 2.        
        return arguments.callee.$.getId.call(this);
    }
});

//Alerts "TopClass(2) extends SubClass(2) extends BaseClass(2)"
//Looks good again, and there's no intermediate functions!
alert(new TopClass().getName());

The first Class declaration is the only thing needed, and calls (even to the methods of the superclasses) don't have to be preprocessed.

This makes it fun again.

 

[Frank]

Now only to find out how I can make:

"arguments.callee.$.MethodName.call(this, x);"

look like:

"Class.Method.MethodName(x)"

by having some string parsed on the fly.

 

[t0y]

I've only used microsoft ajax.net javascript library so it's the only thing I know. Maybe it sucks, but hey, it's another approach.
The method calling is clean, but it's a bit of a pain to define classes, etc...

You can get it here: ajax.asp.net
And a whitespace-stripped example of a class from the ajax control toolkit: here.