最近我读到越来越多关于人们在HTML标记中使用自定义属性的文章,主要是为了在javascript代码中嵌入一些额外的数据。
我希望收集一些关于使用自定义属性是否是一种好的实践的反馈,以及有哪些替代方案。
它似乎真的可以简化服务器端和客户端代码,但它也不符合W3C标准。
我们是否应该在web应用中使用自定义HTML属性?为什么或者为什么不呢?
对于那些认为自定义属性是一件好事的人来说:在使用它们时要记住哪些事情?
对于那些认为自定义属性是坏事的人:您使用什么替代方法来完成类似的事情?
更新:我最感兴趣的是各种方法背后的原因,以及为什么一种方法比另一种方法更好。我认为我们都可以想出4-5种不同的方法来完成同样的事情。(隐藏元素,内联脚本,额外的类,从id解析信息,等等)。
更新2:似乎HTML 5数据属性特性在这里有很多支持(我倾向于同意,它看起来是一个可靠的选项)。到目前为止,我还没有看到对这个建议的反驳。使用这种方法有什么问题/陷阱需要担心吗?或者仅仅是对当前W3C规范的“无害”的无效?
这是我最近在用的一个技巧:
<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;
};
})();
与自定义属性不生效的答案相反:
自定义属性将生效。
自定义标记也是如此,只要自定义标记是小写的并带有连字符。
在任何验证器中尝试此操作。它会生效。
<!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-开头的属性。只要您的前缀是不寻常的,您就永远不会看到冲突。