我正在使用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,……).