我的网站有不同的元素，称为“小部件”。这些小部件中的每一个都包含一个独立的组件，它基本上是一个div和一个JSON对象。每个小部件的数据都以JSON格式从PHP返回，然后我在每个小部件data的jQuery div属性上回显它，如下所示：
<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数据属性中是不好的做法？我会遇到性能问题吗？
答案 0 :(得分：1)
根据我过去的经验，如果要动态添加/删除DOM元素，则管理基于数组的实现变得非常困难，因为现在您必须相应地操作数组。相反，如果您将内容放在数据属性中，它将与DOM元素关联，并使用DOM元素添加/删除，更容易管理。不确定它是否有任何性能影响，但没有任何影响。
所以即使我过去使用过数组样式的内容，我现在也喜欢数据属性方式。
答案 1 :(得分：0)
我更喜欢div data属性的放置数据，因为这样：
data选择器来访问它。但我必须承认，如果你需要它全局，它总是取决于那么肯定使用第二种方法。
答案 2 :(得分：0)
data-*属性是HTML而不是jQuery，因此您可以像第一种方法一样使用原始javascript，如下所示：
JS Fiddle
var test = document.getElementById('test');
console.log(test.getAttribute("data-test"));<div id="test" data-test="sample text"></div>
如果你像这样写“
，你也可以得到相同的结果console.log(test.dataset.test);
了解更多信息https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes
答案 3 :(得分：0)
第二种方法更集中。
如果您需要稍后以编程方式操作或加载更多数据，则可以在同一区域中执行此操作，因为您可以访问两者而不是直接编辑属性。并不是说有什么问题，但html属性中的长字符串可能很混乱，我个人更喜欢html中较少的“噪音”，并且在维护方面可以让相同区域的内容更容易访问。