Как можно упростить и сократить объем кода?

Как можно улучшить структуру и ясность кода для функции `imgToogle()`?
  • 17 октября 2023 г. 14:59
Ответы на вопрос 2
1. Использование функции `toggleClass()` вместо повторяющихся `if/else` операторов для добавления и удаления классов.
2. Использование параметров в функции `imgToggle()` для указания элементов и классов, что позволяет ее использовать с разными элементами на странице.
3. Использование комментариев для объяснения кода и его последовательности.
4. Удаление неиспользуемых комментариев и лишних пробелов для более чистого кода.

Пример упрощения и сокращения объема кода для функции `imgToggle()`:

```javascript
function imgToggle(img, class1, class2) {
  img.classList.toggle(class1);
  img.classList.toggle(class2);
}

// Использование imgToggle
imgToggle(document.getElementById("myImg"), "visible", "hidden");
```

Пример улучшенной структуры и ясности кода для функции `imgToggle()`:

```javascript
// Функция для переключения классов у изображения
function imgToggle(img, class1, class2) {
  img.classList.toggle(class1);  // Добавление/удаление первого класса
  img.classList.toggle(class2);  // Добавление/удаление второго класса
}

// Использование imgToggle для управления видимостью изображения
var myImg = document.getElementById("myImg");  // Получение элемента изображения
imgToggle(myImg, "visible", "hidden");  // Переключение классов
```

Использование параметров `img`, `class1` и `class2` позволяет функции `imgToggle` работать с различными элементами и классами на странице, делая ее более гибкой и повторно используемой. Комментарии добавлены для объяснения каждой части кода, что повышает ясность и понятность функции.
const clickTargetElement = document.querySelector('.hiking__about_item_img');

const imageConfigurations = {
  primaryImage: {
    htmlElement: document.querySelector('.img1'),
    sourcePaths: ['img/about_hiking/1.png', 'img/about_hiking/2.png'],
    altTexts: ['House and mountains in the background', 'Snowy mountains']
  },
  secondaryImage: {
    htmlElement: document.querySelector('.img2'),
    sourcePaths: ['img/about_hiking/1.png', 'img/about_hiking/2.png'],
    altTexts: ['House and mountains in the background', 'Snowy mountains']
  }
}

const toggleImageAttributes = ({ htmlElement, sourcePaths, altTexts }) => {
  const isPrimarySource = htmlElement.getAttribute('src') === sourcePaths[0];
  const indexToUse = isPrimarySource ? 1 : 0;

  htmlElement.setAttribute('src', sourcePaths[indexToUse]);
  htmlElement.setAttribute('alt', altTexts[indexToUse]);
}

clickTargetElement.addEventListener('click', () => {
  Object.values(imageConfigurations).forEach(toggleImageAttributes);
});
Похожие вопросы