Mootools trae consigo varias mejoras para el trabajo con funciones, basadas en varios métodos que se pueden invocar directamente sobre funciones, como si estas fueran objetos. Las mejoras de funciones sirven para que tengan algunos comportamientos especiales, como retardar la ejecución de la misma durante un tiempo o cambiar el ámbito de la variable this cuando se ejecuta una función.

Cabe aclarar que en el Manual de Mootools que estamos publicando en DesarrolloWeb.com ya hemos utilizado funcionalidades relacionadas como los métodos Native Function (como el método bind, que introdujimos cuando hablamos sobre los eventos), pues para poder explicar este framework Javascript hemos preferido no seguir estrictamente el orden de materias que está publicado en la documentación. No obstante, volvemos atrás en la documentación para explicar las mejoras que trae Mootools sobre las funciones habituales de Javascript.

En este artículo vamos a explicar algunos de estos métodos especiales para funciones, al menos lo que hemos visto más útiles en nuestra experiencia de trabajo con Mootools. Sin embargo, para obtener una referencia de todos los métodos que incorpora Mootools a las funciones debemos consultar la documentación en el epígrafe "Native Function" de la documentación de Mootools.

Método bind en funciones Mootools

El método bind() sirve para cambiar el ámbito de la variable "this" dentro de una función. Como debemos saber, this hace referencia al objeto que recibe un método en Mootools y en general en todos los lenguajes de programación orientada a objetos.

El método bind() no ejecuta la función, sino que devuelve otra función modificada donde está alterado el ámbito de la variable this. Así que para hacer bind sobre una función necesitamos la función original y devuelve una función modificada.

Hay dos parámetros que recibe bind(), el primero es el objeto cuya referencia contendrá la variable this dentro de la función modificada. El segundo es opcional, que contiene el parámetro que recibe la función original. Si la función recibía dos parámetros, entonces tenemos que indicarlos por medio de un array.

El uso se puede ver ilustrado en este ejemplo:

//defino una clase, sobre la que podremos crear objetos de esta clase
var Hombre = new Class({
   initialize: function(nombre, edad){
      this.nombre = nombre;
      this.edad = edad;
   }
});
//creo un objeto de la clase Hombre
miHombre = new Hombre("pepe", "28");

//declaro una función que recibe dos parámetros
//esta es la que llamo función original en mis explicaciones
function dameDatos(dato1, dato2){
   alert (dato1 + " " + dato2);
   //hago uso de la variable this, que voy a definir con el método bind
   alert(this.nombre + " " + this.edad);
}

//ahora ejecuto el método bind sobre la función creada antes
//me devolverá una función modificada, donde he definido el valor de this dentro de la misma
//como parámetros de bind envío: el objeto que hará referencia la variable this y los parámetros de la función original
var definoOtraFuncionBind = dameDatos.bind(miHombre, ["hola", "estoy probando"]);

//ejecuto la función modificada
definoOtraFuncionBind();

El ejemplo en si no es muy útil, pero nos sirve para darnos cuenta del modo de uso de bind y cómo podemos asignar un valor a "this" dentro de esa función, que debe ser un objeto.

Hay que fijarse que el método bind sobre la función no la ejecuta, sino que devuelve una nueva función que podemos ejecutar más tarde si lo deseamos. Si queremos ejecutar directamente la función modificada, podemos hacerlo agregando unos paréntesis (apertura y cierre) al final de la llamada al método bind. Esto lo podemos ver en el siguiente ejemplo:

//creo un nuevo objeto de la clase Hombre
miHombre2 = new Hombre("Julio", "34");

//creo una nueva función
function dameAnoNacimiento(){
   anoActual = new Date().getFullYear();
   alert ("Año de nacimiento: " + (anoActual - this.edad))
}
//invoco el método bind y ejecuto directamente la función modificada
dameAnoNacimiento.bind(miHombre2)(); Podemos ver algún detalle adicional de bind(), además de observar de una manera más clara uno de los posibles usos de la misma en el artículo Utilización de bind() en los eventos Mootools.

Podemos ver el ejemplo de bind en funciones Mootools.

Método delay de funciones Mootools

El método delay es muy útil para crear diversos tipos de efectos con Mootools, además resultará bastante más clara su utilización en ejemplos simples como los que estamos viendo en este artículo.

