@SpeNch

Как переделать код под ООП?

вот код
window.addEventListener('scroll', function() {
		if (pageYOffset > 100) {
				document.querySelectorAll("#registion")[0].style.display = "none"
				document.querySelectorAll("#vhod")[0].innerHTML = "<img style='width: 20px; height: 20px;' src='SiteImage/logo_vhod.svg'>"
				document.querySelectorAll("#vhod")[0].style.background = "none"
				document.querySelectorAll("#vhod")[0].style.width = "30px"
			PanelMenuLinks.style.background = "none"
			PanelMenuLinks.style.zIndex = "-1"
			PanelMenuLinks.style.marginTop = "-45px"
			PanelMenuLinks.style.fontSize = "13px"
			block_panel_menu_children.style.top = "10px"
			PanelMenuLinks.style.color = "#fff"
			document.querySelectorAll("#block_panel_menu")[0].style.height = "49px"
			document.querySelectorAll("#block_panel_menu")[1].style.height = "49px"
			document.querySelectorAll("#block_panel_menu")[2].style.height = "49px"
			document.querySelectorAll("#logotip")[0].style.opacity = "0"
			document.querySelectorAll("#logotip")[0].style.marginTop = "-20px"
			PanelMenuLinks.style.borderTop = "0px"
			document.getElementsByTagName("header")[0].style.height = "50px"
		} else {
						document.querySelectorAll("#logotip")[0].style.marginTop = "0px"

			    document.querySelectorAll("#registion")[0].style.display = "block"
				document.querySelectorAll("#vhod")[0].innerHTML = "Регистрация"
				document.querySelectorAll("#vhod")[0].style.background = "#626262"
				document.querySelectorAll("#vhod")[0].style.width = "100px"
			PanelMenuLinks.style.fontSize = "18px"
			block_panel_menu_children.style.top = "20px"
			document.querySelectorAll("#logotip")[0].style.opacity = "1"
			document.getElementsByTagName("header")[0].style.height = "70px"
			PanelMenuLinks.style.marginTop = "0px"
			PanelMenuLinks.style.background = "#E7E7E7"
			PanelMenuLinks.style.borderTop = "10px solid #fff"
			PanelMenuLinks.style.color = "#000"
			document.querySelectorAll("#block_panel_menu")[0].style.height = "70px"
			document.querySelectorAll("#block_panel_menu")[1].style.height = "70px"
			document.querySelectorAll("#block_panel_menu")[2].style.height = "70px"
		}
	});


этот код просто при прокрутки страницы изменяет меню панель, как переделать код под ооп, чтоб был более современнее, и красивее, Впринципе меня устраивает и этот код но он какойто от слова 'говно код'
  • Вопрос задан
  • 292 просмотра
Решения вопроса 2
@TheCrossCarrier
  1. Вынести в переменные (а лучше в константы const) все элементы HTML. Например, как сделано с PanelMenuLinks
  2. Использовать вместо, например querySelectorAll("#block_panel_menu")[0] getElementById("block_panel_menu")
    А там, где надо нескольким элементам из массива присвоить значения, использовать циклы forEach

  3. Вразброс обращаетесь к элементам, разделите на блоки, делайте отступы логические (пустые строки) между блоками кода, чтоб было понятнее.
    С табуляцией у Вас что-то...


Отредактировал Ваш код:

const
  header = document.querySelector('header'),
  logotip = document.getElementById('logotip'),
  registion = document.getElementById('registion'),
  vhod = document.getElementById('vhod'),
  block_panel_menu = document.querySelectorAll('#block_panel_menu')

function block_panel_menu_Height(height) {
  block_panel_menu.forEach(element => element.style.height = height + 'px')
}

// vhod.innerHTML = '<img style="width: 20px; height: 20px;" src="SiteImage/logo_vhod.svg">'
let logo_vhod = document.createElement('img')
logo_vhod.style.width = '20px'
logo_vhod.style.height = '20px'
logo_vhod.src = './SiteImage/logo_vhod.svg'

