С Новым годом! Форум программистов, компьютерный форум, киберфорум
JavaScript для начинающих
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.67/3: Рейтинг темы: голосов - 3, средняя оценка - 4.67
3 / 3 / 0
Регистрация: 15.08.2014
Сообщений: 481

Как избежать повторной загрузки уже загруженного модуля?

16.01.2025, 21:33. Показов 872. Ответов 15
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Добрый вечер!
Прошу подсказать по модулям - экспорт переменных из них.

У меня есть 2 файла:
(1) головной - ws_chat4.html - он загружается в браузер при открытии страницы
(2) библиотечный модуль - ws_chat4_win.js

Модуль (2) обращается к переменной connection, объявленной в (1).
Для этого он делает import.

Чтобы он мог это сделать, модуль (1) экспортирует connection.

Хронология запросов в браузера такова:
- открывается страница с файлом (1),
- открывается библиотечный файл (2),
- в файле (2)есть import - браузер видит это и опять делает GET для файла (1) - но файл (1) уже загружен.
Вопрос - как избежать этой загрузки, т.е. дать браузеру понять, чтоб он воспользовался файлом, загруженном на шаге 1 ?

Фрагменты файла (1)


HTML5
1
2
3
4
5
6
7
8
9
10
11
12
здесь html-разметка
 
<script type = "module" name = "main">
   // Это файл: ws_chat4.html
 
    // --------- импорт библиотек-модулей ---------
    // --- управление окнами ---
    import {logw, logw_clear, displayLog, testWinOutput, createNewWindow} from './ws_chat4_win.js';
    import {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';
 
    export connection = ...


Фрагменты файла (2)

HTML5
1
2
3
4
5
6
//Это файл: ws_chat4_win.js
 
// import connection from './ws_chat4.html';  - приводит к повторному GET для файла (1)
//import connection from './ws_chat4.html';   - то же
 
import connection from './main';           // как сделать, чтобы GET повторно не делался ?
0
Лучшие ответы (1)
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
16.01.2025, 21:33
Ответы с готовыми решениями:

Как избежать повторного выполнения функции
Подскажите, не могу найти. Есть функция: $(&quot;.street&quot;).click(function(event){ var...

Ajax загрузка формы из загруженного через ajax блока
Вообщем, через ajax в блок подгружается форма, из нее нужно загрузить в этот же блок др.контент....

window.open() Как это окно заставить при повторной загрузке страницы подниматься на передний план?
Через window.open() (IE5.0) открываю (или гружу страницу в существующее) окно. Как это окно...

15
 Аватар для voraa
1245 / 1145 / 178
Регистрация: 21.01.2024
Сообщений: 5,264
16.01.2025, 21:40
Цитата Сообщение от LUN2 Посмотреть сообщение
приводит к повторному GET для файла
Что за чушь?
С чего вы взяли про второй get?
Модуль загружается только один раз, сколько бы он не вызывался.

HTML5
1
2
3
4
здесь html-разметка
 
<script type = "module" name = "main">
   // Это файл: ws_chat4.html
Нет никакого смысла ставить модули после html. Преимущество модулей в том, что они могут загружаться параллельно с разбором html, поэтому их надо ставить в начало.
1
3 / 3 / 0
Регистрация: 15.08.2014
Сообщений: 481
16.01.2025, 21:46  [ТС]
Цитата Сообщение от voraa Посмотреть сообщение
Что за чушь?
С чего вы взяли про второй get?
Модуль загружается только один раз, сколь ко бы он не вызывался.
Это не чушь, а то, что я вижу во вкладке "Сеть" - см. скриншот.

1-ая строка - 1-ая загрузка файла (1). Правда здесь не задается его имя. У моего сервера есть таблица мэппинга,
которая при выдаче GET /chat выдает файл (1).

Строка 4 - это 2-ая попытка. Она здесь неудачна, т.е. сервер не нашел мэппинг. Но тем не менее она делается, и если я настрою мэппинг для main, то загрузка пойдет.
Миниатюры
Как избежать повторной загрузки уже загруженного модуля?  
0
 Аватар для voraa
1245 / 1145 / 178
Регистрация: 21.01.2024
Сообщений: 5,264
16.01.2025, 22:25
Цитата Сообщение от LUN2 Посмотреть сообщение
Строка 4 - это 2-ая попытка. Она здесь неудачна, т.е. сервер не нашел мэппинг. Но тем не менее она делается, и если я настрою мэппинг для main, то загрузка пойдет.
Ну настройте и покажите.
Откуда пойдет загрузка? У вас скрипт main в html встроен.

Добавлено через 3 минуты
Ну и первый раз загружается не модуль, а страница.
Если действительно, вдруг, идет повторная загрузка страницы, как модуля (я так никогда не пробовал делать), то уберите встроенный на страницу модуль в отдельный файл.
1
3 / 3 / 0
Регистрация: 15.08.2014
Сообщений: 481
16.01.2025, 22:46  [ТС]
Цитата Сообщение от voraa Посмотреть сообщение
Ну и первый раз загружается не модуль, а страница.
Если действительно, вдруг, идет повторная загрузка страницы, как модуля (я так никогда не пробовал делать), то уберите встроенный на страницу модуль в отдельный файл.
Да - не модуль, а страница, но серверу-то что - он возвращает файл. Что этоу будет в терминологии - ему все равно.

Модуль встроен в файл, т.к. ранее это был большой html-файл со скриптом.
Далее я решил куски из него вынести в другие файлы - тормозил редактор.
Вот 1-ый вынесенный кусок - это и есть то, что попало в файл (2).

Может я зря с модулями связался ? Это действительно наиболее удобный инструмент для такой задачи - разделить
один большой кусок js-кода в html-файле на несколько файлов js ?
0
 Аватар для voraa
1245 / 1145 / 178
Регистрация: 21.01.2024
Сообщений: 5,264
16.01.2025, 22:54
Цитата Сообщение от LUN2 Посмотреть сообщение
Да - не модуль, а страница, но серверу-то что - он возвращает файл
Серверу все равно, что вернуть. Но браузеру не все равно. Он не сможет обработать html текст, как модуль. К тому же имеют значение mime типы. Страницу сервер будет передавать с типом "text/html", а модулю требуется, что бы тип был "application/javascript", иначе он его не станет обрабатывать, как модуль.

Добавлено через 1 минуту
Цитата Сообщение от LUN2 Посмотреть сообщение
Это действительно наиболее удобный инструмент для такой задачи - разделить
один большой кусок js-кода в html-файле на несколько файлов js ?
Ну модули они не столько для разделения, сколько для инкапсуляции данных, параллельной загрузки, повторного использования.
1
3 / 3 / 0
Регистрация: 15.08.2014
Сообщений: 481
17.01.2025, 21:42  [ТС]
voraa, спасибо!

Правильно ли я в итоге сделал ?

Было: в файле ws_chat4.html:
1) html-код.
2) js - объявления глоб. переменные и инициализирующий код,
3) js-функции.

