自定义属性-是还是不是?

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

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

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

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

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

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

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

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

63453 次浏览
小开

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

使用有意义的、相关的类名 例如，这样做:type='book'和type='cd'， 代表书籍和光盘。类更好地表示是. c。< / p >

例如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店，另一个是书店。

小开

在我看来，自定义属性不应该被使用，因为它们不具有有效性。除此之外，你可以为一个元素定义很多类，比如:

<div class='class1 class2 class3'>
Lorem ipsum
</div>
小开

将数据嵌入到dom中，并为jQuery使用元数据。

所有好的插件都支持元数据插件(允许每个标签选项)。

它还允许无限复杂的数据/数据结构以及键值对。

<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!');
小开

我认为使用现有的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>
小开

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

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

另外，考虑一下这个:

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

  • 如果它不需要人类可读，那么也许可以使用invisible HTML标签和文本进行编码。

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

小开
最佳答案

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

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

小开

创建一个ASP。NET TextBox控件，根据属性“DecimalSeparator”和“ThousandsSeparator”，使用JavaScript动态地将文本自动格式化为数字。


将这些属性从控件转移到JavaScript的一种方法是让控件呈现自定义属性:

<input type="text" id="" decimalseparator="." thousandsseparator="," />
自定义属性很容易被JavaScript访问。虽然使用自定义属性元素的页面不会验证，但该页面的呈现不会受到影响。


当我想将简单类型(如字符串和整数)与HTML元素相关联以便与JavaScript一起使用时，我只有使用这种方法。如果我想让HTML元素更容易识别，我将使用类和id属性
小开

这是我最近在用的一个技巧:

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


};


})();
小开

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

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

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

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

小开

我们已经创建了一个基于web的编辑器，它可以理解HTML的一个子集——一个非常严格的子集(几乎可以被邮件客户端普遍理解)。我们需要在数据库中表达像<td width="@INSWIDTH_42@">这样的东西，但我们不能在DOM中这样做，否则运行编辑器的浏览器会崩溃(或者比自定义属性更容易崩溃)。我们想要拖放，所以把它完全放在DOM中是不合适的，jquery的.data()也是如此(额外的数据没有被正确复制)。在.html()中，我们可能还需要额外的数据。最后，我们决定在编辑过程中使用<td width="1234" rs-width="@INSWIDTH_42@">，然后当我们将其全部POST时，我们删除width并执行正则表达式搜索-销毁s/rs-width=/width=/g。

起初，写这篇文章的人是这个问题上的验证纳粹，他尝试了所有方法来避免我们的自定义属性，但最后当没有其他方法可以满足我们所有的需求时，他默认了。当他意识到自定义属性永远不会出现在电子邮件中时，这对他有所帮助。我们确实考虑过在class中编码额外的数据，但最终决定这是两大祸害中更大的一个。

就我个人而言，我更喜欢要让事情干净，通过验证等，但作为一名公司员工，我必须记住，我的主要责任是推进公司的事业(尽可能快地赚到尽可能多的钱)，而不是我自私的技术纯洁性的愿望。工具应该为我们工作;我们不是为了他们。

小开

如果为页面指定模式，则可以创建任何属性。

例如:

Addthis

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:addthis="http://www.addthis.com/help/api-spec">
...
<a addthis:title="" addthis:url="" ...>

脸谱网(偶数标签)

<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"/>
小开

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

小开

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

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

自定义属性将生效。

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

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

<!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永远不会使用连字符标记。如果他们这样做了，只要您使用不常见的前缀，您就永远不会看到冲突。Eg.<johny-mytag>。

自定义属性

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


提交答案