2

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

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

我问他这是否真的是个好主意，他回答说他认为应该为样式保留类和 Id。

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

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

4

6 回答 6

2

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

于 2012-12-12T22:51:40.583 回答
1

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

但是在 HTML5 中，您可以使用以 . 开头的自定义属性data-。您可以在 html5doctor 网站上阅读有关它们的更多信息。data-然而，属性更常被提倡用于存储信息，而不是标签。例如，对于您可能会说的产品data-brand="gucci"。或者其他的东西。

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

如果您需要选择一个还没有可用于选择的唯一 id 或类的元素，您可以使用 data 属性。然而，使用 ids 和 classes 仍然是标准做法。

于 2012-12-12T23:01:32.790 回答
1

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

它有助于记住您希望保持数据 (html)、表示 (css 样式) 和行为 (javascript) 之间的分离。类和 ID 的存在是有原因的，它不是用于样式（也不是用于 javascript！）。它们可以让您对文档进行语义标记。

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

当然，有时在现实世界中，有些人对事物有强烈的反感，你最终不得不顺其自然。在这种情况下，您可能不得不与您的同事妥协并使用 HTML5 的 data-* 属性，正如其他人所建议的那样。然而，虽然这是一个会产生有效 HTML 的解决方案，但它不是 data-* 属性的设计目的，因此它在技术上不是正确的解决方案。

于 2012-12-12T23:10:51.243 回答
0

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

<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

于 2012-12-12T23:05:24.137 回答
0

也许您的同事受到dojo 工具包中使用的声明式风格示例的启发。

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

所以是的，这可能是一个好主意，但没有任何类和 ID 不是为样式保留的。

于 2012-12-12T23:45:13.973 回答
0

类和 ID 各有优缺点（这也很大程度上取决于您如何使用它们）。

课程- 它们旨在传达样式信息，但随着 jQuery 的出现，它们现在具有双重用途，有时表示动作（或数据），有时表示样式。这非常令人困惑，尤其是在大型项目中。想象一下，一个设计师试图“重构”CSS，并在连接了 javascript/jQuery 的元素上更改这些类名——坏事接踵而至。您可以使用“.donttouchthis-jqueryclass”之类的“名称空间”来减轻为非样式类名称添加前缀的情况，这将逻辑与表示区分开来是一种非常原始的方式。使用类的优点是它可以“堆叠”，因此它可以传达比 ID 更复杂的“逻辑”。

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 的大量依赖。

于 2012-12-13T00:48:32.860 回答