Javascript "；“数据”；元素中的属性

我运行代码没有任何问题。我的问题是：这是我正在做的一个好的实践吗？这种跨浏览器/跨平台兼容吗？ 我使用的是xhtml严格的doctype

<div id="element" data='{"foo":"bar"}'></div>
<script type="text/javascript">
  alert($('#element').attr('data'));
</script>

警报（$（'元素'）.attr（'数据'）；

现在你可能想知道我为什么不这么做：

<div id="element"></div>
<script type="text/javascript">
  $('#element').data('json', '{"foo":"bar"}');
  alert($('#element').data('json'));
</script>

$（'#element'）.data（'json'，'{“foo”：“bar}'）；
警报（$（'#元素'）。数据（'json'）；

我举个例子说明我为什么这么做。 我正在加载一个网站上的所有评论和默认的头像图像。我只想在用户向下滚动时加载正确的图像，所以我需要将正确的图像源存储在某个地方

<img id="avatar-1" src="default.png" data='{"src": "user-avatar.png"}' />

没有这一点，我需要做：

<img id="avatar-1" src="default.png" />
<script type="text/javascript">
  $('#avatar-1').data('json', '{"src": "user-avatar.png"}');
</script>

$（'#avatar-1'）.data（'json'，'{“src”：“user avatar.png}'）；

这会产生几十个不必要的脚本标记。 我知道我可以在php中合并所有这些脚本，然后立即显示，但代码的可读性不如“数据”解决方案

---

如果您知道更好的解决方案，请告诉我。

出于某种原因，您使用的数据属性似乎根本不存在。XHTML中唯一的数据属性是的。你可能在谈论习俗。jQuery很可能认为您的代码是HTML5，并将数据属性视为HTML5，但我对此不太确定

从下面对这个问题的一个评论中添加，结果表明JavaScript始终能够读取任意属性，但是它不会验证，一些开发者认为它是坏的形式。

AS，这样做的好方法是HTML5的自定义数据属性。它们开始于

数据-

，可用于应用程序自身的目的。否则浏览器将忽略它们

更妙的是，jQuery的最新版本将自动将它们加载到调用中，因此您不需要对它们进行黑客调用

您可以使用以下HTML：

<img id="avatar-1" src="default.png" data-src="user-avatar.png" />

---

我还注意到twitter正在做SOA，正如您链接到的文章所指出的，定制数据标记在javascript中永远是可读的。但是，如果你尝试验证它，它确实会出现问题，一些开发人员（不是我自己）认为它是坏的形式。HTML5只会忽略前面有

数据-

的任何内容，这意味着您不会因为选择这样的名称而与特定于浏览器的属性名称发生冲突，您学究式的同事也没有更多的理由抱怨。

alert($('#avatar-1').data('src'));