最近我读到越来越多关于人们在HTML标记中使用自定义属性的文章，主要是为了在javascript代码中嵌入一些额外的数据。
我希望收集一些关于使用自定义属性是否是一种好的实践的反馈，以及有哪些替代方案。
它似乎真的可以简化服务器端和客户端代码，但它也不符合W3C标准。
我们是否应该在web应用中使用自定义HTML属性?为什么或者为什么不呢?
对于那些认为自定义属性是一件好事的人来说:在使用它们时要记住哪些事情?
对于那些认为自定义属性是坏事的人:您使用什么替代方法来完成类似的事情?
更新:我最感兴趣的是各种方法背后的原因，以及为什么一种方法比另一种方法更好。我认为我们都可以想出4-5种不同的方法来完成同样的事情。(隐藏元素，内联脚本，额外的类，从id解析信息，等等)。
更新2:似乎HTML 5数据属性特性在这里有很多支持(我倾向于同意，它看起来是一个可靠的选项)。到目前为止，我还没有看到对这个建议的反驳。使用这种方法有什么问题/陷阱需要担心吗?或者仅仅是对当前W3C规范的“无害”的无效?
当前回答
我认为使用现有的XHTML特性而不破坏任何东西或扩展名称空间没有问题。让我们来看一个小例子:
<div id="some_content">
<p>Hi!</p>
</div>
如何在没有附加属性的情况下向some_content添加附加信息?像下面这样添加另一个标签怎么样?
<div id="some_content">
<div id="some_content_extended" class="hidden"><p>Some alternative content.</p></div>
<p>Hi!</p>
</div>
它通过您选择的定义良好的id/扩展名“_extended”及其在层次结构中的位置来保持关系。我经常将这种方法与jQuery一起使用，而不是实际使用Ajax之类的技术。
其他回答
这是我最近在用的一个技巧:
<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/>)，因为注释必须在被视为该元素数据的元素中。
编辑:
该技术的显著好处:
易于实施 不使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;
};
})();
我知道有人反对，但我想到了一个超短的解决方案。如果你想使用一个自定义属性“mine”，例如:
<a href="test.html" mine-one="great" mine-two="awesome">Test</a>
然后你可以像jquery.data()一样运行这段代码来获取一个对象。
var custom_props = {} ;
$.each($(".selector")[0].attributes, function(i,x) {
if (this.specified && x.name.indexOf("mine-") !== -1)
self.new_settings[x.name.replace("modal-","")] = x.value;
});
我没有使用自定义属性，因为我输出的是XHTML，因为我希望数据能够被第三方软件机器读懂(不过，如果我愿意，我也可以扩展XHTML模式)。
作为自定义属性的替代品，我发现id和class属性(例如，在其他答案中提到的)足够了。
另外，考虑一下这个:
如果额外的数据既能被人读又能被机器读，那么就需要使用(可见的)HTML标记和文本进行编码，而不是作为自定义属性。 如果它不需要人类可读，那么也许可以使用不可见的HTML标记和文本进行编码。
有些人例外:他们允许自定义属性，在运行时通过Javascript在客户端添加到DOM中。他们认为这是可以的:因为自定义属性只在运行时添加到DOM, HTML不包含自定义属性。
我一直使用自定义字段，例如<a I ="" ....然后用jquery引用i。无效的html，是的。它工作得很好，是的。
We've made a web-based editor that understands a subset of HTML - a very strict subset (that understood nearly universally by mail clients). We need to express things like <td width="@INSWIDTH_42@"> in the database, but we can't have that in the DOM, otherwise the browser where the editor runs, freaks out (or is more likely to freak out than it is likely to freak out over custom attributes). We wanted drag-and-drop, so putting it purely in the DOM was out, as was jquery's .data() (the extra data didn't get copied properly). We probably also needed the extra data to come along for the ride in .html(). In the end we settled on using <td width="1234" rs-width="@INSWIDTH_42@"> during the editing process, and then when we POST it all, we remove width and do a regex search-and-destroy s/rs-width=/width=/g.
起初，写这篇文章的人是这个问题上的验证纳粹，他尝试了所有方法来避免我们的自定义属性，但最后当没有其他方法可以满足我们所有的需求时，他默认了。当他意识到自定义属性永远不会出现在电子邮件中时，这对他有所帮助。我们确实考虑过在课堂上编码我们额外的数据，但认为这是两害相权取其大。
就我个人而言，我更喜欢让东西干净，通过验证等，但作为一名公司员工，我必须记住我的主要责任是推进公司的事业(尽可能快地赚钱)，而不是我对技术纯洁性的自私愿望。工具应该为我们工作;我们不是为了他们。
