1

我更了解 jQuery 如何存储数据。

做以下其中一项有什么好处：

$('#editCity').data('href', "xx");
var a = $('#editCity').data('href');

或者

$('#editCity').attr('data-href', "xx");
var a = $('#editCity').attr('data-href');

还有一个相关的问题。

如果我有这个：

var modal = { x: 'xx', y: 'yy' };

我也可以使用 .data( .. ) 存储它吗？

4

3 回答 3

1

关于 data 函数最有趣的一点是你可以添加任何类型的对象，例如你的modal. 并且 jQuery，如文档中所述，在 DOM 更改时注意避免内存泄漏：

jQuery.data() 方法允许我们将任何类型的数据附加到 DOM 元素上，这种方式对循环引用是安全的，因此不会出现内存泄漏。

对于字符串，内存泄漏是不可能的，但主要区别在于第一个解决方案更清晰（如果您可能在应用程序的其他部分存储字符串以外的其他数据，则更连贯），更清晰（意图很明显），并且没有t 强制 CSS 计算（DOM 没有改变）。

于 2012-10-09T13:44:53.320 回答
1

由于可能存在内存泄漏，将属性值直接存储在 DOM 元素上是有风险的。如果您仍然在使用 jQuery，那么该.data()机制是跟踪每个元素信息的绝妙且安全的方法。它也允许存储任意 JavaScript 数据结构，而不仅仅是字符串。

编辑——当您的 HTML 标记包含data-foo属性时，这些属性会在访问键时被隐式读取。也就是说，如果您的 HTML 如下所示：

<div id="div1" data-purpose="container">

然后在 jQuery 中：

alert( $('#div1').data('purpose') ); // alerts "container"

此外，jQuery 还会对属性值进行一些“智能”分析。如果一个值看起来像一个数字，jQuery 将返回一个数字，而不是一个字符串。如果它看起来像 JSON，它会为您反序列化 JSON。

编辑——这是一个很好的技巧：在 Chrome 开发者控制台（“控制台”视图）中，您可以输入 JavaScript 表达式并对其进行评估。评估始终在您正在处理的页面的上下文中完成。如果您从“元素”视图中选择一个元素，那么在控制台中，JavaScript 符号$0将引用该选定的 DOM 元素。因此，您始终可以通过转到控制台并键入以下内容来检查元素的“数据”映射：

$($0).data("something");

如果不带参数调用该.data()函数，则返回所有键/值对：

$($0).data();
于 2012-10-09T13:45:24.107 回答
0

它们都有优势……也就是说，99% 的时间你应该使用.data('whatever', value)

使用优势.data('whatever', value)：

  • 不太容易导致内存泄漏，因为它不使用 DOM。
  • 从内存中提取数据比从 DOM 中提取数据要快一些。
  • 可以将任何类型的对象放入其中，而无需先将其序列化为 JSON。

使用优势.attr('data-whatever', value)：

  • 兼容.data('whatever')
  • 允许您按值选择元素：$('[data-whatever=foo]')
  • 您可以将任何对象放入其中，但如果它是复杂类型，则需要对其进行序列化。
于 2012-10-09T13:51:02.740 回答