Как я могу оптимизировать этот jQuery код, чтобы быть более эффективным?

Question

У меня есть Bootstrap 4 navbar. Я хочу, чтобы он переключал классы (с «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');
  }
});

Большое спасибо заранее! ??

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

=====

Или, возможно, добавьте одну функцию, которая имеет такую ​​же обработку, как и если / 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');
    }
}

В любом случае, скорее всего, вопрос предпочтения.