最近我读到越来越多关于人们在HTML标记中使用自定义属性的文章，主要是为了在javascript代码中嵌入一些额外的数据。
我希望收集一些关于使用自定义属性是否是一种好的实践的反馈，以及有哪些替代方案。
它似乎真的可以简化服务器端和客户端代码，但它也不符合W3C标准。
我们是否应该在web应用中使用自定义HTML属性?为什么或者为什么不呢?
对于那些认为自定义属性是一件好事的人来说:在使用它们时要记住哪些事情?
对于那些认为自定义属性是坏事的人:您使用什么替代方法来完成类似的事情?
更新:我最感兴趣的是各种方法背后的原因，以及为什么一种方法比另一种方法更好。我认为我们都可以想出4-5种不同的方法来完成同样的事情。(隐藏元素，内联脚本，额外的类，从id解析信息，等等)。
更新2:似乎HTML 5数据属性特性在这里有很多支持(我倾向于同意，它看起来是一个可靠的选项)。到目前为止，我还没有看到对这个建议的反驳。使用这种方法有什么问题/陷阱需要担心吗?或者仅仅是对当前W3C规范的“无害”的无效?
当前回答
在我看来，自定义属性不应该被使用，因为它们不具有有效性。除此之外，你可以为一个元素定义很多类，比如:
<div class='class1 class2 class3'>
Lorem ipsum
</div>
其他回答
避免使用自定义属性的最简单方法是使用现有属性。
使用有意义的、相关的类名。 例如，执行如下命令:type='book' and type='cd'， 代表书籍和光盘。类更好地表示事物是什么。
如类= '书'
我过去使用过自定义属性，但老实说，如果以语义上有意义的方式使用现有属性，就真的没有必要使用它们了。
举一个更具体的例子，假设你有一个网站，提供不同种类商店的链接。你可以使用以下语句:
<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店，另一个是书店。
在我看来，自定义属性不应该被使用，因为它们不具有有效性。除此之外，你可以为一个元素定义很多类，比如:
<div class='class1 class2 class3'>
Lorem ipsum
</div>
将数据嵌入到dom中并使用jQuery的元数据。
所有好的插件都支持元数据插件(允许每个标签选项)。
它还允许无限复杂的数据/数据结构以及键值对。
<li class="someclass {'some': 'random,'json':'data'} anotherclass">...</li>
OR
<li class="someclass" data="{'some':'random', 'json': 'data'}">...</li>
OR
<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!');
我认为使用现有的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="foo"/>
<script type="text/javascript">
document.getElementById('foo').myProperty = 'W00 H00! I can add JS properties to DOM nodes without using custom attributes!';
</script>