Теперь в этом html-файле - только п. 1 и 2, а п.3 я вынес в отдельный файл - ws_chat4_main.js
В результате ф-ция из ws_chat4_main.js не видна в html-файле.

Выдержки из файлов:

файл - ws_chat4.html

HTML5
1
2
3
4
5
6
7
<script type="module">
    // Это файл: ws_chat4.html
 
    import * as MainModule from "./ws_chat4_main.js";
 
    js-инициализирующий код, в т.ч. вызов ф-ции:
    SetUserNameFromMsg(ParUserName);
файл - ws_chat4_main.js (он загружается в браузер нормально)

JavaScript
1
2
3
4
5
6
7
8
9
...
 
export function SetUserNameFromMsg(u_name) {
    // Устанавливаем имя пользователя в поле "msg"
    let user_name_div = document.getElementById("msg");
    user_name_div.value = u_name;
}
 
...
В моем понимании html-файл должен импортировать js и увидеть функцию JS,
но не видит ее и выдает ошибку - см. скриншоты 1 и 2.
Миниатюры
Как избежать повторной загрузки уже загруженного модуля?   Как избежать повторной загрузки уже загруженного модуля?  
0
 Аватар для voraa
1245 / 1145 / 178
Регистрация: 21.01.2024
Сообщений: 5,264
17.01.2025, 22:16
Цитата Сообщение от LUN2 Посмотреть сообщение
2) js - объявления глоб. переменные и инициализирующий код,
Если у вас модули, то какие там глобальные переменные? Все должно быть в модулях

Я бы и п 2. вынес в отдельный файл. Какую пользу он в html дает?

