在DOM中存储数据

Question

我有一个书籍列表，我想针对每本书存储数据，例如价格，数量，身份证，catergory id，大小，重量等。

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

但是我已经读过，在性能意义上访问数据属性很慢。另外我可以有同一本书的多个实例，所以我对html中的膨胀有点担心。

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

所以我的问题是在前端，DOM或Javscript中存储数据的最佳做法是什么？

提前致谢

Answer 1

data-属性通常更多地用作将数据导入JavaScript（即从服务器端模板）的方式，而不是用于存储数据的运行时位置。更好的地方是将活动数据保存在JavaScript对象中，特别是如果您要在脚本的生命周期中访问它或经常操作它。

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

Answer 2

选择实际上取决于您的应用程序架构和应用程序中的功能类型。如果你正在构建单页面应用程序，我发现使用构造良好的json对象和一个好的模板插件可以在功能方面提供更多的灵活性。

我发现将数据索引到json中的id，然后将该id存储在“data-”元素中，这为您提供了一种很好的方式来响应浏览器事件（点击等），而无需搜索JSON结构。拥有JSON结构还可以更轻松地执行操作，例如排序列表和您可能想要执行的其他全局操作，而无需从DOM重建数据。当您使用类似MVC的框架或实现自己的“可观察”数据结构时，此方法也更好。

另一方面，如果您正在处理主要是服务器端代码并​​且在页面中仅使用基本功能来利用您的“数据”数据（例如点击的显示书详细信息或类似的简单内容），则可能是更简单地使用“data-”属性来存储其他详细信息。

Answer 3

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

在data-*属性的情况下，可以直接从DOM访问数据，因此两者已经绑在一起，至少在我看来，这是一种更好的做法。但是，正如评论中所提到的，存在一个带有DOM属性的DOM检索开销。

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