最近我读到越来越多关于人们在HTML标记中使用自定义属性的文章,主要是为了在javascript代码中嵌入一些额外的数据。

我希望收集一些关于使用自定义属性是否是一种好的实践的反馈,以及有哪些替代方案。

它似乎真的可以简化服务器端和客户端代码,但它也不符合W3C标准。

我们是否应该在web应用中使用自定义HTML属性?为什么或者为什么不呢?

对于那些认为自定义属性是一件好事的人来说:在使用它们时要记住哪些事情?

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

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

更新2:似乎HTML 5数据属性特性在这里有很多支持(我倾向于同意,它看起来是一个可靠的选项)。到目前为止,我还没有看到对这个建议的反驳。使用这种方法有什么问题/陷阱需要担心吗?或者仅仅是对当前W3C规范的“无害”的无效?


当前回答

HTML 5显式地允许以数据开头的自定义属性。例如,<p data-date-changed=" 1月24日下午5:23。">Hello</p>有效。因为它得到了标准的正式支持,所以我认为这是自定义属性的最佳选择。而且它不需要你用黑客来重载其他属性,所以你的HTML可以保持语义。

来源:http://www.w3.org/TR/html5/dom.html embedding-custom-non-visible-data-with-the-data - *属性

其他回答

我没有使用自定义属性,因为我输出的是XHTML,因为我希望数据能够被第三方软件机器读懂(不过,如果我愿意,我也可以扩展XHTML模式)。

作为自定义属性的替代品,我发现id和class属性(例如,在其他答案中提到的)足够了。

另外,考虑一下这个:

如果额外的数据既能被人读又能被机器读,那么就需要使用(可见的)HTML标记和文本进行编码,而不是作为自定义属性。 如果它不需要人类可读,那么也许可以使用不可见的HTML标记和文本进行编码。

有些人例外:他们允许自定义属性,在运行时通过Javascript在客户端添加到DOM中。他们认为这是可以的:因为自定义属性只在运行时添加到DOM, HTML不包含自定义属性。

不。试试这样做:

<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>

HTML 5显式地允许以数据开头的自定义属性。例如,<p data-date-changed=" 1月24日下午5:23。">Hello</p>有效。因为它得到了标准的正式支持,所以我认为这是自定义属性的最佳选择。而且它不需要你用黑客来重载其他属性,所以你的HTML可以保持语义。

来源:http://www.w3.org/TR/html5/dom.html embedding-custom-non-visible-data-with-the-data - *属性

我知道有人反对,但我想到了一个超短的解决方案。如果你想使用一个自定义属性“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;
});

对于复杂的web应用程序,我将自定义属性放在所有地方。

对于更多面向公众的页面,我使用“rel”属性,并将我所有的数据转储为JSON,然后用MooTools或jQuery解码:

<a rel="{color:red, awesome:true, food: tacos}">blah</a>

我试图坚持HTML 5数据属性最近只是“准备”,但它还没有自然地到来。