Thursday, February 08, 2007

derive.js 0.10 - a prototype.js extension for object derivation, mixins, and method chaining

View the full source here.

Prototype.js is perfectly sufficient 99% of the time, so this is definitely overkill unless you want to build a big app in Javascript.

It has a strong Ruby 'feel' to it, but I'm definitely not trying to hide Javascript behind a Ruby to JS compiler or JS generator like RJS with this.

Scenerio: You've got a JS app with 20-30 Classes, each looking like:


var Foo = Class.create();
Object.extend(Foo.prototype, {
initialize: {},
foo: function(){
// ...
}
});
Object.extend(Foo, {
classMethod: {}
});

var Bar = Class.create();
Object.extend(Foo.prototype, Bar.prototype);
Object.extend(Foo, Bar);
Object.extend(Foo.prototype, {
initialize: {},
foo: function(){
// ...
}
});
Object.extend(Foo, {
fooClassmethod: function(){}
});

// ...


It gets a little verbose, not to mention that you've got to manually apply 'superclass' methods to objects to call 'super' variants, etc. There's also no support for mixing things in 'horizontally' like you can in Ruby (where the message path goes out to modules and then up the inheritance stack, zigzag like.) When writing GUIs, this mixin capability is really useful for stacking event listeners.

Example of usage, with derivation and mixin:


var SomeMixin = Mixin.create({
one: function (teststr){
console.debug('Entering (SomeMixin instance mthd one) with argument ' + teststr);
console.debug('Calling super...');
this.sup('one', teststr);
console.debug('Exiting (SomeMixin instance mthd one)');
},
self: {
included: function(mixin){
console.debug("Something mixed-in SomeMixin")
}
}
})

var Foo = Class.derive(Object,{
initialize: function(){},
one: function(teststr){
console.debug('Entering (Foo instance mthd one) with argument ' + teststr);
console.debug('Exiting (Foo instance mthd one)');
},
self: {
one: function(){
console.debug('Entering (Foo.one) class method');
},
two: function(){
console.debug('Entering (Foo.two) class method');
},
inherited: function(){
console.debug("Someone inherited Foo!");
}
}
});

Foo.include(SomeMixin);

var Bar = Class.derive(Foo,{
initialize: function(teststr){},
one: function(teststr){
console.debug('Entering (Bar instance method one) with argument ' + teststr);
console.debug('Calling super...');
this.sup('one', teststr);
console.debug('Exiting with (Bar instance method one)');
},
self: {
one: function(){
console.debug('Entering (Bar.one) class method');
}
}
});

// Singleton is a Mixin defined for you in derive.js
Bar.extend(Singleton);

b = Bar.instance();
b.one('test');
Bar.one();
Bar.two();



Produces:

Something mixed-in SomeMixin
Someone inherited Foo!
Entering (Bar instance method one) with argument test
Calling super...
Entering (SomeMixin instance mthd one) with argument test
Calling super...
Entering (Foo instance mthd one) with argument test
Exiting (Foo instance mthd one)
Exiting (SomeMixin instance mthd one)
Exiting with (Bar instance method one)
Entering (Bar.one) class method
Entering (Foo.two) class method


I haven't put together JSUnit tests for this yet, but I hope to at some point. Enjoy!

View the full source here.

No comments: