Best practices for static methods and variables with MooTools classes

Question

Are there any best practices or common solutions to adding support for "static" methods and variables to MooTools-generated classes?

In particular, is there any solution that ensures that static initialization takes place before the instance initialize method is called?

Answer 1

Caveat: Never used MooTools. I've used Prototype a fair bit, though, which has a similar Class system (MooTools is either "inspired by" or a fork of Prototype, depending on who you ask).

Just add them as properties on the resulting "class":

var MyClass = new Class(properties);
MyClass.staticMethod = function() {
    // ...
};

(The first line above is from the docs; the remainder is my addition.)

You know that will happen prior to initialize on any new instance because you're not leaving an opportunity for creating a new instance prior to attaching your static methods (or properties).

Answer 2

I know this post is old, but I wanted to give a better answer than was already stated.
I recommend the following syntax for static methods:

var MyClass = new Class({
    initialize: function() {
        this.method();
        MyClass.staticMethod();
    }
    ,
    method: function() {}
}).extend({
    staticMethod: function() {}
});

The .extend({}) method is the standard way to add static methods on a Class.

The only thing I don't like is the MyClass.staticMethod(); syntax, but there aren't many better options.

Answer 3

Appitizer...

Static methods in JavaScript are properties of the Object which references them. They are not added to the prototype of the Object.

There are two ways to add a function to an object in JavaScript. Below, I am adding methods to an imaginary object called, "MyObject".

1. Property

   MyObject.staticMethod = new function() {};
   
   MyObject.staticMethod(); // Call static method.
   

2. Method

   MyObject.prototype.instanceMethod = new function() {};
   
   new MyObject().instanceMethod(); // Call instance method.
   

Main Course...

There are three (3) ways to add static methods to a class. The code below is derived from "Pro JavaScript with MooTools" by Mark Obcena.

I included some more information which was lacking from Arcabard's answer.

1. As an Object property

var Person = new Class({
    // Instance Variables
    name: '',
    age: 0,
    // Constructor
    initialize: function(name, age) {
        this.name = name;
        this.age = age;
    },
    // Instance Methods
    log: function() {
        console.log(this.name + ', ' + this.age);
    }
});

// Static Property
Person.count: 0;
// Static Methods
Person.addPerson: function() {
    this.count += 1;
};
Person.getCount: function() {
    console.log('Person count : ' + this.count);
};

2. Using the extend()

var Person = new Class({
    // Instance Variables
    name: '',
    age: 0,
    // Constructor
    initialize: function(name, age) {
        this.name = name;
        this.age = age;
    },
    // Instance Methods
    log: function() {
        console.log(this.name + ', ' + this.age);
    }
});

Person.extend({
    // Static Property
    count: 0,
    // Static Methods
    addPerson: function() {
        this.count += 1;
    },
    getCount: function() {
        console.log('Person count : ' + this.count);
    }
});

3. Adding a new mutator to Class.Mutators

// This will create a shortcut for `extend()`.
Class.Mutators.Static = function(members) {
    this.extend(members);
};

var Person = new Class({
    Static: {
        // Static Property
        count: 0,
        // Static Method
        addPerson: function() {
            this.count += 1;
        },
        getCount: function() {
            console.log('Person count : ' + this.count);
        }
    },
    // Instance Variables
    name: '',
    age: 0,
    // Constructor
    initialize: function(name, age) {
        this.name = name;
        this.age = age;
    },
    // Instance Methods
    log: function() {
        console.log(this.name + ', ' + this.age);
    }
});

Example using the static methods.

// Creating a new Person instance
var mark = new Person('Mark', 23);
mark.log();

// Accessing the static method
Person.addPerson();
Person.getCount() // 'Person count: 1'