Всем доброго времени суток. Возник вопрос, как правильно организовывать и вообще писать javascript скрипты? Есть множество ситуаций, когда библиотеки для выполнения определенных задач вовсе нет, либо нет смысла ее подключать ради вызова например одного модального окна. Я обычно пишу простые скрипты сам (модальные окна, мобильное меню и т.п.).
На данный момент я пишу большой проект в котором требуется достаточное большое количество скриптов, например, некоторые из них:
//menu
var menuBtn = document.querySelector('.adaptive-menu__button');
menuBtn.onclick = function() {
var list = document.querySelector('.adaptive-menu__navigation');
list.classList.toggle('adaptive-menu__navigation--active');
}
//menu-gear
var gear = document.querySelector('.settings__icon--3');
gear.addEventListener('mouseenter', function() {
var menu = document.querySelector('.settings__hidden-menu');
menu.style.display = 'block';
var timeClose = setTimeout(function() {
menu.style.display = 'none';
}, 4000);
menu.addEventListener('mouseenter', function() {
clearTimeout(timeClose);
});
menu.addEventListener('mouseleave', function() {
menu.style.display = 'none';
});
})
//popup's
var popups = document.querySelectorAll('.slider-advertising__slide');
for(var i = 0; i < popups.length; i++) {
popups[i].addEventListener('click', function() {
var attr = this.getAttribute('data-number');
var modals = document.querySelectorAll('.slider-advertising__modal');
var backs = document.querySelectorAll('.slider-advertising__back');
var slideCount = 0;
document.body.style.overflow = 'hidden';
for(var j = 0; j < modals.length; j++) {
var attrModal = modals[j].getAttribute('data-number');
if (attr == attrModal && slideCount == 0) {
console.log(attrModal+' '+attr);
slideCount += 1;
modals[j].style.display = 'block';
var thisItem = modals[j];
}
var attrBack = backs[j].getAttribute('data-number');
if (attr == attrBack) {
backs[j].addEventListener('click', function() {
thisItem.style.display = 'none';
document.body.style.overflow = 'auto';
})
}
}
})
}
//Hover adver
var advertising = document.querySelectorAll('.slider-advertising__available');
for (var k = 0; k < advertising.length; k++) {
advertising[k].addEventListener('mouseover', function() {
if(this.classList.contains('slider-advertising__available--selected')) {
return;
} else {
this.classList.add('slider-advertising__available--active');
this.textContent = 'select';
}
})
advertising[k].addEventListener('mouseout', function() {
if(this.classList.contains('slider-advertising__available--selected')) {
return;
} else {
this.classList.remove('slider-advertising__available--active');
this.textContent = 'available';
}
})
advertising[k].addEventListener('click', function() {
this.classList.toggle('slider-advertising__available--selected');
if (this.classList.contains('slider-advertising__available--selected')) {
this.textContent = 'selected';
} else {
this.textContent = 'available';
}
})
}
Возникает несколько конкретных вопросов:
1. Не факт, что каждый скрипт будет использоваться на каждой странице, в итоге в консоли будут выскакивать ошибки, что делать в таком случаи? Проверять как-то наличие элементов на странице (если да, то как правильно это сделать), разбивать все скрипты на отдельные файлы и подключать отдельно? (Но ведь при сборке проекта все скрипты собираются и минифицируются, в итоге все равно будут ошибки).
2. Сможет ли back-end разработчик взаимодействовать с моими скриптами?
Например скрипт //hover adver выделает рекламные места в личном кабинете пользователя, далее он жмет кнопку оплатить и далее он может манипулировать этими рекламными местами которые расположены на других страницах сайта.
Как поступать в таких ситуациях, насколько я понимаю бэкэнд должен знать какой элемент выделен каким-либо образом, но в моем скрипте это никак не отображается, разве что дается определенный класс элементу, или бэкэнд настроит это под себя?
3. Есть какие-нибудь лучшие практики по этому поводу? Может книги, статьи, что можете посоветовать?
Каждому буду благодарен за ответы и совету по этой теме.