Supongamos que tenemos una función como esta:

function conRetardo(){
   //actualizo el texto de la capa id="mensaje"
   $("mensaje").set("html", "ha pasado un tiempo...");
}

Esta función, cuando se ejecute, actualizará el texto que haya en el elemento con id="mensaje". Ahora veamos cómo llamarla, con un retardo de 3 segundos.

conRetardo.delay(3000);

Con el método delay de las funciones Mootools hago que se ejecute la función después de un retardo especificado como parámetro en milisegundos.

Así pues ya sabemos que el método delay recibe como primer parámetro el número de milisegundos que debe esperarse antes de ejecutar la función. Pero hay otro par de parámetros opcionales que también acepta el método delay(). El segundo parámetro que podemos indicar es un bind, parecido al que hemos visto antes, es decir, podemos enviar a delay un objeto que se podrá acceder por medio de la variable this dentro de la función cuya ejecución estamos retardando. El tercer parámetro, también opcional, es el parámetro que debe enviarse a la función del retardo (la función a retardar requiere más de un parámetro, debemos indicarlos en forma de array.

Ahora veamos este ejemplo:

//declaro una función que recibe 3 parámetros
//El primero es un elemento de una página.
//El segundo es un color, para colocar de fondo
//y el tercero un nuevo texto para colocar como texto del elemento.
//la función cambia el color de fondo de ese elemento de la página
function cambiaFondo(elemento, color, texto){
   elemento.set({
      "html": texto,
      "styles": {
         "background-color": color
      }
   });
}

Esta función, como hemos podido comprobar, recibe 3 parámetros, así que si queremos invocarla con un retardo, tendremos que escribir los valores en la llamada al método delay(), como se puede ver a continuación.

//utilizo delay para invocar a la función pasados 5 segundos
cambiaFondo.delay(5000, null, [$("mielemento"), "#ff8800", "Este es el nuevo texto..."]);

Como en la función cambiaFondo() no utilizo la variable this para nada, puedo pasarle un null en el parámetro de bind. Notemos además cómo se indican los tres parámetros de la función en una estructura de array.

Otra cosa importante: Anular un retardo. delay devuelve un identificador del retardo que se ha ejecutado, para poder, si se necesita, cancelar ese retardo con la función $clear() del core de Mootools. Por ejemplo:

miRetardo = cambiaFondo.delay(1000, null, [$("mielemento"), "#0099ff", "Texto..."]);
$clear(miRetardo);

Podemos ver el ejemplo en marcha sobre los retardos en funciones Mootools aplicados con el método delay.

Método periodical para funciones Mootools

El método periodical de las librerías Native Function de Mootools es muy parecido a delay(), con la característica que periodical hace una llamada periódica a la función a la que pasamos el método, para que se ejecute cada cierto tiempo, de manera indefinida hasta que el usuario salga de la página o bien se anule la invocación periódica con la función $clear().

Veamos una función que lleva una cuenta de las veces que se invoca, que combinada con una llamada periódical cada segundo, nos va a servir para llevar una cuenta de segundos que pasan.

//defino una variable glogal como cuenta, que inicializo a cero
var cuenta = 0

//ahora defino una función
function cuentaSegundos(){
   //añado 1 a los segundos
   cuenta ++;
   //actualizo el texto de la capa id="mensaje"
   $("mensaje").set("html", cuenta);
}

Ahora veamos cómo podríamos definir con periodical una llamada a esta función cada segundo que pasa:

//creo una llamada periódica a esa función
var retardoPeriodico = cuentaSegundos.periodical(1000);

El método periodical recibe un parámetro que es el tiempo en milisegundos que tiene que esperar entre llamadas. Además, recibe opcionalmente otros dos parámetros, igual que hacía delay(), el bind que se desea realizar para sustituir el valor de this dentro de la función y los parámetros que se envían a la función a invocar periódicamente.

El retardo de una llamada periodical también se puede anular con $clear().

$clear(retardoPeriodico);

Si queremos anular este retardo periódico pasados unos segundos, podemos utilizar delay() de esta manera:

anulaPeriodico = function(){
   $clear(retardoPeriodico);
}
anulaPeriodico.delay(5500)

Veamos para acabar cómo se vería este ejemplo de periodical de Mootools.

Con estas nociones podremos explorar un poco más el uso de funciones con Mootools.