Как "подключить" файл JS к файлу HTML аналогично include?

@LUN2 · Регистрация: 15.08.2014

Студворк — интернет-сервис помощи студентам

Добрый день и с наступившим Новым годом!

В моем html-файле было много кода на js, часть из которого я решил вынести в другие js файлы.
Итоговая конструкция приведена далее.

До вынесения кода в file1 и file2 я не заботился о порядке объявления и использования функций и все работало нормально.
После вынесения этот порядок стал иметь значение.

Я использовал атрибут defer, чтобы заставить браузер сначала все загрузить, а затем исполнять, но видимо неправильно понял его значение - основной код ссылается на ф-ции из file1/file2 и браузер ругается на то, что они не определены.

Вопрос: каким образом вынести часть кода в другие файлы и при этом не заботиться о порядке включения доп. файлов в основном коде ?

HTML5
1
2
3
4
5
6
7
8
html...
 
<script javascript>
     основной код - раньше весь текст js, включая file1 и file2, находился здесь
</script>
 
<script defer src="file1.js"></script>
<script defer src="file2.js"></script>

@voraa · 02.01.2025, 15:27

Не очень понятно, что за проблема.
Код в файлах должен идти в той же последовательности, как он был в исходном скрипте.

Сообщение от LUN2

каким образом вынести часть кода в другие файлы и при этом не заботиться о порядке включения доп. файлов в основном коде

Ну так, что бы совсем не заботится - не бывает.
Часть кода вынести труднее.

@LUN2 · 02.01.2025, 15:41 **[ТС]**

voraa, код выносился в file1 и file2 блоками (непрерывными кусками).
Т.е. в итоге последовательность ф-ций стала такой: main, file1, file2.

Ранее куски кода, вынесенные в file1/2, были где-то в середине main, т.е. порядок следования ф-ций изменился.

Проблема... ?
Смотря что называть проблемой.
Ранее можно было не отслеживать - в каком порядке все ф-ции находились внутри единого main.
После вынесения стало необходимо это отслеживать. Это я называю проблемой.
Конечно ее можно решить, но ранее этого не требовалось...

А какое решение самое простое ?
Пересмотреть содержимое всех файлов и переставить процедуры в порядке: сначала объявил, затем используй ???

@voraa · 02.01.2025, 16:28

Сообщение от LUN2

Пересмотреть содержимое всех файлов и переставить процедуры в порядке: сначала объявил, затем используй ???

Ну да, в принципе. Нельзя использовать функцию из файла, который еще не загрузился. Если все загружено, то не важно, где она стоит, раньше вызова или после.
Как вариант - не использовать defer, а загрузку скриптов поставить в начало.
Второй вариант - все вынести в файлы скриптов.

@kidASM · 02.01.2025, 17:48

Есть нюансы.
1. Весь JavaScript-код выполняется как один большой файл. Если вызывается то, что ещё не загрузилось, тогда происходит ошибка "undefined".
2. Если проект достаточно больший и возникла необходимость в разделение кода, тогда можно использовать сбощик проекта (например webpack, ... (так поступают все фрэймворки)), для сборки bundle и загрузке одного большого (но минифицированного) js-файла.
3. Если файлы file1, file2, fileN - это набор функций, которые не содержат вызова (или не обращаются к ещё не готовому DOM), тогда их можно указать в тэге HEAD. А основной файл ("main.js") как обычно внизу тэга BODY. (Например так делает jQuery.)

@NTHing · 02.01.2025, 20:37

PHP/HTML
1
2
3
4
5
6
    <script
        src="./main.js"
        defer
    ></script>
    <script src="./file_1.js"></script>
    <script src="./file_2.js"></script>

@_Develop · 02.01.2025, 23:10

В ECMAScript 6 появились модули - https://developer.mozilla.org/... de/Modules
можно работать без сборщиков проекта и не заботясь о порядке включения файлов.

HTML5
1
2
3
4
5
6
<html>
  <body>
  ......
  </body>
  <script type="module" src="main.js"> </script> 
</html>

JavaScript
1
2
3
4
5
6
7
8
import { myFunc } from './file_1.js';
 
main(); // запуск
 
// точка входа
function main()  {
  ...
}

JavaScript
1
2
3
4
5
export { myFunc };
 
function myFunc() {
  ...
}

@LUN2 · 15.01.2025, 21:49 **[ТС]**

Сообщение от _Develop

В ECMAScript 6 появились модули - https://developer.mozilla.org/... de/Modules
можно работать без сборщиков проекта и не заботясь о порядке включения файлов.

При попытке сделать так я столкнулся с проблемой CORS, если открываю головной HTML в браузере, как локальный файл.

PHP/HTML
1
2
3
4
5
6
7
// Головной файл
<script type = "module">
 
    import {logw, logw_clear, displayLog, testWinOutput, createNewWindow} from './ws_chat4_win.js';
    import {logw_set_style, logw_event, logw_call } from './ws_chat4_win.js';
    import {logw_status, logw_add_status, logw_pc_state, logw_icecandidate, outputWindow } from './ws_chat4_win.js';
    ...

import выдает ошибку (Firefox 112.0.1):

Code
1
Запрос из постороннего источника заблокирован: Политика одного источника запрещает чтение удаленного ресурса на file:///C:/Users/....../ws_chat4/ws_chat4_win.js. (Причина: запрос CORS выполнен не по http).

Так что, как локальный файл, получается с модулями не открыть ?
Удивительно - origin-то один и тот же...

@voraa · 15.01.2025, 22:05

Модули не работают в локальной файловой системе. Только через сервер по протоколам http(s)

Сообщение от LUN2

Удивительно - origin-то один и тот же...

Он null.

Новые блоги и статьи Все статьи Все блоги /
Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Рецензия / Мнение Это мой обзор планшета X220 с точки зрения школьника. Недавно я решила попытаться уменьшить свой. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .

@LUN2 3 / 3 / 0 Регистрация: 15.08.2014 Сообщений: 481
	02.01.2025, 15:41 [ТС]
	voraa, код выносился в file1 и file2 блоками (непрерывными кусками). Т.е. в итоге последовательность ф-ций стала такой: main, file1, file2. Ранее куски кода, вынесенные в file1/2, были где-то в середине main, т.е. порядок следования ф-ций изменился. Проблема... ? Смотря что называть проблемой. Ранее можно было не отслеживать - в каком порядке все ф-ции находились внутри единого main. После вынесения стало необходимо это отслеживать. Это я называю проблемой. Конечно ее можно решить, но ранее этого не требовалось... А какое решение самое простое ? Пересмотреть содержимое всех файлов и переставить процедуры в порядке: сначала объявил, затем используй ??? 0

@kidASM 409 / 301 / 112 Регистрация: 28.08.2013 Сообщений: 787
	02.01.2025, 17:48
	Есть нюансы. 1. Весь JavaScript-код выполняется как один большой файл. Если вызывается то, что ещё не загрузилось, тогда происходит ошибка "undefined". 2. Если проект достаточно больший и возникла необходимость в разделение кода, тогда можно использовать сбощик проекта (например webpack, ... (так поступают все фрэймворки)), для сборки bundle и загрузке одного большого (но минифицированного) js-файла. 3. Если файлы file1, file2, fileN - это набор функций, которые не содержат вызова (или не обращаются к ещё не готовому DOM), тогда их можно указать в тэге HEAD. А основной файл ("main.js") как обычно внизу тэга BODY. (Например так делает jQuery.) 1