如何优化此 jQuery 代码以提高效率？答案

【问题标题】：How can I optimise this jQuery code to be more efficient?如何优化此 jQuery 代码以提高效率？
【发布时间】：2020-04-05 14:06:17
【问题描述】：

我有一个 Bootstrap 4 导航栏。我希望它切换类（从“navbar-dark”到“navbar-light”），还添加带有额外样式的“top-nav-collapse”类以补充导航栏的轻量版。此行为应在滚动和单击时触发。

以下代码有效，但编写效率不高。请帮我优化一下！

// Switch the navbar on scroll
$(window).scroll(function() {
  if ($('.navbar').offset().top > 50) {
    $('.fixed-top').addClass('top-nav-collapse navbar-light').removeClass('navbar-dark');
    $('.navbar-brand img').attr('src', '/assets/images/logo.png');
  } else {
    $('.fixed-top').removeClass('top-nav-collapse navbar-light').addClass('navbar-dark');
    $('.navbar-brand img').attr('src', '/assets/images/logo-diap.png');
  }
});

// Switch the navbar on click
$('.navbar-toggler:visible').click(function() {
  if($('.navbar-collapse:visible').length) {
    $('.fixed-top').removeClass('top-nav-collapse navbar-light').addClass('navbar-dark');
    $('.navbar-brand img').attr('src', '/assets/images/logo-diap.png');
  } else {
    $('.fixed-top').addClass('top-nav-collapse navbar-light').removeClass('navbar-dark');
    $('.navbar-brand img').attr('src', '/assets/images/logo.png');
  }
});

提前非常感谢您！ ??????????

【问题讨论】：

标签： jquery css twitter-bootstrap

【解决方案1】：

至少有两种可能的方法，假设您的意思是避免重复代码以“更高效”：

添加 2 个新函数，因为相同的 2 行代码重复了两次，所以每组可能有一个函数：（根据您的喜好随意重命名任何建议）

// Switch the navbar on scroll
$(window).scroll(function() {
  if ($('.navbar').offset().top > 50) {
    showLogo();
  } else {
    showOtherLogo();
  }
});

// Switch the navbar on click
$('.navbar-toggler:visible').click(function() {
  if($('.navbar-collapse:visible').length) {
    showOtherLogo();
  } else {
    showLogo();
  }
});

function showLogo() {
    $('.fixed-top').addClass('top-nav-collapse navbar-light').removeClass('navbar-dark');
    $('.navbar-brand img').attr('src', '/assets/images/logo.png');
}

function showOtherLogo() {
    $('.fixed-top').removeClass('top-nav-collapse navbar-light').addClass('navbar-dark');
    $('.navbar-brand img').attr('src', '/assets/images/logo-diap.png');
}

=====

或者可能添加一个与 if/else 具有相同处理的函数，并传递一个参数以使使用有所不同。

// Switch the navbar on scroll
$(window).scroll(function() {
  if ($('.navbar').offset().top > 50) {
    toggleLogo(true);
  } else {
    toggleLogo(false);
  }
});

// Switch the navbar on click
$('.navbar-toggler:visible').click(function() {
  if($('.navbar-collapse:visible').length) {
    toggleLogo(false);
  } else {
    toggleLogo(true);
  }
});

function toggleLogo(mainLogo) {
    if (mainLogo)
      $('.fixed-top').addClass('top-nav-collapse navbar-light').removeClass('navbar-dark');
      $('.navbar-brand img').attr('src', '/assets/images/logo.png');
    } else {
      $('.fixed-top').removeClass('top-nav-collapse navbar-light').addClass('navbar-dark');
      $('.navbar-brand img').attr('src', '/assets/images/logo-diap.png');
    }
}

无论哪种方式，都可能是偏好问题。

【讨论】：