[翻译]Mootools 1.2新特性（一）：元素存储(Element Storage)

尝试翻译第一作，自己都读不懂，慢慢找时间改一下。

原文地址 : http://blog.mootools.net/2008/1/22/Element_Storage

MooTools另一个最新的内建特性是Element存储(Storage)。这篇文章描述这个强大的新特性使用方法，和为何开发这个特性，以及它如何保持你的应用组织化、有效率。

Element存储都包含些什么？
当开发高级javascript应用程序的时候，有时候联合一些额外的属性给DOM元素（Element）会更有益。我们总是使用DOM元素作为存储容器用来存储所需的数据，而这种常见的方法有一些缺陷，大多数问题都是由IE产生的问题，尽管如此，还是必须要解决掉才行。

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

我们都了解，IE不喜欢对象存储在元素Element属性里，并且如果不手动管理的话，effectInstance属性会导致内存泄漏。另一个问题是：访问innerHTML属性或者任意一个父元素时，IE会返回一个我们所期望的自定义属性（如string、数字类型等），这意味着customProperty会被正常的复制，但是如果它含有一些特定的自定义属性，会产生问题。显然在这两个问题中，内存管理是我们最需要考虑的，但是两个问题都需要考虑。

MooTools如何解决问题？

使用MooTools可以直接在元素 中叫做$events和$attributes 的属性（Property）存储自定义事件和属性（Attribute）。也可以 元素在页面上unloading的时候立即手动分离（detach）这些属性。
让我们重新看一下以前的示例，这次把这些自定义的东西存储在$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'

在这个示例中不会产生泄漏，也不会产生像前一个例子中那样不利的效果，但是代码太难看了，而且有时候浏览器会在unload的时候挂起，尝试清除所有的对象。这种风格的代码不适合Mootools，所以我们找出了一个更好的方案。

当我们访问一个元素(Element)的时候，我们使用它存储和取回自定义属性（property）。但是为什么要直接附加这些属性（property）到元素上呢？如果我们使用一些外部的表存储，就不用担心在页面unload的时候清除那些值了，程序会执行得更快，而内存泄漏也会成为历史。

一个MooTools有价值的方案

元素存储（Element Storage）是MooTools 1.2 特有的新内容。它基本上是一个扩展的HASH表，为每个需要交互的元素存储自定义属性（property）和事件（events）。
让我们再重视这个示例，这次用了最新的元素存储(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'

请注意事件（event）和行为（action）并不是直接附加在元素上了。所有的东西都存储在扩展的hash表里，由MooTools管理，做为一个开发人员，你不用再担心这些麻烦的事情了，直接使用这个专门用来为元素附加自定义属性、函数和对象的优雅清晰的API即可。

它如何工作和我们它用来做什么？

对它有兴趣的朋友，我鼓励你看一下它的源代码。每个的元素接受一个唯一的ID，这个ID才是真正附加在元素上的，由它的KEY做元素存储HASH服务。
我们希望MooTools运行得更快，所以我们做了很多memoization。最开始的时候不创建对象，直到它需要的第一时间，但当时已经缓存了，它立即就可以使用。很多人在mootools 1.2 beta试用过程中，希望出现元素对象上直接使用的捷径，他们认为更有意思。所有的这些捷径（shortcuts）用存储API，让你的代码更加流畅和高效。

高级示例

Element对象的retrieve方法可以接受可选的第二个参数，如果另一个值之前不存在，将作为该默认值来存储。之后就可以直接把值取出来了。

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

同样，很多人问到Element Storage名称空间的问题。我们的回答是：当你能存储对象的时候已经有限制了。参考一下的示例：

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

可能性是无止境的。我们很乐意知道大家都喜欢这项新功能的原因，以及在你的应用程序中你如何使用它。 

转载于:https://www.cnblogs.com/darkdawn/archive/2008/07/02/1234236.html