Question

我的一位同事不喜欢将HTML类和id用于javascript / jQuery目的。因此我看到他创建了自定义html属性，如

<div id="myid" class="cssClasses ..." [some-purpose-id]="mycustomId">...</div>

我问他这是不是一个好主意，他回答说他认为类和Ids应该留作造型。

就个人而言，我会使用课程。有些类已用于样式化，而其他一些类则用于编程（jQuery选择器）。这个想法也是为了让事情变得更加贴心。当然，jQuery可以设置样式类，但如果可能的话，不要使用它们进行选择。当然我也在适当时使用id，但由于id在页面上是唯一的，我喜欢使用类来做通用的东西。

我想知道你对更好的方法的意见（如果有的话）。谢谢。

Answer 1

我建议不要这样做，而是使用HTML5数据属性。阅读它here。

Answer 2

不，在大多数情况下，你不应该使用虚构的属性。这些不是有效的HTML，如果您尝试验证代码，则会显示为错误。

但是，在HTML5中，您可以使用以data-开头的自定义属性。您可以在the html5doctor website上详细了解它们。但是，data-属性更常被提倡用于存储信息，而不是标签。例如对于您可能会说data-brand="gucci"的产品。或者其他什么。

使用样式设置或 javascript会产生误导，因为它不是二分法。通常，您需要添加id或类来设置标记样式。如果可能，您可以重用这些属性来在javascript中选择元素而无需添加属性。它可以保持代码清洁，但这显然只是一种偏好。

如果您需要选择一个尚未具有可用于选择的唯一ID或类的元素，则可以使用data属性。但是，使用ID和类仍然是标准做法。

Answer 3

您应该为javascript和CSS使用类和ID。你的同事错了。

有助于记住您希望在数据（html），演示文稿（css样式）和行为（javascript）之间保持分离。类和ID是有原因的，它不是造型（而不是javascript，也不是！）。它们允许您语义标记文档。

编写正确的HTML时，您的类和ID应反映这些节点包含的数据的实际内容和用途。然后，当您需要设置样式时，可以为.zip_code类指定正确的样式。当您需要特殊行为时，可以使用javascript将所需行为应用于.deletable列表项。

当然，有时在现实世界中，有些人会对事物产生非常强烈的反感，最终你不得不接受他们想要的东西。在这种情况下，您可能不得不与您的同事妥协并使用HTML5的data- *属性，正如其他人建议的那样。但是，虽然这是一个可以产生有效HTML的解决方案，但它不是为数据属性设计的，因此从技术上讲它不是正确的解决方案。

Answer 4

如果您想为多种目的提供属性内的其他数据，可能会很有用，请查看以下示例：

<script>
    function getIt(){
   ob = document.getElementById('myid') 
    alert(ob.getAttributeNode('anotherTitle').value)

    }
</script>
<div id="myid" class="cssClasses" anotherTitle="new Title">The div</div>
<a href="javascript:getIt()">Test</a>

我使用了anotherTitle属性来保存或存储另一组数据 - 它可以在另一种用法中使用。这是一个工作示例http://jsfiddle.net/vxknh/

参考：http://www.w3schools.com/jsref/prop_attr_value.asp

Answer 5

也许你的同事受到dojo toolkit中使用的声明式样式的例子的启发。

data-是为特定目的“标记”属性的好方法（例如，所有dojo特定属性的格式为data-dojo-whatever）。这样可以降低与其他脚本或css发生冲突的风险。

所以是的，它可能是一个好主意，但没有类和id不保留样式。

Answer 6

类和ID有它们的优点和缺点（它也非常依赖于你如何使用它们）。

课程 - 它们旨在传达样式信息，但随着jQuery的出现，它们现在具有双重目的，有时表示动作（或数据），有时还有样式。这在大型项目中尤其令人困惑。想象一下，设计师试图“重新分解”CSS并在javascript / jQuery连接到它的元素上更改这些类名 - 随之而来的是坏事。您可以使用像“.donttouchthis-jqueryclass”这样的“名称空间”为非样式类名称添加前缀，这将逻辑与表示区分开来是一种非常原始的方式。使用类的优点是它可以“堆叠”，因此它可以传达比ID更复杂的“逻辑”。从纯javascript（没有jQuery）的角度来看，依赖于代码中的类会引入一些向后兼容性问题（getElementsByClassName）。

ID - 顾名思义旨在唯一标识元素。从编程的角度来看，ID提供了访问DOM中元素的最快方式（getElementById）。它们也可以设置样式，但重新分解时删除ID的可能性较低（因为您可以随时删除ID样式并为其提供类）。 ID是唯一的，因此广泛使用它来存储任何复杂的数据是非常非常有限的。但是只要您只需要其中一个元素，就可以绑定点击处理程序或唯一标识DOM的块。

类和ID都有一个重要的规则限制了它们作为传达任何业务逻辑的方法的有用性 - 它们不能以数字开头（通常你只需要将数据库id方便地分配给一个元素））

自定义属性（不是数据） - 它们可以是任何有点酷的东西，但是如果您关心HTML的“有效性”，您将被限制为某些DTD类型，您将需要在DTD中指定它们。实际上，它们不会损害您的HTML，因为浏览器特别有义务（根据W3C惯例）忽略未知属性。唯一的问题是与潜在的未来发展的冲突。如果你使用的是纯JavaScript，那么使用它们也会有点痛苦（但这是一个主观选择 - 正如上面的一个答案中所建议的那样，这是一个很好的补充选项，可以将它们用作数据存储）。重新分解CSS时混合的可能性很小。

自定义数据属性 - 如果您使用jQuery，这些都很棒，因为您可以存储非常复杂的数据（对象等），如果使用正确，它们真的可以帮助它们并为您提供良好的词汇量描述DOM元素的功能。 “data-”命名空间很好地保护它免受任何未来与非名称间隔属性的冲突。

说完所有最好的解决方案不是过分依赖任何这些，而是实现javascript模式，允许你传递父DOM元素，然后基于标记应用功能（如标准的jQuery插件模式）。这样就可以删除对静态HTML源代码中特定属性/类/ ID的大量依赖。

为JavaScript目的使用自定义HTML属性？

6 个答案: