为JavaScript目的使用自定义HTML属性？ [英] Using custom HTML attributes for JavaScript purposes?

问题描述

我的一个同事不喜欢为javascript / jQuery目的使用HTML类和id。因此，我已经看到他已经创建了自定义html属性，比如

 < div id =myidclass =cssClasses ...[some-purpose-id] =mycustomId> ...< / div> 
  

我问他是否真的是个好主意，他回答说他认为类和ID应该留作造型。

就我个人而言，我会使用类。有些类会被用于样式，而其他一些类将用于编程（jQuery选择器）。这个想法是保持东西也适用。当然，jQuery可以设置样式类，但如果可能的话，不要使用它们进行选择。当然，我也会在适当的时候使用id，但是因为id在页面上是唯一的，所以我喜欢使用类来进行通用的处理。

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

解决方案

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

它有助于记住您希望保持数据（html），演示文稿（css样式）和行为（javascript）之间的分隔。类和ID是有原因的，它不适用于样式（也不适用于JavaScript）。他们在那里允许你在语义上标记你的文档。

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

当然，有时在现实世界中，有些人对事物感到非常强烈，并且最终不得不按照自己的意愿行事。在这种情况下，您可能必须妥协与您的同事，并使用HTML5的data- *属性，如其他人所建议的。然而，尽管这是一种能够生成有效HTML的解决方案，但并不是数据属性设计的目的，所以它在技术上不是正确的解决方案。

One of my colleagues doesn't like to use HTML classes and ids for javascript/jQuery purpose. Therefore I've seen that he had created custom html attribute such as

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

I asked him if it was really a good idea and he replied that he considers that classes and Ids should be reserved for styling.

Personally, I would have used classes. Some classes would have been used for styling, and some other classes would have been used for programming (jQuery selectors). The idea is to keep things appart also. And of course jQuery could set styling classes but if possible not use them for selection. Of course I also use id when appropriate but since an id is unique on a page, I like to do generic stuff using classes.

I would like to know you opinions on the better approach (if there is one). Thank you.

解决方案

You should use classes and IDs for both javascript and CSS. Your colleague is wrong.

It helps to remember that you want to keep separation between data (html), presentation (css styling), and behavior (javascript). Classes and IDs are there for a reason, and it's not for styling (and not for javascript, either!). They are there to allow you to semantically mark up your document.

When writing proper HTML, your classes and IDs should reflect the actual content and purpose of the data those nodes contain. Then, when you need to style them, you can specify the proper styling for, say the .zip_code class. And when you need special behavior, you can use javascript to apply the required behavior to your .deletable list items.

Of course, sometimes in the real world, there are people who feel very strongly against things, and you end up having to go along with what they want. In this case, you may have to compromise with your colleague and use HTML5's data-* attributes, as someone else suggested. However, while this is a solution that will result in valid HTML, it is not what data-* attributes were designed for, so it isn't technically the correct solution.

这篇关于为JavaScript目的使用自定义HTML属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！