Как правильно продублировать код javascript

Question

Хочу разместить на страницах два независимых sidebar которые имеют такой код:

var toggleBtn = document.querySelector('.sidebar-toggle');
var sidebar = document.querySelector('.sidebar');

toggleBtn.addEventListener('click', function() {
  toggleBtn.classList.toggle('is-closed');
  sidebar.classList.toggle('is-closed');
})

Я сделала правки css и html чтобы они не повторялись. Для другого sidebar отредактировала javascript так:

var toggleBtn = document.querySelector('.support-author-toggle');
var sidebar = document.querySelector('.support-author');

toggleBtn.addEventListener('click', function() {
  toggleBtn.classList.toggle('in-closed');
  sidebar.classList.toggle('in-closed');
})

По отдельности они работают а находясь оба на одной странице один из них перестает работать. Все скрипты у меня находятся в одном файле main-castom.js

Исходный код codepen

var toggleBtn = document.querySelector('.sidebar-toggle');
var sidebar = document.querySelector('.sidebar');

toggleBtn.addEventListener('click', function() {
  toggleBtn.classList.toggle('is-closed');
  sidebar.classList.toggle('is-closed');
})

// COLORS
$white: #fff;
$main-color: #29C7D2;
$sub-color: #253FE1;

$color__bg: $sub-color;
$color__sidebar: $white;
$color__toggle: $sub-color;

// SIZES
$width__sidebar: 15em;

* {
  box-sizing: border-box;
}

body {
  background-color: $color__bg;
}

.sidebar-toggle {
float: right;
  
  &.is-closed {
    transform: translateX(.3em) rotate(0deg);  
  }
  
  .icon {
    font-size: 1.5rem;
    color: $white;
  }
}

.sidebar {
  width: $width__sidebar;
  height: 100vh;
  background-color: #1d1e22;
  transition: .7s;
  
  &.is-closed {
    transform: translateX(-30em);
  }
}
.sidebar-d {
float: right;
}

<div class="sidebar is-closed">
  <button class="sidebar-toggle">кнопка внутри sidebar</button>
</div>
<div class="sidebar-d">
<button class="sidebar-toggle">кнопка на странице</button>
</div>

Answer 1

Дублирование кода - плохая затея.

Лучше делать переиспользуемый код. Вот пример, как это можно сделать в вашем случае:

function startSideBar(selector) {
  const toggleBtn = document.querySelector(`.${selector}-toggle`);
  const sidebar = document.querySelector(`.${selector}`);

  toggleBtn.addEventListener('click', function() {
    toggleBtn.classList.toggle('is-closed');
    sidebar.classList.toggle('is-closed');
  });
  // Опционально, если нужен доступ к элементам за пределами функции
  return [toggleBtn, sidebar];
}

// Вызываем функцию для каждого селектора
startSideBar('sidebar');
startSideBar('support-author');
// Если нужно получить доступ к элементу за пределами функции, то вызов будет выглядеть так
const [toggleBtn, sidebar] = startSideBar('sidebar');
const [supportBtn, supportSidebar] = startSideBar('support-author');

Создается фукнция, которая выбирает нужные элементы по селектору, переданному в функцию.
Создает обработчик клика на кнопку
(Опционально - можно убрать, если не используется) Возвращает найденные элементы(кнопку и сайдбар)

БЛОГ НА HUSL

Как правильно продублировать код javascript

Ответы (1 шт):