@Kostegn

Оптимизация кода JavaScipt?

function ready() {
  function modalPopUp() {
    let overlay = document.getElementById("overlay");
    let popupButton = document.querySelectorAll(".popup-btn");
    for (let i = 0; i < popupButton.length; i++) {
      popupButton[i].addEventListener("click", () => {
        let attr = popupButton[i].getAttribute("data-popup");
        let popup = document.querySelector(`#${attr}`);
        popup.classList.toggle("active");
        overlay.classList.toggle("overlay_active");
      });
    }
    let popup = document.querySelectorAll(".popup__close");
    for (let i = 0; i < popup.length; i++) {
      popup[i].addEventListener("click", () => {
        popup[i].parentNode.classList.remove("active");
        overlay.classList.toggle("overlay_active");
      });
    }
  }
  modalPopUp();
}

Написал скрипт для активации модальных окон, сразу к вопросам.
1. Строка 11 лучше сделать так или стоит получить окна вне цикла и сохранить в массив, а уже внутри работать с ними?
2. Строка 17-23 тут просто не знаю других решений, может есть лучше?
3. Вообще что по производительности у такой функции, можно ли сделать быстрее?

Я знаю что на сайт маленькая функция сильно наверное и не влияет, но если у меня 20 кнопок, а там еще слайдеры, галереи и прочее, то уже лаги.
Спасибо всем кто ответит.
  • Вопрос задан
  • 235 просмотров
Решения вопроса 1
@AleksRap
1. Так у вас так и сделано - массив вне цикла и внутри работаете с ним
2. Событие навесить на обертку, а по всплытию события проверять нужная ли кнопка нажата
3. На мой взгляд лучше создать класс Popup и написать для него методы открытия/закрытия и т.д. и для каждого экземпляра попапа создавать свой персональный объект. Тогда не придется каждый раз заново искать все попапы, их кнопки и т.д. А так же код будет красивее оформлен и проще будет использовать его повторно
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
Seasle
@Seasle Куратор тега JavaScript
Циклы можно на for-of заменить
const entries = [1, 2, 3, 4];
for (let entry of entries) {...}


Получение атрибута data-popup можно заменить на element.dataset.popup
Ответ написан
Robur
@Robur
Знаю больше чем это необходимо
для начала - все ивенты которые вы навешиваете надо убирать потом или сделать так чтобы это происходило только один раз. Лаги у вас вряд ли от того что 20 кнопок, если все нормально то лаги должны начинаться где-то на 500-1000 кнопок.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы