Подключение модуля JavaScript лишь на отдельной странице

Question

Итак, вопрос в следующем: есть две страницы, index и single-page, используется шаблонизатор, на страницах меняется лишь контентная часть, шапка у всех общая, в ней подключается файл main.js, доступный на всех страницах.

На второй странице (single-page) есть табы с данными, работа табов реализована через JavaScript, код я вынес в отдельный модуль - Tabs.js. Соответственно, main.js содержит в себе импорт данного модуля:

// main.js
import Tabs from "./js/modules/Tabs.js"; 
Tabs();

По сути, этот код нужен лишь для страницы single-page, а на index он не используется, так как там табов нет, но вызывается main.js везде. И я хочу понять, как правильно реализовывать работу такого модуля лишь в нужной ситуации. Должен ли он содержать в себе какие-то проверки на адрес страницы, или проверки селекторов табов указывающих на то, что выборка успешна и такой-то элемент есть и с ним можно работать, или что-то еще?

Answer 1

class Tabs {
  constructor(node) {
    if (!node) return;
    
    // if node does not exist on the current page, the script would be disable
    
    console.log('Tabs does exist on the current page.')
  }
}

new Tabs(document.querySelector('.tabs'));

<div class="tabs"></div>

БЛОГ НА HUSL

Подключение модуля JavaScript лишь на отдельной странице

Ответы (1 шт):