Как переписать код на более современный JS?

Question

[Руслан Кириченко]

Здравствуйте! Подскажите пожалуйста как переписать код на более современный код JS. Делаю менюшку для сайта и изучаю JS нашел такой код он работает, при клике добавляет 2 динамических класса на 2 разных блока, но пишут на форуме что код устаревший. Как исправить?

const menu = document.querySelector('.burger-menu').onclick = function() {
    document.querySelector('.menu__list').classList.toggle('active-menu')
    document.querySelector('.burger-menu').classList.toggle('active');
};

Answer 1

[historydev]

Всё с этим кодом в плане "современности" нормально.
А вот в плане читаемости и переиспользования - нет.

Можно например вот так переписать:

const menu = document.querySelector('.burger-menu');
const menuList = document.querySelector('.menu__list');
const activateMenu = () => (menuList.classList.toggle('active-menu'), menu.classList.toggle('active'));

menu.addEventListener('click', activateMenu, true);

Comments

[Руслан Кириченко]

Спасибо!

[Turbine]

С этим кодом не всë нормально: для прослушки события используется
onclick()
который является устаревшим и нежелательным способом прослушки событий. Автор ответа переписал под более современное решение
addEventListener()
Основное преимущество которого - возможность убрать обработчик события, когда он больше не нужен с помощью
removeEventListener()
чтобы избегать утечек памяти при большом накоплении таких обработчиков и ненужных срабатываний.
Но, к сожалению, автор ответа этого не пояснил

Answer 2

[Михаил Р.]

Подскажите пожалуйста как переписать код на более современный код JS.

Зачем?

нашел такой код он работает, при клике добавляет 2 динамических класса на 2 разных блока

Не добавляет, а переключает.

но пишут на форуме что код устаревший

На заборе пишут, что пора прыгать из окна.

Как исправить?

addEventListener()

Answer 3

[Алексей Горынь]

Может они что-то типо этого ждут:

const menu = document.querySelector('.burger-menu').addEventListener('click', () => {
    document.querySelector('.menu__list').classList.toggle('active-menu')
    document.querySelector('.burger-menu').classList.toggle('active');
});

Comments

[Руслан Кириченко]

Спасибо!

Answer 4

[alexalexes]

Эта пуленепробиваемая конструкция будет работать и через 100 лет. Ничего не меняйте.