Articulo Original: MooTools Classes: How to use them
Autor: Valerio de http://mootools.net/blog
TRaducido por: Xavier Gómez
Automóviles
Entonces, ¿Qué es una clase? Una clase es una fábrica de coches. Una fábrica que arroja un número infinito de automóviles.
Si tienes que hacer un viaje, y luego otro, y luego otro, probablemente utilizarás el mismo coche una y otra vez. Sólo si decides cambiar algo en tu coche, como por ejemplo el motor, o el color, o los materiales de los asientos, entonces, necesitarás un nuevo coche.
Hagamos un ejemplo fictício totalmente fuera de lugar, y imaginemos que compras un automóvil de la tienda de coches! Quiero decir que compraré un Smart:
var mySmartCar = new Car({model: 'smart'});
Ahora que tengo mi coche, aparcado en mi garaje virtual. Demos una un viaje virtual!
mySmartCar.goTo('Washington DC');
¡Ese viaje estuvo genial!, vayamos a la ciudad de Nueva York:
mySmartCar.goTo('New York');
Como puedes ver, estoy usando el mismo coche para ir a Washington DC y a la ciudad de Nueva York. Están geográficamente cerca, así que mi coche Smart será suficiente. ¿Qué sucederá si tengo que cruzar Rusia que es un país frio? Necesitaré otro coche, un coche más grande y poderoso. Eso es exactamente cuando debo utilizar «new» otra vez.
var myBigCar = new Car({model: 'Jeep'});
Una vez creado, utilizemoslo:
myBigCar.goTo('Russia').goTo('China');
No pensava que ir a China fuese tan fácil.
Clases
En MooTools tenemos clases para realizar diferentes tipos de acciones. Tenemos clases que tratan los datos (Request) o clases que muestran efectos visuales (Fx) y muchos más de los que no voy hablar hoy aquí.
Fx.Morph, por ejemplo, es tu fábrica y por lo tanto, Fx.Morph hace coches. Vamos a comprar un coche ahora: Quiero un coche que tenga una duración de 1000 ms, y quiero que quede vinculado al elemento HTML llamado «element»:
var myMorph = new Fx.Morph(element, {duration: 1000});
Ahora tengo un coche, que nosotros llamamos Instance. Vamos a utilizarlo para cambiar la altura y anchura a 200 para el elemento previamente creado:
myMorph.start({height: 200, width: 200});
Nada más fácil.
En estos días, veo el mismo error que se comete una y otra vez: La gente compra un automóvil, y hacen un solo viaje con él:
new Fx.Morph(element, {duration: 1000}).start({height: 200, width: 200});
Normalmente, esto se atribuye a un evento de click, que hace las cosas aún peor:
element.addEvent('click', function(){ new Fx.Morph(this, {duration: 1000}).start({height: 200, width: 200});
});
Bueno, esta no es la forma de vida de como MooTools funciona! Al igual que en la vida real, no hay necesidad de comprar un coche en cada viaje que realizas, a menos que desees cambiar significativamente las propiedades de este coche. Este enfoque de usar y tirar es erróneo en muchos sentidos.
En primer lugar, es ineficiente en el uso de la memoria, ya que se instancia una nueva clase cada vez que se hace click en el botón. En segundo lugar, es también ineficiente en velocidad, ya que se llama al constructor de la clase cada vez que se hace click en el botón. En tercer lugar, la utilización de este enfoque hace imposible aprovechar las ventajas de las propiedades de la Instancia.
En la Clase Fx hay una serie de propiedades y controles que existen para ver si el efecto está en ejecución, y una serie de opciones que puedes definir para determinar el comportamiento de las posteriores llamadas de arranque si anteriormente ya existía uno en ejecución.
Esta es la forma de escribir correctamente el ejemplo anterior:
var myMorph = new Fx.Morph(element, {duration: 1000});element.addEvent('click', function(){
myMorph.start({height: 200, width: 200});
});
De esta manera, creamos la Instancia una sola vez, y ¡se vuelve a reutilizar cada vez que el usuario hace click en el botón! No se estropeará el efecto por la culpa del abuso de varios clicks, y nuestro OCD tendrá un descanso.
Ocurre lo mismo con la Solicitud de clases. ¿Qué ocurre si envio la misma petición varias veces? ¿Debería cancelar la última? ¿Debería enviar ambos? ¿Debería ponerlos en cola?
Si no utilizas correctamente los instanciaciones de las clases, cada vez se hará una nueva solicitud. Lo mismo sucede con Fx: un nuevo fx en el mismo elemento se iniciará al mismo tiempo, y básicamente solo conseguirás estropear toda la animación.
MooTools no es Script.aculo.us
Este enfoque de «usar y tirar» se utilizó (y sigue siendo utilizado) en Script.aculo.us.
Como un usuario novato de scriptaculous, siempre luché con el problema de «iniciar múltiples llamadas (instanciaciones)», y más a menudo que yo debía, tome ventaja en la opción de onComplete (afterFinish, en Script.aculo.us) para establecer flags, y verificarlas luego en mis eventos de click, a fin de evitar las ejecuciones múltiples en el mismo tiempo.
Esta es exactamente la razón por la que decidí escribir mi propia biblioteca de efectos, llamado moo.fx (que posteriormente se convertiría en MooTools), de modo que podrían utilizar las clases – y de sus istanciaciones, como objetos reutilizables.
Esto no es para criticar el enfoque de Script.aculo.us. Dado que la biblioteca está diseñada para funcionar de esa manera, que es exactamente la forma en la que debe administrarse. MooTools sin embargo, no está diseñado para trabajar de esta manera, y el uso de este con el mismo modo que Script.aculo.us es un error.