Раз у вас импорт такой
JavaScript
1
import * as MainModule from "./ws_chat4_main.js";
То все экспортируемые значения попадают в объект MainModule. Поэтому доступ к ним должен быть через этот объект
JavaScript
1
MainModule.SetUserNameFromMsg(ParUserName);
1
3 / 3 / 0
Регистрация: 15.08.2014
Сообщений: 481
18.01.2025, 13:46  [ТС]
Цитата Сообщение от voraa Посмотреть сообщение
То все экспортируемые значения попадают в объект MainModule. Поэтому доступ к ним должен быть через этот объект
Javascript
Выделить код
1
MainModule.SetUserNameFromMsg(ParUserNam e);
Спасибо!
Теперь ясно зачем as... нужно при импорте * ...

Глобальные переменные я пока оставил в html-файле, как я понял - они будут видны изо всех модулей и не нужно их явно экспортировать/импортировать. Так пока меньше переделывать надо, хотя может быть и не очень стройное решение.
0
 Аватар для voraa
1245 / 1145 / 178
Регистрация: 21.01.2024
Сообщений: 5,264
18.01.2025, 14:17
Цитата Сообщение от LUN2 Посмотреть сообщение
Глобальные переменные я пока оставил в html-файле, как я понял - они будут видны изо всех модулей и не нужно их явно экспортировать
Т.е в html есть еще один скрипт - не модуль, в котором объявлены эти глобальные переменные?
Тогда, да - будут видны в модулях.

Раньше вы писали про

файл - ws_chat4.html
HTML5
1
<script type="module">
Переменные, объявленные "глобально" (через var на верхнем уровне) в модуле, в других модулях видны не будут.
1
3 / 3 / 0
Регистрация: 15.08.2014
Сообщений: 481
18.01.2025, 15:14  [ТС]
Цитата Сообщение от voraa Посмотреть сообщение
Т.е в html есть еще один скрипт - не модуль, в котором объявлены эти глобальные переменные?
Тогда, да - будут видны в модулях.
Нет. Пока (в начале вопроса) такого 2-ого скрипта в html-файле не было.
Был единственный скрипт, который задумывался как носитель глобальных переменных.

Первоначально в нем не было атрибута type="module".
Однако без него import вызывало ошибку в браузере - "Uncaught SyntaxError: import declarations may only appear at top level of a module".

Когда я добавил в него type="module" (этот текст Вы и прочитали в моем вопросе),
import стал работать нормально, но, действительно, переменные в этом скрипте перестали быть глобальными.

В таком как мне сделать, чтобы и скрипт-не_модуль были в html-файле и ф-ции, вынесенные в другие модули, были видны в этом скрипте-не_модуле ???

Я попытался создать в html-файле 2 скрипта - см. далее.
В скрипте2 содержатся и глобальные переменные и код инициализации.
Но в нем теперь не видны функции, объявленные в модуле ws_chat_main.js

Новая версия структуры html-файла.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script type="module">
    // Это файл: ws_chat4.html - скрипт1-модуль
 
    // процедуры, выполняемые при инициализации
    import {SetUserNameFromMsg, GetUserNameFromMsg, AudioInitialize, updateRecordButtons,
        scr_SetScreenElementsWebSocket, scr_SetScreenElementsWebRtc, scr_SetDebugScreenElementsOnOff,
        scr_setWelcomeWindowOnOff} from "./ws_chat4_main.js";
 
    // обработчики кнопок из html-кода
    import {ConnectWebSocket, ws_SendLongMessageToAll, h_CloseWebSocket,
        ws_SendWebSocketToAll, SendWebSocketTo1, DisplayLogMessage, u_AppendNewUser, u_EnumerateUsers_Screen,
        SendTestFile, StartStopRecordButton, h_StartWebRTCButton, h_CloseWebRTCButton,rtc_ShowStatusButton,
        rtc_EnableDisableAllVideoTracks,
        h_toggleOurVideoSending, h_DisplayDelimiter, dbg_SendTestString, h_onFilterChange} from "./ws_chat4_main.js";
</script>
 
<script>
    // Это файл: ws_chat4.html - скрипт2 обычный скрипт
 
    Здесь глобальные переменные и код инициализации
0
 Аватар для voraa
1245 / 1145 / 178
Регистрация: 21.01.2024
Сообщений: 5,264
18.01.2025, 18:06
Лучший ответ Сообщение было отмечено LUN2 как решение

Решение

Цитата Сообщение от LUN2 Посмотреть сообщение
В таком как мне сделать, чтобы и скрипт-не_модуль были в html-файле и ф-ции, вынесенные в другие модули, были видны в этом скрипте-не_модуле ???
Никак.
Такое не получится.
Вариант только такой.
В html обычный скрипт с глобальными переменными, объявленными через var
HTML5
1
2
3
4
5
6
<script>
   // Эти переменные будут видны в модулях
   var m1;
   var ar1 = [];
