微数据与模块化HTML5中的数据属性 [英] Microdata vs. the data attribute in modular HTML5

问题描述

我在PHP中开发，并且在动态/可变内容周围使用了一些html包装（样式化的div）。换句话说，我多次使用标准模板并用不同的HTML填充它，从而创建类似的模块。我也使用jQuery根据用户交互动态更新内容。每个模块都需要一些额外的信息来告诉jQuery如何处理用户交互。我一直在使用微数据或数据属性来完成这个任务。例子：

 < script> 
 $（document）.ready（function（）{
 eval（$（。wrapper）。children（meta [itemprop = userDoesSomething]）。attr（content））; 
}）; 
< / script？ 
< div itemscope class =wrapperid =module1> 
< meta itemprop =userDoesSomethingcontent =alert（'Microdata better！'）;> 
特定于模块的内容
< / div> 
  

或

 <脚本> 
 $（document）.ready（function（）{
 eval（$（。wrapper）。data（userDoesSomething））; 
}）; 
< / script> 
< div class =wrapperid =module1data-userDoesSomething =alert（'数据属性更好！'）;> 
特定于模块的内容
< / div> 
  

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

解决方案

这两种方式都是可能的。

微数据不仅用于输入数据。如果你喜欢，你可以定义你自己的Microdata词汇表。但您也可以使用本地（强调我的）：

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

但是，如果您想在您的网页上使用其他一些Microdata词汇表（例如 schema.org ）未来，你可能会与你的本地微数据产生冲突。因此，如果它没有为您提供超过数据 - * 属性的优惠，我就不会使用Microdata。

关于 meta 元素：您也可以使用 data - * 属性获得类似的内容。在HTML5中， 脚本元素可用于数据块。所以你可以使用类似的东西：

 < div class =wrapperid =module1> 
< script type =text / plaindata-userDoesSomething =alert（'Data attributes are better！'）;> 
< / script> 
特定于模块的内容
< / div> 
 
< div class =wrapperid =module1> 
< script type =text / plaindata-userDoesSomething> 
 alert（'数据属性更好！'）; 
< / script> 
特定于模块的内容
< / div> 
 
<！ - 等 - > 
  

而不是 text / plain ，你可以使用任何适合您的需求（JSON，HTML，...）。

I am developing in PHP and am using some html wrappers (styled divs) around dynamic/variable content. In other words, I'm using a standard template multiple times and filling it with different HTML, creating similar looking "modules". I also am using jQuery to dynamically update the content based on user interaction. Each module requires some extra information to tell jQuery how to process the user interaction. I have been waffling between using microdata or data attributes to accomplish this. Examples:

<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>

or

<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>

Both accomplish the same thing, but with microdata, I don't have to insert an attribute into the wrapper's tag. I can just include the "data" inside the wrapper using a meta tag, keeping the wrapper template intact. I also realize the data attribute is probably more appropriate as microdata is really meant for typed data, but in this case, it is more convenient. Any thoughts on which is better in the long run?

解决方案

Both ways are possible.

Microdata is not only for "typed data". You could define your own Microdata vocabulary, if you like. But you could also use a "local" one (emphasis mine):

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.

However, if you want to use some other Microdata vocabulary (e.g. schema.org) on your pages in the future, you might get some conflicts with your "local" Microdata. So I’d not use Microdata if it doesn’t offer you benefits over data-* attributes.

Regarding the meta element: You can get something similar with data-* attributes, too. In HTML5, the script element can be used for "data blocks". So you could use something like:

<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. -->

Instead of text/plain, you could use whatever suits your needs (JSON, HTML, …).

这篇关于微数据与模块化HTML5中的数据属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！