Как оптимизировать js скрипт?

Question

[Алекс]

Добрый день прошу сильно не пинать-изучаю нативный js.
Есть простой скрипт + css3 выезжающего блока

var bannersClick = document.querySelector('.banners__click'),
    bannersInfo  = document.querySelector('.banners'),
    bannersClose = document.querySelector('.banners__close');


    function addBlock(clasS,animRl) { 
        clasS.classList.add(animRl);
    }

    function style(clasS,sum) { 
        clasS.style.right=sum;
    }



bannersClose.addEventListener('click', closes);
bannersClick.addEventListener('click', click);



function click() {
    addBlock(this,'slideInRight');
    style(this,"400px");
    bannersInfo.classList.remove('slideOutLeft');
    addBlock(bannersInfo,'slideInRight');
    style( bannersInfo,0);
}

function closes() {
    bannersInfo.classList.remove('slideInRight');
    addBlock(bannersInfo,'slideOutLeft');
    bannersInfo.style.right = "-410px";
    bannersClick.style.right = "-10px"
}

Как его улучшить и оптимизировать, какие есть приемы еще? Спасибо

Answer 1

[Алекс]

Вообщем оптимизировал засунув ненужные доп классы в активный с помошью css

var bannersClick = document.querySelector('.banners__click'),
    bannersInfo  = document.querySelector('.banners'),
    bannersClose = document.querySelector('.banners__close');
bannersClick.addEventListener('click',function () {
    this.classList.toggle('active');
    bannersInfo.classList.toggle('active');
});
bannersClose.addEventListener('click',function () {
    bannersClick.classList.toggle('active');
    bannersInfo.classList.toggle('active');
});

.banners__click {
    transition-duration: 1s;
right:0
}
.banners__click.active {
    transition-duration: 1s;
    right: 400px;

}

Comments

[Павел Корнилов]

.banners__click {
    transition-duration: 1s;
right:0
}

.banners__click.active {
    right: 400px;
}

Это что касается оптимизации.

Answer 2

[scoffs]

Я бы посоветовал еще отказаться от var и перейти на letи const

Инициализировать переменные через запятые также не лучшая затея

Примерно я написал как-то так

const bannersClick = document.querySelector('.banners__click');
const bannersInfo = document.querySelector('.banners');
const bannersClose = document.querySelector('.banners__close');

function addClass(element, className) {
  element.classList.add(className);
}

function setRightStyle(element, value) {
  element.style.right = value;
}

function handleClick() {
  addClass(this, 'slideInRight');
  setRightStyle(this, '400px');
  bannersInfo.classList.remove('slideOutLeft');
  addClass(bannersInfo, 'slideInRight');
  setRightStyle(bannersInfo, '0');
}

function handleClose() {
  bannersInfo.classList.remove('slideInRight');
  addClass(bannersInfo, 'slideOutLeft');
  setRightStyle(bannersInfo, '-410px');
  setRightStyle(bannersClick, '-10px');
}

bannersClose.addEventListener('click', handleClose);
bannersClick.addEventListener('click', handleClick);