Html5和data- *屬性？

Question

完全尊重Html5數據屬性

當我有這樣的代碼：

 <li class="user" data-name="Royi Namir" data-city="Boston" data-lang="js" data-food="Bacon"> </li>

我在文檔中添加了很多冗余字符。

我只需要這種類型的data-XXX ：

myDomElement.dataset[xxx];

但是，我可以輕松地做到這一點

<li class="user" dn="Royi Namir" dc="Boston" dl="js" df="Bacon"> </li>

沒有那些額外的data-前綴（並節省了很多額外的字符）。 並通過“開始時”選擇器來讀取它， 如[d ^] - jQuery API

我在這里錯過了什么嗎？

Answer 1

你可以用這個：

<li class="user" data-user='{"name":"Royi Namir", "city":"Boston", "lang":"js", "food":"Bacon"}'> </li>

接着

var user = JSON.parse(element.dataset.user);

使用jQuery，它甚至更簡單：

var user = $(element).data('user');

如果你想得到所有用戶：

var ​users = $('[data-user]').map(function(){return $(this).data('user')});

可以減少冗余和直接使用的結構，尤其是具有更深層屬性的結構。 數據屬性不僅適用於字符串。

但關於data-屬性的要點是規范化實踐。 現在，在查看HTML時，顯而易見的是，標准HTML（視圖）屬性是什么屬性，哪些屬性是數據屬性（特定於應用程序邏輯）。

Answer 2

我有時使用的另一種方法是將data- *字符串塑造成查詢字符串，例如

<li class="user" data-cn="dn=Royi Namir&dc=Boston&dl=js&df=Bacon">

並使用以下方法將其轉換為對象：

function getData(id,el){
    var data = el.getAttribute('data-'+id).split('&'), ret = {};
    data.map(
        function(a){
            var curr = a.split('=');
            this[curr[0]] = curr[1];
            return a;
        }, ret
    );
    return ret;
}

它不易出錯（不用擔心撇號等）和更好的可讀性。

的jsfiddle

Answer 3

如果要添加相當多的冗余字符，您可能希望以客戶端MVC形式重構應用程序 - 基本上將數據作為JSON傳遞，並通過模板處理它。

data-*屬性很酷，它們允許您在DOM中注入內容，同時保持文檔標准兼容，但如果您依賴使用DOM本身作為應用程序的數據層，我強烈建議您使用上述解決方案。