javascript - Class vs data- vs Custom attribute - Stack Overflow

admin管理员组

文章数量:1417708

I've built a custom select box out of divs and I'm wiring in the functionality. Originally I was using classes and jquery dom traversal to connect everything. But then I got thinking about if that was the best approach since I'm mixing functionality and styling.

Next I looked at HTML 5's data-[something] attribute but it doesn't feel right to me since my code ends up cluttered with a lot of data attributes that have no data but are just markers for dom traversal. I am also worried about JQuery performance since multiple articles on stack said attribute queries are slower, but the articles were years out of date.

So finally I was considering custom attributes, they feel cleaner then data- since their is no implication that they should hold data. But they suffer from the same performance concerns (possibly worst since their not pliant/JQuery supported). They are also non standards pliant.

On a side note, I know angular uses custom attributes but their not involved in dom traversal (that I know of) so no performance hit, and I feel like they have a much better argument for needing them then a simple widget does.

My questions are:

• Is performance with attributes instead of classes still an issue?
• Is it just bad practices to use fully customized attributes?
• Is it bad practice to use data-[something] when your not actually holding data?
• Which approach would you remend and why?

Code with both classes and data- attributes that do the same functional things as well as style in the case of classes.

<div class="ns-dropdown-zoom ns-toolbar-item " data-cns-type="cns-dropdown">
  <div class="cns-dropdown-top">
    <input type="text" class="cns-dropdown-selection-visible" value="75%" data-cns-dropdown-sel-visible />
    <div class="cns-dropdown-arrow">
    </div>
    <!-- once we wire up the javascript the true selected value goes here -->
    <input class="cns-dropdown-selection-hidden" type="hidden" data-cns-dropdown-sel-hidden/>
  </div>
  <div class="cns-dropdown-option-list" data-cns-dropdown-opt-list>
    <div class="cns-dropdown-option" data-cns-dropdown-opt>
      <span class="cns-dropdown-option-value" data-cns-dropdown-opt-value>10%</span>
      <div class="cns-dropdown-option-display" data-cns-dropdown-opt-display>10%</div>
    </div>
  </div>
</div>

Start of the javascript to give you an idea of how I am traversing the dom

var initDropDowns = function () {
// Init function for dropdowns
var dropDowns = $("s-drop");
var html = $("html");

html.click(function (event) {
  dropDowns.each(function (index, el) {
    var optionList = $(el).find("s-drop-option-list").get(0);
    var selVisible = $(el).find("s-drop-selection-visible");
    var selHidden = $(el).find("s-drop-selection-hidden");
    var target = event.target;
    var options;
    var opt;
    var i, iMax;

  // Clicking outside the element
  if (!$.contains(el, target)) {
    $(el).removeClass("cns-drop-expand");
  // Clicking inside the element, inclusive
  } else {

I've built a custom select box out of divs and I'm wiring in the functionality. Originally I was using classes and jquery dom traversal to connect everything. But then I got thinking about if that was the best approach since I'm mixing functionality and styling.

Next I looked at HTML 5's data-[something] attribute but it doesn't feel right to me since my code ends up cluttered with a lot of data attributes that have no data but are just markers for dom traversal. I am also worried about JQuery performance since multiple articles on stack said attribute queries are slower, but the articles were years out of date.

So finally I was considering custom attributes, they feel cleaner then data- since their is no implication that they should hold data. But they suffer from the same performance concerns (possibly worst since their not pliant/JQuery supported). They are also non standards pliant.

On a side note, I know angular uses custom attributes but their not involved in dom traversal (that I know of) so no performance hit, and I feel like they have a much better argument for needing them then a simple widget does.

My questions are:

• Is performance with attributes instead of classes still an issue?
• Is it just bad practices to use fully customized attributes?
• Is it bad practice to use data-[something] when your not actually holding data?
• Which approach would you remend and why?

Code with both classes and data- attributes that do the same functional things as well as style in the case of classes.

<div class="ns-dropdown-zoom ns-toolbar-item " data-cns-type="cns-dropdown">
  <div class="cns-dropdown-top">
    <input type="text" class="cns-dropdown-selection-visible" value="75%" data-cns-dropdown-sel-visible />
    <div class="cns-dropdown-arrow">
    </div>
    <!-- once we wire up the javascript the true selected value goes here -->
    <input class="cns-dropdown-selection-hidden" type="hidden" data-cns-dropdown-sel-hidden/>
  </div>
  <div class="cns-dropdown-option-list" data-cns-dropdown-opt-list>
    <div class="cns-dropdown-option" data-cns-dropdown-opt>
      <span class="cns-dropdown-option-value" data-cns-dropdown-opt-value>10%</span>
      <div class="cns-dropdown-option-display" data-cns-dropdown-opt-display>10%</div>
    </div>
  </div>
</div>

Start of the javascript to give you an idea of how I am traversing the dom

var initDropDowns = function () {
// Init function for dropdowns
var dropDowns = $(".cns-drop");
var html = $("html");

html.click(function (event) {
  dropDowns.each(function (index, el) {
    var optionList = $(el).find(".cns-drop-option-list").get(0);
    var selVisible = $(el).find(".cns-drop-selection-visible");
    var selHidden = $(el).find(".cns-drop-selection-hidden");
    var target = event.target;
    var options;
    var opt;
    var i, iMax;

  // Clicking outside the element
  if (!$.contains(el, target)) {
    $(el).removeClass("cns-drop-expand");
  // Clicking inside the element, inclusive
  } else {

• javascript
• jquery
• html

Share Improve this question Follow edited May 6, 2015 at 23:12 Blue asked May 6, 2015 at 22:43 BlueBlue 46355 silver badges1919 bronze badges 4

• Not really sure what your performance concerns are.. once the initial main element(s) are located and cached to variable the rest is a pretty isolated part of the DOM tree. The other issues are going to be opinion/preference based as far as best practices. – charlietfl Commented May 6, 2015 at 23:05
• It's more of a general question but in part my concern is that to start with I'm actually listening on the entire dom and then figuring out which select box I'm working with. I'll add in some of the javascript so it is more clear. – Blue Commented May 6, 2015 at 23:07
• 2 one note..if you see yourself writing $(el) more than once, cache that as a variable var $el =$(el) ..$el.doSomething()...$el.anotherThing() – charlietfl Commented May 6, 2015 at 23:17
• Missed the caching, thanks. – Blue Commented May 7, 2015 at 0:18

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

Is performance with attributes instead of classes still an issue?

• Querying by attributes is still more expensive than querying by id, but whether this is a problem or not depends on your expectations on performance, or how often you are querying. I don't think you would note the difference on most of the cases. You can check it out on this jsperf.

Is it just bad practices to use fully customized attributes?

• Yes. It is not valid syntax as per version 5 of HTML. From Angularjs docs:

Best Practice: Prefer using the dash-delimited format (e.g. ng-bind for ngBind). If you want to use an HTML validating tool, you can instead use the data-prefixed version (e.g. data-ng-bind for ngBind).

Is it bad practice to use data-[something] when your not actually holding data?

• Even a simple boolean is still considered data, so I don't see anything wrong with say data-is-whatever='true'

Which approach would you remend and why?

• If performance is not a major factor, I would go for data attributes, because you can separate behavior declaration from styling, and make your code more readable / easier to maintain.

本文标签： javascriptClass vs data vs Custom attributeStack Overflow