Question

更正确，性能更好：我有一个容器，里面有元素。根据点击的按钮，我需要显示/隐藏元素。示例：

<div id="panel">
   <button id="toggle-edit">Edit</button>
   <div class="form-group">
       <input type="text">
   </div>
   <div class="form-group">
       <input type="text">
   </div>
   <div class="form-group">
       <input type="text">
   </div>
</div>

现在，更好的是：
1）使用一个类和一些CSS规则：

#panel .form-group {display: none}
#panel.show-inputs .form-group {display: block}

一个简单的JS：

$("#toggle-edit").click(function() {
   $("#panel").toggleClass("show-inputs") 
});

2）使用普通JS，没有css类：

$("#toggle-edit").click(function(){
   $("#panel .form-group").toggle();
   // I might want toggle this.value = "Cancel"/"Edit" as well
});

在父元素上使用CSS类来影响子元素可见性在技术上是否合适？

Answer 1

在这里，我构建了一个工具，用于对两种方法的执行时间进行基准测试。

调用两种方法250次并测量毫秒数。

在我的测试中......

类切换 7 to 10 milliseconds运行250次

jQuery切换 88 to 110 milliseconds运行250次

随意在下面的片段中运行它们;）

toggleClass = function() {
  $("#panel").toggleClass("show-inputs")
};
$("#toggle-class").click(toggleClass);

jQueryToggle = function() {
  $("#panel-jquery .form-group").toggle();
};

$("#toggle-hide").click(jQueryToggle);

// Demo first run
benchmark('start');
benchmark();

function benchmark(start) {
  var d = new Date();
  var ms = 1000 * 60 * d.getMinutes() + 1000 * d.getSeconds() + d.getMilliseconds();
  if (start) {
    this.initTime = ms
  } else {
    var timeTaken = ms - this.initTime;
    delete this.initTime;
    return timeTaken;
  }
}

function bench250() {
  var classTime, jqToggleTime;
  benchmark('start');
  for (var i = 0; i < 250; i++) {
    toggleClass();
  }
  classTime = benchmark()

  benchmark('start');
  for (var i = 0; i < 250; i++) {
    jQueryToggle();
  }
  jqToggleTime = benchmark()
  $(".results").append('<tr><th>' + classTime + '</th><th>' + jqToggleTime + '</th></tr>');
}


$(".test250").click(bench250);

#panel .form-group {
  display: none
}
#panel.show-inputs .form-group {
  display: block
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table class='results' width='100%'>
  <tr>
    <td><h2>Test results</h2></td>
    <td><button class='test250'>Test 250 times</button></td>
  </tr>
  <tr>
    <th>Class Toggle</th>
    <th>jQuery Toggle</th>
  </tr>
</table>

<div id="panel">
  <h2>Toggle class</h2>
  <button id="toggle-class">Toggle Class</button>
  <div class="form-group">
    <input type="text">
  </div>
  <div class="form-group">
    <input type="text">
  </div>
  <div class="form-group">
    <input type="text">
  </div>
</div>

<div id="panel-jquery">
  <h2>jQuery Toggle</h2>
  <button id="toggle-hide">jQuery toggle()</button>
  <div class="form-group">
    <input type="text">
  </div>
  <div class="form-group">
    <input type="text">
  </div>
  <div class="form-group">
    <input type="text">
  </div>
</div>

Answer 2

我认为这不是关于绩效，而是关于reusability of code

因此，使用class将帮助您重用代码。

javascript使用类隐藏切换，还是直接隐藏？

2 个答案: