jquery - 为 jQuery 的 $.data() 存储多个值的最佳方式是什么？

Question

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

单个对象：

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

单独的值：

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

每种方法的权衡是什么？其中一些属性将被频繁访问（例如，在拖动等事件回调期间）。

Answer 1

在 1.4 中，您可以这样做：

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

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

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

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

你会吹走“一”的价值。

（就个人而言，我认为这是一种耻辱，因为 jQuery 已经广泛使用了 $.extend 合并对象。我不清楚为什么这里没有使用它。）

更新（用户建议：@ricka，谢谢）：

1.4.3 及更高版本，它合并数据（http://api.jquery.com/data/#data-obj）：

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

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

Answer 2

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

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

Answer 3

我可能会做类似的事情：

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