Classes in MooTools.

Create the class MooTools is very simple:

//Example 1
var someClass=new Class({

initialize: function(){
alert('Hello, world!');
}

});* This source code was highlighted with Source Code Highlighter.

All, class is ready. Now you can create objects of this class:

var classObject=new someClass();* This source code was highlighted with Source Code Highlighter.

The result is an alert saying, "Hello, world."
example 1

initialize — class constructor. Is called automatically when an instance of the class. (not called if the first argument when creating object of class $empty)

The class methods can be:

//Example 2
var testClass=new Class({

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

draw: function(){
this.element.setStyles({
'background-color': 'red'
border: '1px solid blue'
});
},

hide: function(){
this.element.setStyle('display' 'none');
},

show: function(){
this.element.setStyle('display' 'block');
},

toggle: function(){
this.element.style.display == 'none'? this.show(): this.hide();
}

});* This source code was highlighted with Source Code Highlighter.

Here four methods(not including constructor) — draw, hide, show and toggle.

draw makes the element a red with a blue border.

hide hides

show shows the item.

toggle toggles the visibility of element

Example usage:

var elMgr= new testClass('el');

elMgr.draw();

(function(){
elMgr.toggle();
}).periodical(1000);* This source code was highlighted with Source Code Highlighter.

The result element is red and blinks every second.
example 2

Please note, to call the show method from the method used to toggle this.show(); this is the magic variable.

Implements

Magical property Implements adds new methods to the class. A classic example is the add method setOptions.

//Example 3
var exampleClass3=new Class({

Implements: [Options]

options: { // default options
bgColor: 'red'
borderWidth: 1
},

initialize: function(element, options){
this.setOptions(options);
this.element=$(element);
},

draw: function(){
this.element.setStyles({
'background-color': this.options.bgColor
'border-style': 'solid'
'border-color': 'black'
'border-width': this.options.borderWidth
});
}

});* This source code was highlighted with Source Code Highlighter.

Implements: [Options] mean — add all the methods of class Options in this class. The Options class has only one method — setOptions.

If option is not specified, will use default options (red, thick border is 1px).

Examples of using the class:

var elMgr=new exampleClass3('el', {
});* This source code was highlighted with Source Code Highlighter.

example 3


Implements commonly used to add methods to the new class. And add methods in already created class:

//example 4
someClass=new Class();

someClass.implement({

extraMethod: function(){
alert('I added the method');
}

});

(new someClass).extraMethod();* This source code was highlighted with Source Code Highlighter.

The result is an alert: "I — added method"
example 4

Question: "And if I add a method which already exists, what will happen?".
Answer: "In the class will be only a new method about the old can forget, not return."

Extends

Another magical property — Extends. It sozdayotsya a new class extending an existing one. Example:

Extend the class from the first example (Hello, world):

//example 5
var extendedSomeClass=new Class({

Extends: someClass,

initialize: function(){
this.parent();//call the initialize method of the base class
alert('extended Hello, world!');
}

});

new extendedSomeClass();* This source code was highlighted with Source Code Highlighter.

The result is an alert "Hello, world!" from the initialize method of the base class and alert "extended Hello, world!"
example 5

Question: "are there any magic methods, except for Implements and Extends?"
Answer: "No, but you can add in the Class.Mutators, example — Binds Mutator"

Class.Extras

In MooTools there are some classes that are very often used. Classes Options Events and Chain. Example c the Options were. But with Events:

//example 6
var exampleClass6=new Class({

Implements: [Options, Events],

options: { // default options
bgColor: 'red'
borderWidth: 1
},

initialize: function(element, options){
this.setOptions(options);
this.element=$(element);
},

draw: function(){
this.element.setStyles({
'background-color': this.options.bgColor
'border-style': 'solid'
'border-color': 'black'
'border-width': this.options.borderWidth
});
this.fireEvent('draw');//draw event
}

});

var obj=new exmpleClass6('el', {
bgColor: '#561'
borderWidth: 4
});

obj.addEvent('draw' function(){
alert('draw done');
});

obj.draw();* This source code was highlighted with Source Code Highlighter.

addEvent — add an event
fireEvent — execute action

In this example, the event is added explicitly using the method addEvent. The event can also be added by specifying it in the options with the on prefix and the first in uppercase:

var obj=new exampleClass6('el', {
bgColor: '#561'
borderWidth: 4,
onDraw: function(){
alert('draw done');
}
});* This source code was highlighted with Source Code Highlighter.

example 6

In options there is a magic property — initialize that is executed after the constructor of a class:

//example7

var someClass=new Class({
Implements: [Options]

options:{
initialize: function(){
alert('after initialize');
}
},

initialize: function(){
alert('initialize');
}

});* This source code was highlighted with Source Code Highlighter.

example 7



the Basics above, if you have questions — ask. Answers to all questions can be found in the documentation. And remember, the best documentation is the source code.

archives examples

Article based on information from habrahabr.ru