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

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

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

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

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

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

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

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


当前回答

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

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

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

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

其他回答

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

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

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

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

与自定义属性不生效的答案相反:

自定义属性将生效。

自定义标记也是如此,只要自定义标记是小写的并带有连字符。

在任何验证器中尝试此操作。它会生效。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Custom Test</title>
    </head>
    <body>
        <dog-cat PIANO="yellow">test</dog-cat>
    </body>
</html>

一些验证器:

https://appdevtools.com/html-validator

https://www.freeformatter.com/html-validator.html

https://validator.w3.org/nu/

问题是:安全吗?它稍后会破裂吗?

自定义标记

不存在连字符标记。我相信W3C永远不会使用连字符标记。如果他们这样做了,只要您使用不常见的前缀,您就永远不会看到冲突。如:< johny-mytag >。

自定义属性

有连字符的HTML属性。但是HTML规范承诺永远不会使用以data-开头的属性。因此data-myattrib是安全的。但是,我相信W3C永远不会引入任何以johny-开头的属性。只要您的前缀是不寻常的,您就永远不会看到冲突。

避免使用自定义属性的最简单方法是使用现有属性。

使用有意义的、相关的类名。 例如,执行如下命令: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店,另一个是书店。

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

我一直使用自定义字段,例如<a I ="" ....然后用jquery引用i。无效的html,是的。它工作得很好,是的。