5

我正在使用 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 属性可能更合适，因为微数据实际上是用于类型数据，但在这种情况下，它更方便。从长远来看，有什么想法更好？

4

1 回答 1

4

两种方式都是可能的。

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

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

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

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

<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 等）。

于 2013-10-02T10:08:23.820 回答