是或不是？
最近我一直在阅读越来越多关于在HTML标签中使用自定义属性的人，主要是为了嵌入一些额外的数据以用于JavaScript代码。
我希望收集一些关于是否使用自定义属性的良好做法的反馈，以及其他替代方法。
它似乎可以真正简化服务器端和客户端代码，但它也不符合W3C标准。
我们是否应该在我们的Web应用程序中使用自定义HTML属性？ 为什么或者为什么不？
对于那些认为自定义属性是好事的人来说：使用它们时需要注意哪些事项？
对于那些认为自定义属性是坏事的人：你用什么替代方法来完成类似的事情？
更新：我最感兴趣的是各种方法背后的推理，以及为什么一种方法比另一种更好。 我想我们都可以拿出4-5种不同的方式来完成同样的事情。 （隐藏元素，内联脚本，额外的类，来自ID的解析信息等）。
更新2：看起来HTML5 data-属性功能在这里有很多支持（我倾向于同意，它看起来像一个可靠的选项）。 到目前为止，我还没有看到这个建议的反驳方式。 是否有任何问题/陷阱担心使用这种方法？ 还是仅仅是当前W3C规范的“无害”无效？
HTML 5显式允许以data开头的自定义属性。 因此，例如， <p data-date-changed="Jan 24 5:23 pm">Hello</p>有效。 由于它是由一个标准正式支持的，我认为这是自定义属性的最佳选择。 它并不要求你用黑客来重载其他属性，所以你的HTML可以保持语义。
资料来源：http://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes
这是我最近使用的一种技术：
<div id="someelement">
<!-- {
someRandomData: {a:1,b:2},
someString: "Foo"
} -->
<div>... other regular content...</div>
</div>
注释对象绑定到父元素（即#someelement）。
这是解析器： http : //pastie.org/511358
要获取任何特定元素的数据，只需调用parseData并引用该元素作为唯一参数传递即可：
var myElem = document.getElementById('someelement');
var data = parseData( myElem );
data.someRandomData.a; // <= Access the object staight away
它可以比这更简洁：
<li id="foo">
<!--{specialID:245}-->
... content ...
</li>
访问它：
parseData( document.getElementById('foo') ).specialID; // <= 245
使用它的唯一缺点是它不能用于自闭元素（例如<img/> ），因为注释必须位于元素的内部才能被视为元素的数据。
编辑 ：
这项技术的显着优势：
以下是解析器代码（从上面的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|rn/g, '');
if ( /^s*?{.+}s*?$/.test(cData) ) {
try {
data(comment.parentNode).commentJSON =
(new Function('return ' + cData + ';'))();
} catch(e) {}
}
}
return data(context).commentJSON || true;
};
})();
如果您为页面指定模式，则可以创建任何属性。
例如：
前页
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:addthis="http://www.addthis.com/help/api-spec">
...
<a addthis:title="" addthis:url="" ...>
Facebook（甚至标签）
<html xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml">
...
<fb:like href="http://developers.facebook.com/" width="450" height="80"/>
上一篇: Yea or nay?
下一篇: What is the difference between JavaScript's getElementById() and getElementsByName() functions?