在 DOM 中存储数据

Question

我有一个书籍列表，我想存储每本书的数据，例如价格、数量、id、类别 id、大小、重量等。

我正在考虑通过使用 data- 属性扩展表示列表中每本书的 li 元素来将所有这些存储在 dom 中。然后可以直接使用 javascript 使用这些数据。

但是我读到访问数据属性在性能方面很慢。此外，我可以拥有同一本书的多个实例，所以我有点担心 html 中的膨胀。

另一种方法是使用 JS 对象来存储每本书的数据。

所以我的问题是在前端、DOM 或 JavaScript 中存储数据的最佳实践是什么？

提前致谢

Answer 1

这些data-属性通常更多地用作将数据导入您的 JavaScript（即从您的服务器端模板）中的一种方式，而不是用作存储数据的运行时位置。将活动数据保存在 JavaScript 对象中更好，尤其是当您将在脚本的生命周期中频繁访问或操作它时。

这更符合 MVC 方法，其中数据位于您的模型中，但可能在您的视图中表示。出于这个原因，一些较新的 MVC 框架如 AngularJS 提供了两者之间的自动双向绑定。

Answer 2

DOM将其存储在元素中与将数据保留为对象之间的区别JavaScript在于，在第一种情况下，您的数据和DOM元素直接相关，而在第二种情况下，您需要以某种方式保留相似的数据和DOM结构，以保持数据相关到DOM. 第二种情况，顾名思义，更容易出错，因为您必须确保DOM数据中的每个更改都反映在数据中（添加/删除/修改元素），并且数据中的每个更改都反映在数据中DOM（添加/删除元素）。删除/修改数据成员）。

对于data-*属性数据，直接从 DOM 访问，因此两者已经绑定在一起，至少在我看来，这是一个更好的实践。然而，正如评论中提到的，属性带来了 DOM 检索开销data-*。

就性能而言，两者都要求将数据存储在内存中，无论是作为DOM元素属性还是作为JavaScript对象。检索DOM元素属性实际上更昂贵，但更方便。渲染不受data-*属性影响，因为它们没有任何功能意义。