comparte el articulo 

Uso de extensiones nativas con MooTools

Actualizado el 17/07/2012 < > 0 Comentarios

Resumen: Utilizaremos las extensiones de los objetos nativos de Javascript para realizar algunas de las operaciones más comunes fuera del DOM, todo esto utilizando el framework de Mootools.

En la entrega anterior de nuestro manual de MooTools analizamos las distintas formas de poder seleccionar elementos que forman parte de nuestro DOM y manipularlos de tal forma que podamos realizar operaciones con ellos.

En esta ocasión desviaremos un poco nuestra atención del DOM, y nos enfocaremos en el poder de MooTools para extender a JavaScript como lenguaje, ya que debemos recordar esto es uno de las principales características del framework.

Tenemos que recordar que JavaScript es un lenguaje que nos ofrece mucho más que la simple manipulación del DOM, nos brinda un modelo de herencia y funciones nativas que nos permiten realizar aplicaciones robustas.

Como tal, MooTools tiene la capacidad de extender una amplia cantidad de dichos objetos nativos de JavaScript, tales como Functions, Strings, Numbers, Arrays, Dates, entre otros; lo que permite jugar con sus propiedades y personalizar su funcionamiento.

MooTools es un framework, que a diferencia de otros como jQuery, no basa su atención únicamente en el DOM, por lo que convierte todo el lenguaje de JavaScript en su campo de operación, intentando hacer a JavaScript de la forma que debería ser.

En este artículo nos enfocaremos en algunas de las operaciones más usuales que se realizan con MooTools, fuera del DOM, pero por supuesto utilizando dichos elementos para mostrar los resultados.

Extendiendo Mootools a Function

Una de las principales extensiones al objeto Function es “periodical”, esta nos permite estructurar ciclos para el llamado de funciones.

Si guardamos una función dentro de una variable y después procedemos a hacer el llamado del método “periodical”, esta función se ejecutará repetidamente hasta que llegue al punto de parada indicado por la función “clearTimeout”.

Si por ejemplo quisiéramos hacer una llamada periódica a una función que se encargará de desplegar una cadena de texto en nuestra página, podemos realizar un código como el siguiente:

var lawebera = $('la_webera');
var numCadenas = 0;
var agregaCadena = function(){
    if(numCadenas < 10){
        this.set('text', this.get('text') + 'La Webera! ');
        numCadenas++;
    } else {
        lawebera.empty();
        numCadenas = 0;
    };
};

var miCiclo = agregaCadena.periodical(50, lawebera);
(function(){ clearTimeout(miCiclo); }).delay(4000);

Dicho código llamará periódicamente a la función “agregaCadena”, por lo que la cadena de texto “La Webera!” se agregará al final del texto que contenga el elemento con id “la_webera”, el cual estará dentro de nuestro DOM.

<h1 id="la_webera"></h1>

Si no hiciéramos uso de la función “clearTimeout” dentro de nuestro código, al momento de que el usuario ingrese a la página disparará el llamado de la función y el ciclo se seguirá ejecutando sin un fin, esto provocaría que elemento continuara modificándose hasta que el usuario abandone la página.

Dentro de esta misma función podemos observar el uso de otra llamada “delay” la cual sirve como complemento, y como su nombre lo indica agrega una retrazo.

La función “delay” puede resultar un poco confusa al principio, pero la forma más sencilla de lograr retrazar algo es simplemente envolverlo en una función sin nombre, tal y como lo hicimos en nuestro ejemplo.

(function(){ clearTimeout(miCiclo); }).delay(4000);

Esta función puede recibir tres argumentos, delay, bind y args. El primero de ellos determina que tanto durará la ejecución del retrazo, bind sirve para especificar un valor que queramos enlazar y args sirve para indicar los parámetros que necesitemos pasar a la función, para ello se hace uso de un arreglo múltiple.

var num = 10;
var operacion = function(num2, num3){
    var suma = this + num2;
    var multiplicacion = this * num3;
    $('la_webera').set('text', 'suma: ' + suma + ', multiplicacion ' + multiplicacion);
};

