JOURMOLY

Una de las cosas que más me gusta de Mootools son las funciones que han creado para facilitar el uso de clases y objetos en javascript. A continuación intentaré explicar como es la sintaxis para declarar y utilizar clases con ayuda de Mootools.

La sintaxis básica para la declaración de clases es la siguiente:

1
2
3
4

var MiClase = new Class
({
       //Cuerpo de la clase
});

Aqui tenemos nuestra primera clase llamada MiClase. El cuerpo de una clase comúnmente va encerrado entre llaves como las funciones, pero con mootools delimitaremos el inicio y fin de la clase con ({ y });

Avancemos un poco:

1
2
3
4
5
6
7

var Persona = new Class
({
       correr: function()
       {
              alert('Estoy corriendo!');
       }
});

Ahora tenemos una clase Persona con un método correr. Los métodos se declaran de manera nombre:function(), donde function es la función que se ejecutara cada vez que llamemos a nuestro método nombre. Crearemos una instancia de la clase Persona para ver nuestro ejemplo en acción:

1
2

var unaPersona = new Persona();
unaPersona.correr();

Ver ejemplo funcionando

Nuestro método correr también podría haber tenido parámetros, como el nombre del que corre:

1
2
3
4
5
6
7
8
9
10

var Persona = new Class
({
       correr: function(nombre)
       {
              alert('Me llamo ' + nombre + ' y estoy corriendo!');
       }
});
 
var unaPersona = new Persona();
unaPersona.correr('Juan');

Ver ejemplo funcionando

Pero lo mas lógico hubiera sido que el nombre sea una propiedad de la persona y así lo haremos. Nos ayudaremos con un método setNombre que se encargara de fijar un valor en la propiedad nombre.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

var Persona = new Class
({
       nombre: '',
       correr: function()
       {
              alert('Me llamo ' + this.nombre + ' y estoy corriendo!');
       },
       setNombre: function(nombre)
       {
              this.nombre = nombre
       }
});
 
var unaPersona = new Persona();
unaPersona.setNombre('Juan');
unaPersona.correr();

Ver ejemplo funcionando

En este último ejemplo hay varias cosas nuevas a tener en cuenta:

1. Las propiedades se declaran de manera nombre:valor.
2. Los métodos y las propiedades siempre van separados por comas, tal como se hace con las posiciones de un arreglo.
3. Para referirnos a una propiedad de la clase desde dentro de la misma lo hacemos con this.propiedad, tanto para lectura como para escritura. Y aunque no se vea en el ejemplo, lo mismo sucede para invocar un método, this.metodo();

Para finalizar, Mootools tiene un método reservado initialize que funciona como constructor de clase. En pocas palabras, es el método que se ejecuta ni bien se crea una instancia de clase. Voy a modificar un poco nuestro ejemplo para mostrar como funciona:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

var Persona = new Class
({
       nombre: '',
       initialize: function(nombre)
       {
              this.nombre = nombre
       },
       correr: function()
       {
              alert('Me llamo ' + this.nombre + ' y estoy corriendo!');
       }
});
 
var unaPersona = new Persona('Juan');
unaPersona.correr();

Ver ejemplo funcionando

Quité el método setNombre reemplazándolo por nuestro método constructor. Ahora éste es el que se encarga de fijar un valor para nombre y como podes observar, los parámetros para el constructor se envían al momento de crear la instancia de nuestra clase.

Ahora podríamos crear varias personas, donde cada una tendrá su nombre y sus métodos pero todo a partir de la única clase que hemos declarado:

1
2
3
4
5
6
7

var unaPersona = new Persona('Juan');
var otroPersona = new Persona('Alberto');
var yOtraPersona = new Persona('Joaquin');
 
unaPersona.correr();
otroPersona.correr();
yOtraPersona.correr();

Ver ejemplo funcionando

Y hasta ahí los ejemplos, que si bien son muy sencillos sirven para ilustrar no solo el uso de clases, sino también las características básicas de la sintaxis de Mootools. En próximas entradas ampliaré explicando otras funciones de Mootools para el manejo de Clases.

Si querés te podes descargar todos los ejemplos de ésta entrada desde aquí.

Otros artículos

• Listados de Posts en WordPress
• Paginación de artículos en WordPress
• Mootools: Assets.js
• Eventos con Mootools
• YouTube Server Error