为jQuery的$ .data（）存储多个值的最佳方法是什么？

If storing multiple (10+) values on a large number of divs, is it more optimal to store them all in a single object, or as separate values?

如果在大量div上存储多个(10+)值,将它们全部存储在单个对象中,还是作为单独的值更为理想?

Single Object:

$("#div_id").data("data", {foo:1, bar:2});

Separate Values:

$("#div_id")
  .data("foo", 1)
  .data("bar", 2);

What are the trade-offs of each method? Some of these attributes will be accessed frequently (during event callbacks like dragging, for instance).

每种方法的权衡取舍是什么?其中一些属性将被频繁访问(例如在事件回调期间,例如拖动)。

3 个解决方案

#1

If both approaches are as easy to use in your code, go for storing a single object. It avoids the extra overhead of calling the data() method every time you need a value. This way, you can fetch the mapping object with one call to data(), and then retrieve values from this object as many times as you want without having to call data() again.

如果两种方法在代码中都很容易使用,那么请存储单个对象。它避免了每次需要值时调用data()方法的额外开销。这样,您可以通过一次调用data()来获取映射对象,然后根据需要多次从该对象中检索值,而无需再次调用data()。

The data() method uses objects to map elements to keys/values under the hood, so it does not offer any performance improvements over managing a mapping object yourself.

data()方法使用对象将元素映射到引擎盖下的键/值,因此与自己管理映射对象相比,它没有提供任何性能改进。

#2

In 1.4 you can do this:

在1.4中你可以这样做:

$('#somediv').data({ one : 1, two : 2, three : 3 });

This is a great way to initialize the data object. HOWEVER, in 1.4.2, bear in mind that using this form will REPLACE ANY existing data on this element. So, if you try this:

这是初始化数据对象的好方法。但是,在1.4.2中,请记住使用此表单将替换此元素的任何现有数据。所以,如果你试试这个:

$('#somediv').data( 'one', 1 );

$('#somediv').data({ two : 2, three : 3 });

You will be blowing away the value for 'one'.

你将吹走'一个'的价值。

(On a personal note, I think it is a shame since jQuery already makes extensive use of merging objects with its $.extend. Its not clear to me why that wasn't used here.)

(在个人方面,我认为这是一个遗憾,因为jQuery已经广泛使用与$ .extend合并对象。我不清楚为什么在这里没有使用它。)

UPDATE (suggested by user: @ricka, thank you):

更新(用户建议:@ricka,谢谢):

1.4.3 and on, it merges the data (http://api.jquery.com/data/#data-obj):

1.4.3及以上,它合并数据(http://api.jquery.com/data/#data-obj):

In jQuery 1.4.3 setting an element's data object with .data(obj) extends the data previously stored with that element. jQuery itself uses the .data() method to save information under the names 'events' and 'handle', and also reserves any data name starting with an underscore ('_') for internal use.

在jQuery 1.4.3中,使用.data(obj)设置元素的数据对象会扩展先前使用该元素存储的数据。 jQuery本身使用.data()方法在名称'events'和'handle'下保存信息,并保留任何以下划线('_')开头的数据名供内部使用。

Prior to jQuery 1.4.3 (starting in jQuery 1.4) the .data() method completely replaced all data, instead of just extending the data object. If you are using third-party plugins it may not be advisable to completely replace the element's data object, since plugins may have also set data.

在jQuery 1.4.3(从jQuery 1.4开始)之前,.data()方法完全替换了所有数据,而不仅仅是扩展数据对象。如果您使用的是第三方插件,则可能不建议完全替换元素的数据对象,因为插件可能也设置了数据。

#3

I'd probably do something like:

我可能会这样做:

var data = $("#div_id").data();   
data.foo=1;  
data.bar=2;

#1