¿Qué habrá de nuevo en Mootools 1.2 Beta?, el Elemento de almacenamiento

Articulo original (en ingles): What’s New in 1.2: Element Storage
Autor: Tom de http://blog.mootools.net
Traducido por: Xavier Gómez

Otra característica nueva que se ha incorporado en la última versión de MooTools es el Element Storage (elemento de almacenamiento). Este artículo describe el uso de esta gran novedad, así como la razón por la que se desarrolló, y cómo se puede utilizar para mantener tus aplicaciones organizadas y eficientes.

¿Qué es todo esto del elemento de almacenamiento?

El desarrollo de aplicaciones avanzadas de JavaScript, es a veces beneficiosa para asociar atributos o propiedades adicionales a los elementos DOM. Los quales siempre hemos sido capaces de utilizar como contenedores para el almacenamiento de todo tipo de datos, aunque esta técnica genérica tiene algunos inconvenientes. Si bien los problemas asociados a esta técnica son casi exclusivamente los problemas causados por Internet Explorer, que sin embargo, deben ser tratados.

Observemos el siguiente ejemplo sencillo:

var element = $('myElement');
element.effectInstance = new Fx.Tween(element, 'color');
element.customProperty = 'someProperty';

element.effectInstance;
//the Fx.Tween instance
element.customProperty;
//'someProperty'

Como sabemos, a IE no le gusta cuando los objetos se almacenan como atributos de Elemento, y la propiedad effectInstance se fuga si no es administrado manualmente. Otro de los problemas que hemos visto es que cuando se accede a innerHTML de cualquier elemento padre de nuestro elemento, IE devolverá propiedades simples (como strings, números, etc) junto con las propiedades esperadas. Esto significa que customProperty sería copiado, lo que podría plantear un problema si fuese el único atributo personalizable. Es evidente que de los dos casos, la gestión de memoria es nuestro mayor problema en este punto, pero ambas son cuestiones a considerar.

¿Que es lo que va hacer Moo?

MooTools se utiliza para almacenar eventos y atributos personalizados directamente en las propiedades de los elementos llamados $events y $attributes. MooTools separa manualmente las propiedades de estos elementos de la descarga de la página.

Echemos un vistazo a nuestro ejemplo anterior, esta vez el almacenamiento de los elementos se halla en la variable $attributes

var element = $('myElement');
element.$attributes.effectInstance = new Fx.Tween(element, 'color');
element.$attributes.customProperty = 'someProperty';

element.$attributes.effectInstance;
//the Fx.Tween instance
element.$attributes.customProperty;
//'someProperty'

En este ejemplo no se producen fugas o los efectos adversos del primera ejemplo, pero ¡no es aconsejable utilizarlo! También, a veces, se cuelga el navegador alahora de descargar, tratando de borrar todas esas cosas. De todos modos este estilo de código no encaja con el resto de MooTools, por lo que hemos propuesto una solución mejor.

Cuando accedemos a un elemento, queremos ser capaces de almacenar y recuperar las propiedades de los elementos. Pero, ¿por qué atribuir estas propiedades directamente al elemento? Si se utiliza alguna forma de almacenamiento externo, no tendríamos que preocuparnos por la limpieza de los valores al descargar la página, las cosas irían más rápido, y las fugas de memoria serían una cosa del pasado.

Una solución digna de MooTools

Element.Storage es totalmente nuevo en MooTools 1.2. Es básicamente un Hash externo que almacena todas las propiedades y eventos personalizados para cada uno de los elementos con los que interactúa.
Echemos otra mirada a nuestro ejemplo anterior, esta vez utilizando el nuevo Element.Storage API:

var element = $('myElement');
element.store('effectInstance', new Fx.Tween(element, 'color'));
element.store('customProperty', 'someProperty');

element.retrieve('effectInstance');
//the Fx.Tween instance
element.retrieve('customProperty');
//'someProperty'

Tenga en cuenta que los eventos y las acciones ya no se asignan directamente a los Elementos. Todo se almacena en el Hash exterior, y administrado por MooTools, así que como desarrollador ya no tienen nada de qué preocuparse.

Cómo funciona (y para que lo estamos utilizando)

Para aquellos que estén interesados, les animo a que echen un vistazo al código fuente. En el fondo, todos los elementos que interactúan o se utilizan cuando se trabaja con MooTools reciben un número de identificación único (ID). Esta identificación que, en realidad, esta adjunta al elemento, luego sirve como clave (key) en el Element.Storage Hash.
Queremos que MooTools sea lo más rápido posible, por lo que hacemos un montón de memoization. En el fondo, la idea es no crear algo hasta la primera vez que sea necesario, pero luego cachearlo para su inmediato uso posterior. Muchos de ustedes ya han probado las versiones beta de MooTools 1.2 y se han divierto con el nuevo Elemento shortcuts. Todos estos shortcuts utilizan la nueva API de almacenamiento para hacer las cosas tan fluidas y eficientes como nos es posible.

Ejemplos avanzados

Elemento:retrieve actualmente acepta un segundo parámetro opcional que actuará como el valor por defecto para almacenar otro valor si no existe previamente. A continuación, recuperamos el valor tal y como se esperaba.

$('myElement').retrieve('defaultValue', 'Some Default Value');
//stores and returns 'Some Default Value' if the key doesn't previously exist

Además, muchos usuarios han preguntado por el namespacing del Elemento de almacenamiento. Hemos respondido diciéndoles que esto actualmente ya permite eso desde el momento en que se puede almacenar objetos y Hashes. Veámos el siguiente ejemplo.

var element = $('myElement');
var data = element.retrieve('galleryData', {});
data.id = 16;
data.source = '/images/16.jpg';
data.title = 'Some Title';
//later
$('myElement').retrieve('galleryData');
//{ id: 16, source: '/images/16.jpg', title: 'Some Title' }
$('myElement').retrieve('galleryData').id;
//16

Las posibilidades son infinitas. Nos encantaría conocer que a todo el mundo le gusta esta nueva función, así como la manera en que la usan en sus aplicaciones. ¡En mi próximo artículo hablaré un poco más sobre cómo MooTools utiliza el elemento de almacenamiento Element Storage para todos los impresionantes nuevos elementos shortcuts como por ejemplo Element:highlight!

– Ciao for now!