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用于“类型数据”。如果您愿意，可以定义自己的Microdata词汇表。但你也可以使用“local”一个（强调我的）：

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

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

关于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，......）。

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

1 个答案: