javascript - 使用 jQuery 存储数据的方式是否有优势？

Question

我更了解 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( .. ) 存储它吗？

Answer 1

直接在 DOM 元素上存储属性值是有风险的，因为可能存在内存泄漏。如果您无论如何都在使用 jQuery，.data() 机制是跟踪每个元素信息的一种绝妙而安全的方法。它也允许存储任意 JavaScript 数据结构，而不仅仅是字符串。

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

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

然后在 jQuery 中:

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

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

编辑 — 这是一个好技巧:在 Chrome 开发人员控制台(“控制台” View )中，您可以键入 JavaScript 表达式并计算它们。评估始终在您正在处理的页面的上下文中完成。如果您从“元素” View 中选择一个元素，那么在控制台中，JavaScript 符号 $0 将引用该选定的 DOM 元素。因此，您始终可以通过转到控制台并键入类似以下内容来检查元素的“数据”映射:

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

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

$($0).data();