.....
</script>
И скрипт - модуль, куда импортировать необходимое из других модулей.
HTML5
1
2
3
4
5
6
7
8
<script type="module">
   import {f1} from "./mod1.js"
   import * as mod2 from "./mod2.js"
....
   m1 = f1(42);
   ar1.push(...mod2.f2(m1));
.....
</script>
Но с таким же успехом его можно тоже вынести в отдельный файл, как модуль, например mainmod.js
и в html просто подключить его
HTML5
1
<script src="mainmod.js" type="module"></script>
Добавлено через 1 час 54 минуты
Цитата Сообщение от voraa Посмотреть сообщение
В html обычный скрипт с глобальными переменными, объявленными через var
Оказывается через let и const тоже можно.
1
3 / 3 / 0
Регистрация: 15.08.2014
Сообщений: 481
18.01.2025, 19:28  [ТС]
voraa, спасибо!
0
3 / 3 / 0
Регистрация: 15.08.2014
Сообщений: 481
19.01.2025, 14:43  [ТС]
voraa, как в таком случае объявлять обработчики onclick в теге button ?

Например, до реструктуризации в модули, в html-файле было объявление:

HTML5
1
<button type="button" id="hello" onclick="start()"> Старт </button>
Функция start() теперь вынесена в модуль - ws_chat4_main.js и стала не видна из тега button,
т.к. у модуля своя область видимости.

Как теперь ее вызывать ?

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

Единственное решение, которое я начитал:
вынести ссылку на start() из тега button в код модуля ws_chat4_main.js и установить
обработчик через addEventListener, переделав таким образом, каждую кнопку, т.к. в каждой onclick
объявлен в теге button.
Это довольно неудобно.

Можно ли в теге button как-то указать, что обработчик необходимо брать из модуля ws_chat4_main.js ?
0
Молодой техлид)
Эксперт JSЭксперт HTML/CSS
 Аватар для mr_dramm
1818 / 1056 / 329
Регистрация: 17.07.2021
Сообщений: 2,147
Записей в блоге: 14
19.01.2025, 15:23
Цитата Сообщение от LUN2 Посмотреть сообщение
как в таком случае объявлять обработчики onclickв теге button?
через addEventListener модули видят DOM
1
 Аватар для voraa
1245 / 1145 / 178
Регистрация: 21.01.2024
Сообщений: 5,264
19.01.2025, 17:32
Цитата Сообщение от LUN2 Посмотреть сообщение
Можно ли в теге button как-то указать, что обработчик необходимо брать из модуля ws_chat4_main.js ?
Нет. Надо в модуле назначать через addEventListener (хотя и через onclick можно тоже, но в модуле, где видна эта функция)
1
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
19.01.2025, 17:32
Помогаю со студенческими работами здесь

Повторная смена картинки и вообще загрузка не работает
Привет профессионалам! Всё работает отлично, только до повторной попытки сменить картинку. Как...

Как избежать закрытие popup окна?
проблема следующая: я создаю popup окно с помощью window.createPopup(). Окно закрывается, если...

Как избежать написания многочисленных идентичных кусков кода
Доброго времени суток. Есть страница, на которой 27 кнопок. При нажатии на любую из них должна...

Как избежать смены вида курсора?
пишу javascript-код, позволяющий рисовать некие детали на канве мышью. Но вот незадача- если...

Как избежать PHP?
Добрый день! В мечтах хочу стать фул-стаковым веб разработчиком, но вот учить PHP, хоть убей, не...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
16
Ответ Создать тему
Новые блоги и статьи
сукцессия микоризы: основная теория в виде двух уравнений.
anaschu 11.01.2026
https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/
WordPad для Windows 11
Jel 10.01.2026
WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .
Classic Notepad for Windows 11
Jel 10.01.2026
Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .
Почему дизайн решает?
Neotwalker 09.01.2026
В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .
Модель микоризы: классовый агентный подход 3
anaschu 06.01.2026
aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114
Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR
ФедосеевПавел 06.01.2026
Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .
Модель микоризы: классовый агентный подход 2
anaschu 06.01.2026
репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .
Расчёт токов в цепи постоянного тока
igorrr37 05.01.2026
/ * Дана цепь постоянного тока с сопротивлениями и источниками (напряжения, ЭДС и тока). Найти токи и напряжения во всех элементах. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа и. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru