Допустим, есть большой многостаничный сайт. На разных страницах этого сайта может использовать разный javascript-код.
Например, на главной странице нужен скрипт для слайдера, а для большинства других страниц он не нужен.
И подобных случаев может быть много.
Как именно в таком случае хранить javascript и вызывать необходимый код на страницах?
Вижу, что многие собирают JS-код с помощью сборщиков проектов в один файл и подключает его на всех страницах сайта. Выходит, нужно прописывать в самом скрипте условие, когда кусок кода выполняется, а когда нет?
Например, в случае со слайдером, можно писать так:
const slider = document.querySelector("#slider");
if (slider) {
do something
}
В таком случае, код выполнится только на страницах, где есть элемент с id slider.
Правильный ли это подход? Как минимум, вижу ещё один вариант:
Собираем весь код в один главный index.js - там будут располагаться все классы, функции и т.п.
И дополнительно к этому пишем для каждой страницы отдельный JS, например, main.js. Там мы будем создавать инстансы классов, делать какие-то дополнительные манипуляции.
В итоге, на странице у нас будет подключен index.js, и main.js, который использует код из index.js
Какой подход в данном случае наиболее правильный?
