javascript - 类 vs 数据- vs 自定义属性

Question

我用 div 构建了一个自定义选择框，并且我正在连接功能。最初我是使用类和 jquery dom 遍历来连接所有东西。但后来我开始考虑这是否是最好的方法，因为我正在混合功能和样式。

接下来我查看了 HTML 5 的 data-[something] 属性，但我觉得它不合适，因为我的代码最终被大量没有数据但只是 dom 遍历标记的数据属性弄得乱七八糟。我也担心 JQuery 的性能，因为堆栈上的多篇文章都说属性查询速度较慢，但​​这些文章已经过时多年了。

所以最后我在考虑自定义属性，它们感觉比数据更干净——因为它们并不意味着它们应该保存数据。但是他们遭受同样的性能问题(可能是最糟糕的，因为他们不兼容/不支持 JQuery)。它们也不符合标准。

旁注，我知道 angular 使用自定义属性，但它们不涉及 dom 遍历(据我所知)，因此不会影响性能，而且我觉得他们有更好的理由需要它们，然后一个简单的小部件就可以了.

我的问题是:

• 属性而不是类的性能仍然是一个问题吗？
• 使用完全自定义的属性只是不好的做法吗？
• 当您实际上不持有数据时使用数据-[某物]是否是一种不好的做法？
• 您会推荐哪种方法，为什么？

同时包含类和数据属性的代码，它们在类的情况下执行相同的功能和样式。

<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>

javascript 的开始让你了解我是如何遍历 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 {

Answer 1

属性而不是类的性能仍然是一个问题吗？

• 按属性查询仍然比按 ID 查询更昂贵，但这是否是一个问题取决于您对性能的期望，或者您查询的频率。我认为您不会注意到大多数情况下的差异。你可以在这个jsperf上查看.

使用完全自定义的属性只是不好的做法吗？

• 是的。根据 HTML 版本 5，它不是有效语法。来自 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).

当您实际上没有保存数据时使用数据-[某物]是否是一种不好的做法？

• 即使是一个简单的 bool 值也仍然被视为数据，所以我认为 data-is-whatever='true'
没有任何问题

您会推荐哪种方法，为什么？

• 如果性能不是主要因素，我会选择数据属性，因为您可以将行为声明与样式分开，并使您的代码更具可读性/更易于维护。