operacion.delay(2000, num, [20,30]);

En el código anterior hacemos un llamado a delay para que retrace 2 segundos la ejecución de la función “operacion” a la cual le pasamos el elemento “num” como enlace y los números 20 y 30 como parámetros para que se realicen las operaciones. De esta manera el resultado que nos arrojará la función será un texto como el siguiente “suma: 30, multiplicacion: 300”.

Extendiendo Mootools a String

En esta sección expondremos tres de los métodos más utilizados para extender al objeto String, los primeros dos de ellos se utilizan para convertir cadenas en números, lo cual resulta muy útil para la medición de elementos y la manipulación o la animación de sus tamaños.

También es útil cuando se analizan datos sobre los que no tenemos control, es decir no podemos definir el tipo con el que llegarán a nuestro código.

Estás funciones son “toInt” y “toFloat”, su uso es bastante sencillo, simplemente se deben añadir al final del valor o elemento que deseemos cambiar.

'1024px'.toInt(); // se convierte en 1024
var width = $(elemento).getStyle('width'); //con este llamado obtendremos un valor como 800px
var int = width.toInt(); //convierte el valor al entero 800
var sum = int + 100; //si no hubiéramos transformado el valor a entero, esta operación no podría realizarse

'100.3'.toFloat(); // 100.3

El tercer método es “contains”, esta función se utiliza para comprobar si una cadena contiene otra cadena entre sus caracteres, esta funcionalidad puede resultar de gran ayuda si quisiéramos buscar una frase dentro de un texto muy grande o queramos dividir una cadena en distintas partes.

Podemos utilizar el siguiente código para ejemplificar su uso:

'La Webera'.contains('Webera'); //regresa true
'La Webera'.contains('La'); //regresa true
'La Webera'.contains('LaWebera'); //regresa false

Extendiendo Mootools a Array

Las extensiones para el objeto Array son de gran ayuda cuando estamos realizando operaciones matemáticas con los arreglos.

Entre los principales métodos de extensión encontramos a “each” que nos permite recorrer un arreglo y utilizar cada parte de él, incluso nos da la posibilidad de añadir variables al ciclo para que se interactúe con ellas.

Por ejemplo, si quisiéramos crear un nuevo arreglo en base a uno existente, con la diferencia de que el nuevo estará compuesto por todos los números del viejo multiplicados por dos, tendríamos que llevar a cabo algo como lo siguiente:

var arrNumeros = [2,20,34,43];
var arrNuevosNumeros = [];

arrNumeros.each(function(num,indice){
  arrNuevosNumeros[indice] = num * this;
}, 2);

$('la_webera').set('text', arrNuevosNumeros.join(', '));

Y si quisiéramos simplificar aún más el código, basta con utilizar otra función de extensión de arreglos, la cual lleva por nombre “map”, la cual se encarga de realizar exactamente lo mismo.

var arrNuevosNumeros = arrNumeros.map(function(num){
  return num * 2;
});

Otra función de gran utilizar es “getLast”, la cual nos permite obtener el último elemento del arreglo que deseemos.

var arrNumeros = [2,20,34,43]
var primerElemento = arrNumeros[0]; // 2
var ultimoElemento = arrNumeros.getLast(); // 43

Conclusión

Como indicamos al principio del artículo, estas son únicamente unas cuantas de las funciones más utilizadas para extender objetos nativos de JavaScript, si deseas profundizar más en el tema puedes echar un ojo a la documentación de MooTools y aprender más del tema.

Es importante que comprendas a detalle este funcionamiento, ya que es lo que te ayudará a definir si MooTools es el framework adecuado para tu proyecto, ya que en caso de que desees algo más enfocado al manejo y manipulación del DOM, puedes recurrir a frameworks con una semántica más sencilla como es el caso de jQuery.

Publicado el 17/07/2012, última actualización 17/07/2012.

Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Daniel Ernesto Navarro Herrera

URL: LaWebera.es :: Diseño de paginas web

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras