[翻译]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/p/1234236.html