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(视图)属性是什么属性,哪些属性是数据属性(特定于应用程序逻辑).