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

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

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

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

将

注入具有某些数据结构的文件

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

var myMap=newmap（）；
set（'someKey'，'someValue'）；

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

---

一点背景：我正在创建一个静态页面（除了维护页面之外，没有与服务器的来回通信），因此我不能使用AJAX或任何其他服务器通信来维护数据。当为某个页面对象请求“更多信息”时，正在注入的数据用于显示在页面上的弹出窗口。换句话说，我需要数据出现在页面上的某个地方，我正在寻找最好的方法，我也很好奇为什么这是最好的选择。

只在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 });
})

更多信息
更多信息
$（“文档”）。在（“单击”、“按钮”上，函数（）{
变量$this=$（this），
title=$this.data（“title”），
content=$this.data（“content”）；
//打开弹出窗口
//$this.popup（{title:title，content:content}）；
})

正如其他人所说，您应该只使用

数据-*

存储有关元素的简短特定信息

如果您希望显示“更多信息”样式的弹出窗口，其中包含大量信息。我会将该信息存储在元素引用的隐藏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>

产品1
产品2
更多关于产品的精彩信息#1
关于产品的更多精彩信息#2
$（“按钮”）。单击（函数（）{
$（$this.data（'target'））.show（）；
});

---

当然，这可以通过动画和灯箱效果来修饰。但是现在您没有在元素中存储大量数据，您的JS也简单多了。

哪一个更好取决于您希望对该值的使用，以及该值与特定元素的关系。所以对于你的问题没有一个通用的答案，因为它是以个案为基础的。一个好的经验法则是一些人所评论的：

• 如果数据有用且特定于该元素，请使用

  data-*

• 如果数据和元素之间没有连接，请使用
  中的变量

但是你的问题中有一个误解，你缺少了一个真正重要的用例：

数据-*

属性不是JavaScript独有的，它们可以在CSS中看到和使用（作为选择器的一部分或用作值），而

标记中的变量对CSS是隐藏的，不能使用

目前，

数据-*

属性主要在

的
内容
属性中受支持：
之前和
：：之后
，但至少在理论上，其他属性中允许使用这些属性，使它们在样式设置方面更有用。例如：

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

该规则将使您的CSS中不再有多个规则，它将简化您的代码，使其更健壮，更易于维护。。。遗憾的是，它还不受支持。
如果使用JS，在设置值之前可以进行更多的计算/逻辑。不过，数据属性是静态值的理想位置，这里没有“最佳选项”。重要的是为特定任务使用正确的选项<代码>数据-*
属性对于向特定元素添加数据非常有用。如果元素和数据之间没有连接，那么使用
data-*
没有多大意义。