微数据与模块化 HTML5 中的数据属性

Question

我正在用 PHP 进行开发，并且正在使用一些围绕动态/可变内容的 html 包装器（样式化 div）。换句话说，我多次使用标准模板并用不同的 HTML 填充它，创建外观相似的“模块”。我还使用 jQuery 根据用户交互动态更新内容。每个模块都需要一些额外的信息来告诉 jQuery 如何处理用户交互。我一直在使用微数据或数据属性来实现这一目标之间徘徊。例子：

<script>
  $(document).ready(function() {
    eval($(".wrapper").children("meta[itemprop=userDoesSomething]").attr("content"));
  });
</script?
<div itemscope class="wrapper" id="module1">
  <meta itemprop="userDoesSomething" content="alert('Microdata is better!');">
  Module-specific content
</div>

或者

<script>
  $(document).ready(function() {
    eval($(".wrapper").data("userDoesSomething"));
  });
</script>
<div class="wrapper" id="module1" data-userDoesSomething="alert('Data attributes are better!');">
  Module-specific content
</div>

两者都完成相同的事情，但是对于微数据，我不必将属性插入到包装器的标签中。我可以使用元标记将“数据”包含在包装器中，保持包装器模板完好无损。我也意识到 data 属性可能更合适，因为微数据实际上是用于类型化数据，但在这种情况下，它更方便。从长远来看，有什么想法更好吗？

Answer 1

两种方式都可以。

\n\n

微数据不仅仅适用于“类型化数据”。如果您愿意，您可以定义自己的微数据词汇表。但你也可以使用“本地”的（强调我的）：

\n\n

\n

上一节中的示例展示了如何在不希望重复使用其微数据的页面上标记信息。然而，当微数据用于其他作者和读者能够合作对标记进行新用途的环境中时，它是最有用的。

\n

\n\n

但是，如果您将来想在页面上使用其他微数据词汇（例如schema.org ），则可能会与“本地”微数据发生一些冲突。因此，如果微数据不能为您提供优于data-*属性的优势，我就不会使用它。

\n\n

关于meta元素：您也可以通过属性获得类似的东西data-*。在 HTML5 中，元素script可用于“数据块”。所以你可以使用类似的东西：

\n\n

<div class="wrapper" id="module1">\n  <script type="text/plain" data-userDoesSomething="alert(\'Data attributes are better!\');">\n  </script>\n  Module-specific content\n</div>\n\n<div class="wrapper" id="module1">\n  <script type="text/plain" data-userDoesSomething>\n    alert(\'Data attributes are better!\');\n  </script>\n  Module-specific content\n</div>\n\n<!-- etc. -->\n

\n\n

text/plain您可以使用任何适合您需要的内容（JSON、HTML、\xe2\x80\xa6），而不是。

\n