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-前缀（并且节省了很多额外的字符）。并通过"start with " selector like [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

如果要添加很多冗余字符，您可能希望在client-side MVC flavour中重构应用程序 - 基本上将数据作为JSON传递，并通过模板处理它。

data-*属性很酷，它们允许您在DOM中注入内容，同时保持文档标准兼容，但如果您依赖使用DOM本身作为应用程序的数据层，我强烈建议您去与前面提到的解决方案。

Html5和data- *属性？

3 个答案: