习惯属性-是的还是不是的？
最近，我看到越来越多的人在HTML标记中使用自定义属性，主要是为了嵌入一些额外的数据，以便在javascript代码中使用。
我希望收集一些反馈，了解使用自定义属性是否是一种良好的实践，以及一些替代方法是什么。
看起来它确实可以简化服务器端和客户端代码，但它也不符合W3C。
我们应该在我们的web应用中使用自定义HTML属性吗？为什么或者为什么不？
对于那些认为自定义属性是一件好事的人来说:在使用这些属性时，需要记住的是什么？
对于那些认为自定义属性是坏事的人来说:你用什么替代方法来完成类似的事情？
更新：--我最感兴趣的是各种方法背后的推理，以及为什么一种方法比另一种方法更好的原因。我想我们都能想出4-5种不同的方法来完成同样的事情。(隐藏元素、内联脚本、额外的类、从ids解析信息等)。
更新2:似乎HTML5 data-属性特性在这里有很多支持(我倾向于同意，它看起来是一个可靠的选项)。到目前为止，我还没有看到对这一建议的反驳。是否有任何问题/陷阱需要担心使用这种方法？还是仅仅是对当前W3C规范的“无害”失效？
回答 15
Stack Overflow用户
发布于 2009-06-14 06:32:56
HTML5显式地允许以data开头的自定义属性。因此，例如，<p data-date-changed="Jan 24 5:23 p.m.">Hello</p>是有效的。由于它得到了标准的正式支持，我认为这是定制属性的最佳选择。而且它也不要求你用黑客过载其他属性，这样你的HTML就可以保持语义。
来源：-attributes
Stack Overflow用户
发布于 2009-06-14 08:50:22
下面是我最近使用的一种技巧：
<div id="someelement">
<!-- {
someRandomData: {a:1,b:2},
someString: "Foo"
} -->
<div>... other regular content...</div>
</div>注释对象与父元素(即#AHO某某元素)联系在一起。
下面是解析器：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;
};
})();Stack Overflow用户
发布于 2010-07-22 02:36:51
如果为页指定架构，则可以创建任何属性。
例如：
加注
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:addthis="http://www.addthis.com/help/api-spec">
...
<a addthis:title="" addthis:url="" ...>Facebook (偶数标签)
<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"/>https://stackoverflow.com/questions/992115
复制相似问题
腾讯云开发者
