jquery - 微数据与模块化 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>

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

Answer 1

两种方式都可以。

微数据是not only对于“键入的数据”。如果愿意，您可以定义自己的微数据词汇表。但您也可以使用“local”(强调我的):

The examples in the previous section show how information could be marked up on a page that doesn't expect its microdata to be re-used. Microdata is most useful, though, when it is used in contexts where other authors and readers are able to cooperate to make new uses of the markup.

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

关于 meta 元素:您也可以通过 data-* 属性获得类似的东西。在 HTML5 中，the script element can be used for "data blocks" .所以你可以使用类似的东西:

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

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

<!-- etc. -->

除了 text/plain，您可以使用任何适合您需要的内容(JSON、HTML 等)。