Question

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

接下来我查看了HTML 5的数据[[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：

最佳实践：首选使用划线分隔格式（例如ng-bind 对于ngBind）。如果您想使用HTML验证工具，则可以而是使用数据前缀版本（例如ngBind的data-ng-bind）。

当你没有真正持有数据时使用数据 - [某事]是不好的做法？

即使是一个简单的布尔值仍然被视为数据，所以我没有看到说data-is-whatever='true'

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

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

Class vs data- vs Custom属性

1 个答案: