Как правильно разделить JavaScript-логику на разные страницы?

Question

Например, у меня есть веб-сайт с некоторыми страницами, как в следующем примере:

• login.html
• пользователем info.html
• products.html
• product.html

У меня есть разные сценарии для этих страниц. Итак, у меня есть:

• login.js
• пользовательский info.js
• products.js
• product.js

Я могу объединить эти файлы в один или импортировать с модулями ES6 и получить "scripts.min.js".

Однако, если у меня в login.js есть что-то вроде:

document.ready(function() {
   alert('Hello, this is logic for login.js');
})

тогда я получаю это сообщение для всех страниц.

Я ищу правильный способ разделить логику между страницами. Вся информация об архитектуре JavaScript, которую я нашел, к сожалению, была о SPA.

Как правильно организовать структуру JS на обычном веб-сайте, чтобы сделать его обслуживаемым и масштабируемым?

Answer 1

ОБНОВЛЕНИЕ : если вы хотите, чтобы какой-то код просто выполнялся на определенных страницах, вы могли бы сделать что-то вроде этого (onload):

var _tgt = window.location.href; //where are we

var _is_login = _tgt.search("login");

if (_is_login !== -1) {
  console.log("Do something in login");
}

---

Вы можете использовать модули узлов для обрезки вашего кода:

• Чтобы удалить комментарии и сжать: модуль uglify-js npm.
• Чтобы объединить различные файлы js, вы можете сделать что-то вроде этого:
  1. Чтение файлов с использованием (например) модуля npm fs-readdir-recursive и fs
  2. Удалите нежелательный контент, например, с помощью регулярного выражения
  3. Создать новый файл (вместе)