Как разделить подключение js файлов для разных html файлов?

Как правильно организовать подключение разных файлов JavaScript к разным HTML страницам? У меня возникли проблемы с обработчиками событий, так как сборщик объединяет все файлы JS в один app.js. Файл index.html работает без ошибок, но в auth.html возникают проблемы из-за обработчиков событий, которые не должны присутствовать там. Как оптимизировать эту ситуацию с использованием Vita?
  • 21 мая 2024 г. 9:30
Ответы на вопрос 1
Для разделения подключения JS файлов для разных HTML файлов, можно использовать функциональность модулей в JavaScript. 

Для начала, в каждом из ваших JS файлов можно создать модуль с помощью ключевого слова `export`, например:

```javascript
// app.js
export function initIndexPage() {
    // код для страницы index.html
}

// auth.js
export function initAuthPage() {
    // код для страницы auth.html
}
```

Затем, в каждом из ваших HTML файлов можно подключить соответствующий JS файл как модуль, используя атрибут `type="module"` в теге `script`:

```html
<!-- index.html -->
<script type="module" src="app.js"></script>
<script type="module">
    import { initIndexPage } from './app.js';
    initIndexPage();
</script>
```

```html
<!-- auth.html -->
<script type="module" src="auth.js"></script>
<script type="module">
    import { initAuthPage } from './auth.js';
    initAuthPage();
</script>
```

Таким образом, код из файла `app.js` будет выполнен только на странице `index.html`, а код из `auth.js` - только на странице `auth.html`. 

Если вы используете сборщик модулей, например, Vita, то он должен автоматически обрабатывать импорты модулей и объединять их правильно для каждой HTML страницы. В этом случае, вам не нужно беспокоиться о том, что все файлы JS объединяются в один app.js. Каждый модуль будет правильно подключен к соответствующей HTML странице.
Похожие вопросы