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);
  }
});

ie应该$(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');
  }
});

function toggler在 DOM 准备好之前，您不会对 进行任何操作，所以为什么要在外部定义它呢。