javascript - 在 jQuery 的数据属性中存储数据 VS javascript 字符串

Question

我的网站有不同的元素，称为“小部件”。这些小部件中的每一个都包含一个独立的组件，该组件基本上是一个 div 和一个 JSON 对象。每个小部件的数据以 JSON 格式从 PHP 返回，然后我在每个小部件的 div 的 jQuery data 属性上回显它，如下所示:

<div class="widget" id="<?=$widget->id?> data-internal="<?= $widget->json_data?>
    content
</div>

因此，每次我想要访问小部件的内容时，我都可以从 jQuery 中的元素本身读取它，这样就可以轻松访问，因为我已经在做与 div 相关的事情了。

我想到的另一个选项是，id 以纯 JavaScript 输出数据，但随后我必须创建一个对象数组来访问它，有点像这样。

<script>
    $widget_array[<?= $widget->id?>] = <?= $widget->json_data ?>
</script>

这样我就必须获取小部件 ID，然后在小部件 JavaScript 数组内查找数据。

虽然第一种方法看起来更简单、更孤立、更有组织(每个组件都保存自己的数据)，但第二种方法似乎不太“hackish”。

我的问题是这两种方法有什么缺点或优点吗？将大量数据加载到 jquery 数据属性中是一种不好的做法吗？我会遇到性能问题吗？

Answer 1

根据我过去的经验，如果动态添加/删除 DOM 元素，则管理基于数组的实现会变得非常困难，因为现在您必须相应地操作数组。相反，如果您将内容放在 data 属性中，它就会与 DOM 元素关联，并随 DOM 元素一起添加/删除，这样管理起来会容易得多。虽然不确定它是否有任何性能影响，但没有遇到任何影响。

因此，尽管我过去使用过数组样式的内容存储，但现在我更喜欢数据属性方式。