6

尊重 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”选择器来阅读它，比如 [d^] – jQuery API

我在这里错过了什么吗？

4

3 回答 3

14

你可以使用这个：

<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（视图）属性，哪些属性是数据属性（特定于您的应用程序逻辑）。

于 2013-01-04T10:32:13.297 回答
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

于 2013-01-04T10:50:51.890 回答
1

如果您要添加大量冗余字符，您可能希望以客户端 MVC 风格重构您的应用程序- 基本上将数据作为 JSON 传递，并通过模板处理它。

data-*属性很酷，它们可以让您在 DOM 中注入内容，同时保持文档标准兼容，但是如果您依赖使用 DOM 本身作为应用程序的数据层，我强烈建议您使用上述解决方案。

于 2013-01-04T10:37:46.153 回答