digitarald - Web Craftsman Harald Kirschner - Internet Consultant & Contractor

MooTools 1.1 To 1.2 - Classes

My favourite JavaScript framework MooTools just got released as version 1.2, with tons of new features, performance boosts and bugfixes. To make the API consistent and bullet-proof for the future, the new release introduces several changed methodnames and arguments that break 1.11 and 1.2 beta code.

So I start a series about understanding the changes and converting to MooTools 1.2, starting with the powerful OOP helper Class.

Creating and Extending Classes

Classes allow to inherit and extend methods and properties from other Classes.

Class in 1.11

var Person = new Class({

    initialize: function(name) {
        this.name = name;
    }

});

var Buyer = Person.extend({

    options: {
        status: 0,
        url: null
    },

    initialize: function(name, options) {
        this.parent(name); // extends Person, so we call the parent method
        this.setOptions(options); // method from the class Options
    }

});

Buyer.implement(Options);

Class in 1.2

Class::extend and implement are now called inside the new Class:

var Person = new Class({

    initialize: function(name) {
        this.name = name;
    }

});

var Buyer = new Class({

    Extends: Person,

    Implements: Options, // one or more (as Array) classes to implement

    options: {
        status: 0,
        url: null
    },

    initialize: function(name, options) {
        this.parent(name); // extends Person, so we call the parent method
        this.setOptions(options); // method from the class Options
    }

});

Here you see the 2 mutators Extends and Implements. The Class creation is extendable, you can even add your own logic.

Extending the Mutators

The following code adds a Class property Bounds, to set the scope of a method exclusively to the current class (usually for Eventhandler, where you would need Function::bind).

    Class.Mutators.Bounds = function(self, methods) {

        $splat(methods).each(function(method){
            var fn = self[method];
            self[method] = function() {
                return fn.apply(self, arguments);
            };
        });

    };

The following example class uses the Bounds property to bind 2 methods to the class:

var Toggler = new Class({

    Bounds: ['mouseleave', 'mouseenter'],

    initialize: function(element) {
        this.element = $(element);

        // no .bind(this) needed for the eventhandler
        // without Bounds the scope would be the element
        this.element.addEvents({
            'mouseenter': this.mouseenter, 
            'mouseleave': this.mouseleave
        });
    },

    mouseenter: function() {
        // "this" is always your current class
        this.somthingCool();
    },

    mouseleave: function() {
        // "this" is always your current class, too
        this.somthingAmazing();
    },

    // ... more methods

});

Any ideas for more mutators? What would you like to know about MooTools 1.2. What do you like and what would you make better?

To be continued …