@FrelFrloich

Как правильно писать код на js?

Доброго времени суток, к сожалению отсутствует опыт в написании правильного кода, а из за малого опыта (с неделю), возникают сугубо дилетантские вопросы.
В данном случае меня волнует как правильно писать в js код, вопрос возник из за возникающих ошибках из за не нахождения класса на других страницах и довольно частых проверках через if существует ли данный элемент.

Первый пример.
function btnMouse() {
    const transformClass = document.querySelector(".info-speaker__link-wrap");
    const introLink = document.querySelector(".info-speaker__link");

    if (introLink !== null) {
        introLink.addEventListener("mouseenter", (e) => {
            transformClass.classList.add("info-speaker__link-wrap-trans");
        });

        introLink.addEventListener("mouseout", (e) => {
            transformClass.classList.remove("info-speaker__link-wrap-trans");
        });
    }
}
btnMouse();


второй пример

const transformClass = document.querySelector(".info-speaker__link-wrap");
const introLink = document.querySelector(".info-speaker__link");

    if (introLink !== null) {
        introLink.addEventListener("mouseenter", (e) => {
            transformClass.classList.add("info-speaker__link-wrap-trans");
        });

        introLink.addEventListener("mouseout", (e) => {
            transformClass.classList.remove("info-speaker__link-wrap-trans");
        });
    }


Как правильно, если в js файле сплошь клики, маус оверы и тд, обрамлять ли всё в функуции или же это не требуется, мне крайне не нравиться визуально, насыщенность if, а из за того что в php я более менее ведаю что творю такого рода js код с многочисленными if вне функций меня пугает.

К сожалению мне трудно сформулировать вопрос в более кратком варианте для поиска.
  • Вопрос задан
  • 219 просмотров
Решения вопроса 1
JohnnyGat
@JohnnyGat
Стараюсь писать код, понятный человеку.
const transformClass = document.querySelector(".info-speaker__link-wrap");
const introLink = document.querySelector(".info-speaker__link");

introLink?.addEventListener("mouseenter", (e) => {
    transformClass.classList.add("info-speaker__link-wrap-trans");
});

introLink?.addEventListener("mouseout", (e) => {
    transformClass.classList.remove("info-speaker__link-wrap-trans");
});


https://developer.mozilla.org/ru/docs/Web/JavaScri...
Оператор ?. заменяет проверку того что объект существует.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
зачем оборачивать в функцию поиск элементов на странице и вешание на них событий, мне непонятно...

introLink.addEventListener("mouseenter", (e) => {
  transformClass.classList.add("info-speaker__link-wrap-trans");
});

introLink.addEventListener("mouseout", (e) => {
  transformClass.classList.remove("info-speaker__link-wrap-trans");
});

а касательно этого фрагмента могу с большой вероятностью предугадать, что все это можно заменить на :hover в CSS.
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы