自定义属性 - 是或不是？

最近我一直在阅读越来越多关于在HTML标签中使用自定义属性的人,主要是为了嵌入一些额外的数据用于javascript代码.

我希望收集一些关于是否使用自定义属性是一个好习惯的反馈,以及一些替代方案.

现在看来似乎真的可以简化既服务器端和客户端的代码,但它也不是W3C标准.

我们应该在我们的网络应用程序中使用自定义HTML属性吗？为什么或者为什么不？

对于那些认为自定义属性是好事的人:使用它们时要记住哪些事项？

对于那些认为自定义属性是坏事的人:你用什么方法来完成类似的事情？

更新: 我最感兴趣的是各种方法背后的推理,以及为什么一种方法比另一种更好的原因.我想我们都可以用4-5种不同的方式来完成同样的事情.(隐藏元素,内联脚本,额外类,从ids解析信息等).

更新2: 似乎HTML 5 data-属性功能在这里有很多支持(我倾向于同意,它看起来像一个可靠的选项).到目前为止,我还没有看到这个建议的反驳方式.使用这种方法是否有任何问题/陷阱？或者它只是对当前W3C规范的"无害"失效？

HTML 5明确允许以自己开头的自定义属性data.因此,例如,

Hello

资料来源:http: //www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes

这是我最近使用的一种技术:

    

    
... other regular content...

comment-object绑定到父元素(即#someelement).

这是解析器:http://pastie.org/511358

要获取任何特定元素的数据,只需parseData使用对作为唯一参数传递的元素的引用进行调用:

var myElem = document.getElementById('someelement');

var data = parseData( myElem );

data.someRandomData.a; // <= Access the object staight away

它可以比那更简洁:

    
    ... content ...

访问它:

parseData( document.getElementById('foo') ).specialID; // <= 245

使用它的唯一缺点是它不能与自闭元素(例如)一起使用,因为注释必须在元素内被视为元素的数据.

编辑:

这项技术的显着优点:

易于实施

难道不是无效HTML/XHTML

易于使用/理解(基本的JSON表示法)

不像大多数替代品那样不引人注目且语义清晰

这是解析器代码(从上面的http://pastie.org/511358超链接复制,以防它在pastie.org上变得不可用):

var parseData = (function(){

    var getAllComments = function(context) {

            var ret = [],
                node = context.firstChild;

            if (!node) { return ret; }

            do {
                if (node.nodeType === 8) {
                    ret[ret.length] = node;
                }
                if (node.nodeType === 1) {
                    ret = ret.concat( getAllComments(node) );
                }
            } while( node = node.nextSibling );

            return ret;

        },
        cache = [0],
        expando = 'data' + +new Date(),
        data = function(node) {

            var cacheIndex = node[expando],
                nextCacheIndex = cache.length;

            if(!cacheIndex) {
                cacheIndex = node[expando] = nextCacheIndex;
                cache[cacheIndex] = {};
            }

            return cache[cacheIndex];

        };

    return function(context) {

        context = context || document.documentElement;

        if ( data(context) && data(context).commentJSON ) {
            return data(context).commentJSON;
        }

        var comments = getAllComments(context),
            len = comments.length,
            comment, cData;

        while (len--) {
            comment = comments[len];
            cData = comment.data.replace(/\n|\r\n/g, '');
            if ( /^\s*?\{.+\}\s*?$/.test(cData) ) {
                try {
                    data(comment.parentNode).commentJSON =
                        (new Function('return ' + cData + ';'))();
                } catch(e) {}
            }
        }

        return data(context).commentJSON || true;

    };

})();

...

...

Molly's books
James' Music

.store { }
.cd.store { }
.book.store { }

...

...

 ...

var data = $('li.someclass').metadata();
if ( data.some && data.some == 'random' )
alert('It Worked!');