自定义属性-是或否？

JavaScript HTML

LGil

2020-04-07

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

我希望就使用自定义属性是否是一种好习惯以及一些替代方法收集一些反馈。

现在看来似乎真的可以简化既服务器端和客户端的代码，但它也不是W3C标准。

我们是否应该在Web应用程序中使用自定义HTML属性？为什么或者为什么不？

对于那些认为自定义属性是一件好事的人：使用它们时要记住哪些注意事项？

对于那些认为自定义属性是一件坏事的人：您使用什么替代方法来完成类似的任务？

更新： 我最感兴趣的是各种方法背后的原因，以及为什么一种方法优于另一种方法的要点。我认为我们所有人都可以提出4-5种不同的方法来完成同一件事。（隐藏的元素，内联脚本，额外的类，从id解析信息等）。

Update 2: It seems that the HTML 5 data- attribute feature has a lot of support here (and I tend to agree, it looks like a solid option). So far I haven't seen much in the way of rebuttals for this suggestion. Are there any issues/pitfalls to worry about using this approach? Or is it simply a 'harmless' invalidation of the current W3C specs?

第4076篇《自定义属性-是或否？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共9个回答
Gil 2020.04.07

对于复杂的Web应用程序，我会在各处放置自定义属性。

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

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

我最近尝试使用HTML 5数据属性只是为了“准备”，但是还不是很自然。

番长樱梅 2020.04.07

我一直使用自定义字段，例如<ai =“”...。然后使用jquery引用i。无效的html，是的。效果很好，是的。

小宇宙路易 2020.04.07

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


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

<input type="text" id="" decimalseparator="." thousandsseparator="," />

JavaScript可轻松访问自定义属性。而且，使用带有自定义属性的元素的页面将无法通过验证，该页面的呈现不会受到影响。


我只当我想简单的类型，如字符串和整数到HTML元素的JavaScript使用关联使用这种方法。如果我想使HTML元素更易于识别，我将使用class和id属性。

Itachi 2020.04.07

我没有使用自定义属性，因为我正在输出XHTML，因为我希望数据能够被第三方软件机器可读（尽管我可以扩展XHTML架构）。

作为自定义属性的替代方法，大多数情况下，我发现id和class属性（例如，在其他答案中提到的）已足够。

另外，请考虑以下事项：

  • 如果额外的数据既要人工可读又要机器可读，则需要使用（可见）HTML标记和文本（而不是自定义属性）对其进行编码。

  • 如果不需要人类可读，则可以使用不可见的 HTML标签和文本对其进行编码。

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

小胖Gil 2020.04.07

我知道人们对此表示反对，但是我为此提出了一个超短的解决方案。如果要使用“ 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;
});
飞云 2020.04.07

我们已经制作了一个基于Web的编辑器，它可以理解HTML的一个子集-一个非常严格的子集（邮件客户端几乎可以普遍理解）。我们需要像<td width="@INSWIDTH_42@">在数据库中那样表达事物，但是我们不能在DOM中表达它，否则运行编辑器的浏览器会表现得怪异（或者比怪异于自定义属性的怪怪更多） 。我们想要拖放，因此完全像jQuery一样放到了DOM中.data()（多余的数据没有被正确复制）。我们可能还需要额外的数据才能乘车.html()。最后，我们决定在<td width="1234" rs-width="@INSWIDTH_42@">编辑过程中使用，然后在发布所有内容时删除width并执行regex search-and-destroy s/rs-width=/width=/g。

起初，写这篇文章最多的人就是这个问题上的验证纳粹，并尽一切努力避免使用我们的自定义属性，但最后默认时，似乎没有其他事情可以满足我们的所有要求。当他意识到自定义属性将永远不会出现在电子邮件中时class，这很有帮助。我们确实考虑过在中编码额外的数据，但认为这是两个弊端中的较大者。

就我个人而言，我更喜欢使事情整洁并通过验证人等，但作为公司员工，我必须记住我的主要职责是促进公司事业（尽快赚钱），而不是我的自我要求。技术纯度。工具应该对我们有用；不是我们为他们。

Davaid神无 2020.04.07

我认为在不破坏任何东西或扩展名称空间的情况下使用现有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的技术。

JinJin 2020.04.07

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

例如：

添加此

<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"/>
西里Near 2020.04.07

HTML 5明确允许以开头的自定义属性data。因此，例如，<p data-date-changed="Jan 24 5:23 p.m.">Hello</p>有效。由于它已由标准正式支持，因此我认为这是自定义属性的最佳选择。并且不需要您通过hack重载其他属性，因此HTML可以保持语义。

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android