Question

我很好奇以下哪项是更好的做法（以及为什么）：

将数据注入HTML 5数据属性：

<div class="someDiv" data-for-popup="someData"></div>

使用某种数据结构将<script>注入文件

<script>
    var myMap = new Map();
    myMap.set('someKey','someValue');
</script>

在这两种情况下，我都会使用javascript / jQuery查找值，但哪个是更好的解决方案？

一点背景：我正在创建一个静态页面（除了服务页面之外，没有与服务器来回通信）所以我不能使用AJAX或任何其他服务器通信来为数据提供服务。正在注入的数据用于显示在页面上的弹出窗口＆＃34;更多信息＆＃34;请求某个页面对象。换句话说，我需要将数据存在于页面的某个位置，并且我正在寻找最佳途径，我也很好奇为什么这将是最好的选择。

Answer 1

仅在DOM元素中存储特定于它的内容，例如弹出窗口的文本和/或标题。

通过这种方式，您的JS函数可以依赖元素来构造弹出窗口。

<button data-content="My popup content" data-title="My title">More information</button>

<button data-content="My 2nd content" data-title="My 2nd title">More information</button>

$("document").on("click", "button", function () {
    var $this = $(this),
        title = $this.data("title"),
        content = $this.data("content");

    //open your popup
    //$this.popup({ title: title, content: content });
})

Answer 2

正如其他人所说，您应该只使用data-*存储有关元素的简短具体信息。

如果您希望显示更多信息＆＃39;样式弹出窗口，包含大量信息。我会将该信息存储在元素引用的隐藏div中。然后使用JS来显示该元素。

<button type="button" data-target="#product-1-more-info">Product 1</button>
<button type="button" data-target="#product-2-more-info">Product 2</button>

<div id="product-1-more-info" style="display:none;">
  More awesome info about product #1
</div>
<div id="product-2-more-info" style="display:none;">
  More awesome infor about product #2
</div>

<script>
  $('button').click(function() {
    $($this.data('target')).show();
  });
</script>

当然，这可以用动画和灯箱效果打扮。但是现在你不会在元素中存储大量数据，而且你的JS更简单。

Answer 3

哪一个更好将取决于您想要赋予该值的用途，以及该值如何与特定元素相关。因此，对于您的问题，这不是一般性的答案，因为它会根据具体情况而定。有些人评论说，一个好的经验法则是：

如果数据对该元素有用且特定，请使用data-*。
如果数据与元素之间没有任何关联，请使用<script>中的变量。

但是你的问题存在误解，你错过了（imho）一个非常重要的用例： data-*属性不是JavaScript独有的，它们可以在CSS中看到和使用（作为选择器的一部分或用作值），而<script>标记内的变量对CSS隐藏，无法使用。

现在data-*属性主要支持content和::before ::after属性，但至少在理论上，它们将被允许用于制作它们的其他属性更有用的造型目的。例如：

div[data-columns] {
    column-count: attr(data-columns);
}

该规则将为您节省CSS中的多个规则，它将简化您的代码并使其更健壮，更易于维护......遗憾的是，它尚不支持。

注入HTML5数据属性与注入javascript数据结构

3 个答案: