{"id":26,"date":"2008-02-14T19:25:59","date_gmt":"2008-02-14T18:25:59","guid":{"rendered":"http:\/\/bezerik.es\/me\/2008\/02\/14\/como-utilizar-las-clases-de-mootools\/"},"modified":"2014-05-07T15:30:24","modified_gmt":"2014-05-07T14:30:24","slug":"como-utilizar-las-clases-de-mootools","status":"publish","type":"post","link":"http:\/\/bezerik.es\/me\/como-utilizar-las-clases-de-mootools\/","title":{"rendered":"Como utilizar las clases de Mootools"},"content":{"rendered":"

Articulo Original: <\/strong>MooTools Classes: How to use them<\/a>
\nAutor:<\/strong> Valerio<\/a> de http:\/\/mootools.net\/blog
\nTRaducido por:<\/strong> Xavier G\u00f3mez<\/a><\/p><\/blockquote>\n

Autom\u00f3viles<\/h3>\n

Entonces, \u00bfQu\u00e9 es una clase? Una clase es una f\u00e1brica de coches. Una f\u00e1brica que arroja un n\u00famero infinito de autom\u00f3viles.<\/p>\n

Si tienes que hacer un viaje, y luego otro, y luego otro, probablemente utilizar\u00e1s el mismo coche una y otra vez. S\u00f3lo si decides cambiar algo en tu coche, como por ejemplo el motor, o el color, o los materiales de los asientos, entonces, necesitar\u00e1s un nuevo coche.<\/p>\n

Hagamos un ejemplo fict\u00edcio totalmente fuera de lugar, y imaginemos que compras un autom\u00f3vil de la tienda de coches! Quiero decir que comprar\u00e9 un Smart:<\/p>\n

var mySmartCar = new Car({model: 'smart'});<\/pre>\n
Ahora que tengo mi coche, aparcado en mi garaje virtual. Demos una un viaje virtual!<\/p>\n
mySmartCar.goTo('Washington DC');<\/pre>\n
\u00a1Ese viaje estuvo genial!, vayamos a la ciudad de Nueva York:<\/p>\n
mySmartCar.goTo('New York');<\/pre>\n
Como puedes ver, estoy usando el mismo coche para ir a Washington DC y a la ciudad de Nueva York. Est\u00e1n geogr\u00e1ficamente cerca, as\u00ed que mi coche Smart ser\u00e1 suficiente. \u00bfQu\u00e9 suceder\u00e1 si tengo que cruzar Rusia que es un pa\u00eds frio? Necesitar\u00e9 otro coche, un coche m\u00e1s grande y poderoso. Eso es exactamente cuando debo utilizar \u00abnew\u00bb otra vez.<\/p>\n
var myBigCar = new Car({model: 'Jeep'});<\/pre>\n
Una vez creado, utilizemoslo:<\/p>\n
myBigCar.goTo('Russia').goTo('China');<\/pre>\n
No pensava que ir a China fuese tan f\u00e1cil.
\n<\/p>\n
Clases<\/h3>\n
En MooTools<\/strong> 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\u00e1s de los que no voy hablar hoy aqu\u00ed.<\/p>\n
Fx.Morph<\/strong>, por ejemplo, es tu f\u00e1brica y por lo tanto, Fx.Morph hace coches. Vamos a comprar un coche ahora: Quiero un coche que tenga una duraci\u00f3n de 1000 ms, y quiero que quede vinculado al elemento HTML llamado \u00abelement\u00bb:<\/p>\n
var myMorph = new Fx.Morph(element, {duration: 1000});<\/pre>\n
Ahora tengo un coche, que nosotros llamamos Instance<\/strong>. Vamos a utilizarlo para cambiar la altura y anchura a 200 para el elemento previamente creado:<\/p>\n
myMorph.start({height: 200, width: 200});<\/pre>\n
Nada m\u00e1s f\u00e1cil.
\nEn estos d\u00edas, veo el mismo error que se comete una y otra vez: La gente compra un autom\u00f3vil, y hacen un solo viaje con \u00e9l:<\/p>\n
new Fx.Morph(element, {duration: 1000}).start({height: 200, width: 200});<\/pre>\n
Normalmente, esto se atribuye a un evento de click, que hace las cosas a\u00fan peor:<\/p>\n
element.addEvent('click', function(){    new Fx.Morph(this, {duration: 1000}).start({height: 200, width: 200});\r\n\r\n});<\/pre>\n
Bueno, esta no es la forma de vida de como MooTools<\/strong> 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\u00f3neo en muchos sentidos.<\/p>\n
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\u00f3n. En segundo lugar, es tambi\u00e9n ineficiente en velocidad, ya que se llama al constructor de la clase cada vez que se hace click en el bot\u00f3n. En tercer lugar, la utilizaci\u00f3n de este enfoque hace imposible aprovechar las ventajas de las propiedades de la Instancia.<\/p>\n
En la Clase Fx hay una serie de propiedades y controles que existen para ver si el efecto est\u00e1 en ejecuci\u00f3n, y una serie de opciones que puedes definir para determinar el comportamiento de las posteriores llamadas de arranque si anteriormente ya exist\u00eda uno en ejecuci\u00f3n.<\/p>\n
Esta es la forma de escribir correctamente el ejemplo anterior:<\/p>\n
var myMorph = new Fx.Morph(element, {duration: 1000});element.addEvent('click', function(){\r\n\r\nmyMorph.start({height: 200, width: 200});\r\n\r\n});<\/pre>\n
De esta manera, creamos la Instancia una sola vez, y \u00a1se vuelve a reutilizar cada vez que el usuario hace click en el bot\u00f3n! No se estropear\u00e1 el efecto por la culpa del abuso de varios clicks, y nuestro OCD<\/a> tendr\u00e1 un descanso.<\/p>\n
Ocurre lo mismo con la Solicitud de clases. \u00bfQu\u00e9 ocurre si envio la misma petici\u00f3n varias veces? \u00bfDeber\u00eda cancelar la \u00faltima? \u00bfDeber\u00eda enviar ambos? \u00bfDeber\u00eda ponerlos en cola?<\/p>\n
Si no utilizas correctamente los instanciaciones de las clases, cada vez se har\u00e1 una nueva solicitud. Lo mismo sucede con Fx: un nuevo fx en el mismo elemento se iniciar\u00e1 al mismo tiempo, y b\u00e1sicamente solo conseguir\u00e1s estropear toda la animaci\u00f3n.<\/p>\n
MooTools no es Script.aculo.us<\/h3>\n
Este enfoque de \u00abusar y tirar\u00bb se utiliz\u00f3 (y sigue siendo utilizado) en Script.aculo.us.<\/p>\n
Como un usuario novato de scriptaculous, siempre luch\u00e9 con el problema de \u00abiniciar m\u00faltiples llamadas (instanciaciones)\u00bb, y m\u00e1s a menudo que yo deb\u00eda, tome ventaja en la opci\u00f3n de onComplete<\/strong> (afterFinish<\/strong>, en Script.aculo.us) para establecer flags<\/strong>, y verificarlas luego en mis eventos de click, a fin de evitar las ejecuciones m\u00faltiples en el mismo tiempo.<\/p>\n
Esta es exactamente la raz\u00f3n por la que decid\u00ed escribir mi propia biblioteca de efectos, llamado moo.fx<\/strong> (que posteriormente se convertir\u00eda en MooTools), de modo que podr\u00edan utilizar las clases – y de sus istanciaciones, como objetos reutilizables.<\/p>\n
Esto no es para criticar el enfoque de Script.aculo.us. Dado que la biblioteca est\u00e1 dise\u00f1ada para funcionar de esa manera, que es exactamente la forma en la que debe administrarse. MooTools<\/strong> sin embargo, no est\u00e1 dise\u00f1ado para trabajar de esta manera, y el uso de este con el mismo modo que Script.aculo.us es un error.<\/p>\n","protected":false},"excerpt":{"rendered":"
Articulo Original: MooTools Classes: How to use them Autor: Valerio de http:\/\/mootools.net\/blog TRaducido por: Xavier G\u00f3mez Autom\u00f3viles Entonces, \u00bfQu\u00e9 es una clase? Una clase es una f\u00e1brica de coches. Una f\u00e1brica que arroja un n\u00famero infinito de autom\u00f3viles. Si tienes que hacer un viaje, y luego otro, y luego otro, probablemente utilizar\u00e1s el mismo coche […]<\/p>\n","protected":false},"author":1,"featured_media":684,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[20,19],"tags":[135,141,140,136,138,345,137,139],"_links":{"self":[{"href":"http:\/\/bezerik.es\/me\/wp-json\/wp\/v2\/posts\/26"}],"collection":[{"href":"http:\/\/bezerik.es\/me\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/bezerik.es\/me\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/bezerik.es\/me\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/bezerik.es\/me\/wp-json\/wp\/v2\/comments?post=26"}],"version-history":[{"count":5,"href":"http:\/\/bezerik.es\/me\/wp-json\/wp\/v2\/posts\/26\/revisions"}],"predecessor-version":[{"id":683,"href":"http:\/\/bezerik.es\/me\/wp-json\/wp\/v2\/posts\/26\/revisions\/683"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/bezerik.es\/me\/wp-json\/wp\/v2\/media\/684"}],"wp:attachment":[{"href":"http:\/\/bezerik.es\/me\/wp-json\/wp\/v2\/media?parent=26"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/bezerik.es\/me\/wp-json\/wp\/v2\/categories?post=26"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/bezerik.es\/me\/wp-json\/wp\/v2\/tags?post=26"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}