Microdata與模塊化HTML5中的數據屬性

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」一個（重點煤礦）：

在上一節展示瞭如何信息可以在頁面進行標記，不希望被重新使用它的微觀數據的例子。儘管如此，微數據最有用，當它被用於其他作者和讀者能夠合作的新環境中時，可以使用標記。

不過，如果你想使用您在未來的網頁上有一些其他的微數據詞彙表（例如schema.org），你可能會得到你的「本地」微觀數據的一些衝突。所以我不會使用Microdata，如果它不提供超過data-*屬性的優惠。

關於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，...）。