Как переписать код на более современный JS?
Здравствуйте! Подскажите пожалуйста как переписать код на более современный код 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'); }; |
const menu = document.querySelector('.burger-menu').onclick = function() { document.querySelector('.menu__list').classList.toggle('active-menu') document.querySelector('.burger-menu').classList.toggle('active'); };
Дополнительно:
Всё с этим кодом в плане "современности" нормально.
А вот в плане читаемости и переиспользования - нет.
Можно например вот так переписать:
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); |
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);
Подскажите пожалуйста как переписать код на более современный код JS.
Зачем?
нашел такой код он работает, при клике добавляет 2 динамических класса на 2 разных блока
Не добавляет, а переключает.
но пишут на форуме что код устаревший
На заборе пишут, что пора прыгать из окна.
Как исправить?
addEventListener()
Ответы:
Может они что-то типо этого ждут:
const menu = document.querySelector('.burger-menu').addEventListener('click', () => { document.querySelector('.menu__list').classList.toggle('active-menu') document.querySelector('.burger-menu').classList.toggle('active'); }); |
const menu = document.querySelector('.burger-menu').addEventListener('click', () => { document.querySelector('.menu__list').classList.toggle('active-menu') document.querySelector('.burger-menu').classList.toggle('active'); });
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для переписывания кода на более современный JavaScript можно использовать современные возможности и синтаксис ES6 (ECMAScript 2015) и более поздних версий. Ниже приведен пример простого кода на JavaScript, который можно переписать с использованием новых возможностей:
Исходный код на JavaScript:
function add(a, b) { return a + b; } var result = add(2, 3); console.log(result);
Переписанный код с использованием стрелочной функции и деструктуризации:
const add = (a, b) => a + b; const result = add(2, 3); console.log(result);
В данном примере была заменена обычная функция на стрелочную функцию, что делает код более лаконичным. Также была использована деструктуризация параметров функции для удобного извлечения значений.
Если у вас есть конкретный код, который вы хотели бы переписать на более современный JavaScript, пожалуйста, предоставьте его, и я помогу вам с переписыванием.