javascript - JS/jQuery - 最好在 $(document).ready 或调用的函数中运行事件处理程序

Question

*注意:以下问题并不是要征求人们的意见，而是根据网页、jQuery 等的最佳处理速度提出的。

我目前的代码遵循以下“测试”代码格式:

$(document).ready(function() {
  $('.my-class').on('click') {
    if ($('.my-class').hasClass('active') {
      $('.my-class').removeClass('active');
      return;
    }
    $('.my-class').addClass('active');
  }
});

我的问题是:事件处理程序(不是事件监听器)是否应该与 $(document).ready(); 具有相同的代码结构？或者它应该看起来像这样:

function toggler(obj) {    
  if ($(obj).hasClass('active') {
    $(obj).removeClass('active');
    return;
  }
  $(obj).addClass('active');
}

$(document).ready(function() {
  $('.my-class').on('click') {
    toggler(this);
  }
});

即应该 $(document).ready(); 只有引用处理程序的监听器，或者整个操作(监听和处理)应该在 $(document).ready(); 中

这样做的正确方法是什么，以便最大限度地发挥 jQuery、JS 等的可用性/功能

Answer 1

我会选择第一段代码:

$(document).ready(function() {
  $('.my-class').on('click') {
    if ($('.my-class').hasClass('active') {
      $('.my-class').removeClass('active');
      return;
    }
    $('.my-class').addClass('active');
  }
});

在 DOM 准备好之前，您没有对 function toggler 做任何事情，所以为什么要在外部定义它。