window.onscroll = () => {

  if (pageYOffset > 100) {
    header.style.height = '50px'

    logotip.style.opacity = '0'
    logotip.style.marginTop = '-20px'

    registion.style.display = 'none'

    vhod.appendChild(logo_vhod)
    vhod.style.background = 'none'
    vhod.style.width = '30px'

    PanelMenuLinks.style.background = 'none'
    PanelMenuLinks.style.zIndex = '-1'
    PanelMenuLinks.style.marginTop = '-45px'
    PanelMenuLinks.style.fontSize = '13px'
    PanelMenuLinks.style.color = '#fff'
    PanelMenuLinks.style.borderTop = '0px'

    block_panel_menu_Height(49)
    block_panel_menu_children.style.top = '10px'
  }
  else {
    header.style.height = '70px'

    logotip.style.marginTop = '0px'
    logotip.style.opacity = '1'

    registion.style.display = 'block'

    vhod.innerText = 'Регистрация'
    vhod.style.background = '#626262'
    vhod.style.width = '100px'

    block_panel_menu_Height(70)
    block_panel_menu_children.style.top = '20px'

    PanelMenuLinks.style.marginTop = '0px'
    PanelMenuLinks.style.background = '#E7E7E7'
    PanelMenuLinks.style.borderTop = '10px solid #fff'
    PanelMenuLinks.style.fontSize = '18px'
    PanelMenuLinks.style.color = '#000'
  }
}


Мои рекомендации (кроме тех, что я описал выше):
  • Правильно использовать функции получения доступа к элементам HTML
  • ID обычно даётся единственному элементу в документе, в остальных случаях используется класс
  • Использовать innerText там где можно обойтись и без innerHTML
  • Создавать элементы средствами JS, а не встраиванием HTML кода через innerHTML
  • Пишите функции (пусть даже маленькие), если есть повторения в коде: так код будет и красивее и читабельнее и удобнее в использовании
  • Давать классам и id русские имена типа vhod -- не самая лучшая идея. Используйте переводчик, чтобы перевести интересующие Вас названия на английский.
  • Выберите способ именования переменных: либо block_panel_menu, либо blockPanelMenu. У Вас же встречаются оба варианта. В JavaScript принято использовать вариант, называемый Camel Case, то есть, второй вариант: blockPanelMenu.

Ну а так по мелочи: можно использовать одинарные кавычки ' вместо двойных ";
изучите стрелочные функции типа () => {} . Часто можно использовать именно их -- они и короче писать и не захламляют код лишними словами;
Слушатели событий можно записать короткой записью, например: window.addEventListener('scroll', функция) можно написать window.onscroll = функция (в большинстве случаев просто добавляется 'on' в начало названия события); Желательно писать в начале скрипта строчку 'use strict' -- строгий режим -- гугл расскажет о нём лучше меня

Задавайте вопросы, что не понятно, на всё отвечу!
Ответ написан
Tim-A-2020
@Tim-A-2020
1. Идентификатор в коде документа должен быть в единственном экземпляре, иными словами, встречаться только один раз.
2. Если элементы динамически не встраиваются, то поиск по class/id желательно вынести за функцию
Сократить код можно примерно так
class Scrolling {
    offset = null;

    scrolls() {
        const isOffset = pageYOffset > 100 ? "offsetOne" : "offsetSecond";
        if (this.offset != isOffset) {
            this[isOffset]({
                registion: document.querySelector("#registion"),
                vhod: document.querySelector("#vhod"),
            });
            this.offset = isOffset;
        }
    }

    offsetOne({ registion, vhod }) {
        registion.style.display = "none";
        vhod.style.cssText = "background:none;width:30px";
        vhod.innerHTML = "<img style='width: 20px; height: 20px;' src='SiteImage/logo_vhod.svg'>";
        PanelMenuLinks.style.cssText = "background:none;z-index:-1;margin-top:-45px;font-size:13px;color:#fff;border-top:0;";
        block_panel_menu_children.style.top = "10px";
        //block_panel_menu - заменить на класс.
        document.querySelectorAll("#block_panel_menu").forEach((item) => (item.style.height = "49px"));
        document.querySelector("#logotip").style.cssText = "opacity: 0;margin-top:-20px;";
        document.querySelector("header").style.height = "50px";
    }

    offsetSecond({ registion, vhod }) {
        registion.style.display = "block";
        vhod.style.cssText = "background:#626262;width:100px";
        vhod.innerHTML = "Регистрация";
        PanelMenuLinks.style.cssText = "background:#E7E7E7;margin-top:0px;font-size:18px;color:#000;border-top:10px solid #fff;";
        block_panel_menu_children.style.top = "20px";
        //block_panel_menu - заменить на класс.
        document.querySelectorAll("#block_panel_menu").forEach((item) => (item.style.height = "70px"));
        document.querySelector("#logotip").style.cssText = "opacity:1;margin-top:0px;";
        document.querySelector("header").style.height = "70px";
    }
}
const scroll = new Scrolling();
window.addEventListener("scroll", scroll.scrolls.bind(scroll), false);
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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