将数据放入html5 data- *是否正确？

Question

我有这样的情况：

屏幕上有很多“摇滚”，每个摇滚都有克，分数和速度等属性。 单击岩石后，我们将给出其属性。

现在，我使用data- *将所有岩石的属性放在dom上，例如data-gram，data-score和data-speed。 'e.target'用于获取dom，所有属性也是如此。

<div class="rocks" data-gram="10" data-score="100" data-speed="10"></div>

我想知道这是对的吗，有什么缺点吗？

另外，还有其他更好的方法吗？

Answer 1

是的，这些data-字段是为此类用途而制作的。

另一种方法是在Javascript中创建一个包含该信息的数组或对象。 当您单击元素时访问DOM时，这根本就没有关系。

如果您试图在没有DOM访问的情况下访问数据，那么在这种情况下使用Javascript数组/对象应该会更快。

完全取决于您。

Answer 2

是。 以这种方式存储与HTML属性关联的数据是完全有效的。 MDN上有整篇文章。 https://developer.mozilla.org/en/docs/Web/Guide/HTML/Using_data_attributes我要问的问题是，这是否适合您如何使用/与该数据交互。 您使用的是JavaScript框架吗？ 您是否考虑过将外部数据作为JSON加载？ 那会更好吗？ 就我而言，我倾向于从外部json提要中加载此数据。 我发现它更具灵活性，并且适合角度库。