最近我阅读了越来越多的关于人们在 HTML 标签中使用自定义属性的文章，主要是为了嵌入一些额外的数据以在 javascript 代码中使用。
我希望收集一些关于使用自定义属性是否是一种好的做法以及一些替代方法的反馈。
现在看来似乎真的可以简化既服务器端和客户端的代码，但它也不是W3C标准。
我们应该在 Web 应用程序中使用自定义 HTML 属性吗？为什么或者为什么不？
对于那些认为自定义属性是一件好事的人来说：使用它们时要记住哪些事情？
对于那些认为自定义属性不好的人：您使用哪些替代方法来完成类似的事情？
更新： 我最感兴趣的是各种方法背后的推理，以及为什么一种方法比另一种方法更好的观点。我认为我们都可以想出 4-5 种不同的方法来完成同一件事。（隐藏元素、内联脚本、额外类、从 id 解析信息等）。
更新 2： 似乎 HTML 5data-属性特性在这里有很多支持（我倾向于同意，它看起来像一个可靠的选择）。到目前为止，我还没有看到对这个建议的反驳。使用这种方法是否有任何问题/陷阱需要担心？或者它只是对当前 W3C 规范的“无害”失效？
HTML 5 明确允许以data. 因此，例如，<p data-date-changed="Jan 24 5:23 p.m.">Hello</p>是有效的。由于它受到标准的正式支持，我认为这是自定义属性的最佳选择。并且它不需要您使用 hack 重载其他属性，因此您的 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|\r\n/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"/>
避免使用自定义属性的最简单方法是使用现有属性。
使用有意义的、相关的类名。
例如，执行以下操作：type='book'和type='cd', 来表示书籍和 CD。类更适合表示某物是什么。
例如 class='book'
我过去曾使用过自定义属性，但老实说，如果您以语义上有意义的方式使用现有属性，则确实没有必要使用它们。
举一个更具体的例子，假设您有一个提供指向不同类型商店的链接的站点。您可以使用以下内容：
<a href='wherever.html' id='bookstore12' class='book store'>Molly's books</a>
<a href='whereverelse.html' id='cdstore3' class='cd store'>James' Music</a>
css 样式可以使用如下类：
.store { }
.cd.store { }
.book.store { }
在上面的例子中，我们看到两个都是指向商店的链接（与网站上的其他不相关的链接相反），一个是 cd 商店，另一个是书店。
所有好的插件都支持元数据插件（允许每个标签选项）。
它还允许无限复杂的数据/数据结构，以及键值对。
<li class="someclass {'some': 'random,'json':'data'} anotherclass">...</li>
或者
<li class="someclass" data="{'some':'random', 'json': 'data'}">...</li>
或者
<li class="someclass"><script type="data">{"some":"random","json":"data"}</script> ...</li>
然后像这样获取数据：
var data = $('li.someclass').metadata();
if ( data.some && data.some == 'random' )
alert('It Worked!');