Class provides simulated inheritance in JavaScript. Use clss to bridge the gap between jQuery's functional programming style and Object Oriented Programming. It is based off John Resig's Simple Class Inheritance library. Besides prototypal inheritance, it includes a few important features:
- Static inheritance
- Introspection
- Namespaces
- Setup and initialization methods
- Easy callback function creation
The Get Started with jQueryMX has a good walkthrough of $.Class.
Static v. Prototype
Before learning about Class, it's important to understand the difference between a class's static and prototype properties.
//STATIC
MyClass.staticProperty //shared property
//PROTOTYPE
myclass = new MyClass()
myclass.prototypeMethod() //instance method
A static (or class) property is on the Class constructor function itself and can be thought of being shared by all instances of the Class. Prototype propertes are available only on instances of the Class.
A Basic Class
The following creates a Monster class with a name (for introspection), static, and prototype members. Every time a monster instance is created, the static count is incremented.
$.Class('Monster',
/* @static */
{
count: 0
},
/* @prototype */
{
init: function( name ) {
// saves name on the monster instance
this.name = name;
// sets the health
this.health = 10;
// increments count
this.constructor.count++;
},
eat: function( smallChildren ){
this.health += smallChildren;
},
fight: function() {
this.health -= 2;
}
});
hydra = new Monster('hydra');
dragon = new Monster('dragon');
hydra.name // -> hydra
Monster.count // -> 2
Monster.shortName // -> 'Monster'
hydra.eat(2); // health = 12
dragon.fight(); // health = 8
Notice that the prototype init function is called when a new instance of Monster is created.
Inheritance
When a class is extended, all static and prototype properties are available on the new class.
If you overwrite a function, you can call the base class's function by calling
this._super. Lets create a SeaMonster class. SeaMonsters are less
efficient at eating small children, but more powerful fighters.
Monster("SeaMonster",{
eat: function( smallChildren ) {
this._super(smallChildren / 2);
},
fight: function() {
this.health -= 1;
}
});
lockNess = new SeaMonster('Lock Ness');
lockNess.eat(4); //health = 12
lockNess.fight(); //health = 11
Static property inheritance
You can also inherit static properties in the same way:
$.Class("First",
{
staticMethod: function() { return 1;}
},{})
First("Second",{
staticMethod: function() { return this._super()+1;}
},{})
Second.staticMethod() // -> 2
Namespaces
Namespaces are a good idea! We encourage you to namespace all of your code. It makes it possible to drop your code into another app without problems. Making a namespaced class is easy:
$.Class("MyNamespace.MyClass",{},{});
new MyNamespace.MyClass()
Introspection
Often, it's nice to create classes whose name helps determine functionality. Ruby on Rails's ActiveRecord ORM class is a great example of this. Unfortunately, JavaScript doesn't have a way of determining an object's name, so the developer must provide a name. Class fixes this by taking a String name for the class.
$.Class("MyOrg.MyClass",{},{})
MyOrg.MyClass.shortName //-> 'MyClass'
MyOrg.MyClass.fullName //-> 'MyOrg.MyClass'
The fullName (with namespaces) and the shortName (without namespaces) are added to the Class's static properties.
Setup and initialization methods
Class provides static and prototype initialization functions. These come in two flavors - setup and init. Setup is called before init and can be used to 'normalize' init's arguments.
PRO TIP: Typically, you don't need setup methods in your classes. Use Init instead.
Reserve setup methods for when you need to do complex pre-processing of your class before init is called.
$.Class("MyClass",
{
setup: function() {} //static setup
init: function() {} //static constructor
},
{
setup: function() {} //prototype setup
init: function() {} //prototype constructor
})Setup
Setup functions are called before init functions. Static setup functions are passed the base class followed by arguments passed to the extend function. Prototype static functions are passed the Class constructor function arguments.
If a setup function returns an array, that array will be used as the arguments for the following init method. This provides setup functions the ability to normalize arguments passed to the init constructors. They are also excellent places to put setup code you want to almost always run.
The following is similar to how jQuery.Controller.setup makes sure init is always called with a jQuery element and merged options even if it is passed a raw HTMLElement and no second parameter.
$.Class("jQuery.Controller",{
...
},{
setup: function( el, options ) {
...
return [$(el),
$.extend(true,
this.Class.defaults,
options || {} ) ]
}
})
Typically, you won't need to make or overwrite setup functions.
Init
Init functions are called after setup functions.
Typically, they receive the same arguments
as their preceding setup function. The Foo class's init method
gets called in the following example:
$.Class("Foo", {
init: function( arg1, arg2, arg3 ) {
this.sum = arg1+arg2+arg3;
}
})
var foo = new Foo(1,2,3);
foo.sum //-> 6
Proxies
Similar to jQuery's proxy method, Class provides a
proxy
function that returns a callback to a method that will always
have
this set to the class or instance of the class.
The following example uses this.proxy to make sure
this.name is available in show.
$.Class("Todo",{
init: function( name ) {
this.name = name
},
get: function() {
$.get("/stuff",this.proxy('show'))
},
show: function( txt ) {
alert(this.name+txt)
}
})
new Todo("Trash").get()
Callback is available as a static and prototype method.
Demo
Constructor
To create a Class call:
$.Class( [NAME , STATIC,] PROTOTYPE ) -> Class
{optional:String}
If provided, this sets the shortName and fullName of the class and adds it and any necessary namespaces to the window object.
{optional:Object}
If provided, this creates static properties and methods on the class.
{Object}
Creates prototype methods on the class.
When a Class is created, the static setup and [jQuery.Class.static.init init] methods are called.
To create an instance of a Class, call:
new Class([args ... ]) -> instance
The created instance will have all the prototype properties and methods defined by the PROTOTYPE object.
When an instance is created, the prototype setup and init methods are called.
new $.Class() -> jquery.class{jquery.class}