jquery – Microdata与模块化HTML5中的数据属性

前端之家收集整理的这篇文章主要介绍了jquery – Microdata与模块化HTML5中的数据属性前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用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>

两者都完成了同样的事情,但是使用微数据,我不必在包装器的标签中插入属性.我可以使用元标记在包装器中包含“数据”,保持包装器模板不变.我也意识到数据属性可能更合适,因为微数据实际上是用于类型化数据,但在这种情况下,它更方便.从长远来看,有哪些想法更好?

解决方法

两种方式都是可能的.

微数据是“类型数据”的not only.如果您愿意,可以定义自己的Microdata词汇表.但你也可以使用“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.

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

关于元元素:您也可以使用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,……).

猜你在找的jQuery相关文章