Как работает async js?

Question

[lilwings]

Всем привет!)

Такой вопрос возник.
У меня много модулей es6 которые собираются через webpack в один файл, и там спокойно хранятся, а к модулю можно спокойно добраться через объект указанный в webpack.

Так пример из жизни:

В header страницы помещен собранный скрипт с async загрузкой.
Но так же на странице внизу(может быть и в середине) есть класс который использует модули из файла который подключен в header async.

Может ли случиться так что файл не успеет загрузиться и классы на странице которые используют классы из файла не будут работать?

P.S: Мне кажется да, как избежать ошибки?

P.S.S: В бандле(вроде так называеться собранный файл) есть класс который генерирует preloader, и еще очень много классов, и прямо после body класс обращается к классу из бандла, а bunndle еще не загружен, что в такой ситуации делать?

Answer 1

[historydev]

Не подключать файлы в разброс.

Comments

[lilwings]

Они не в разброс, а просто класс на странице, удобнее чтобы он был там, чем его к модулям, хотя сейчас уже сомневаюсь))

[historydev]

lilwings, погуглите информацию о иерархии проектов, как,что, где.

Answer 2

[Ivan Bogachev]

У тега script кроме атрибута async есть еще defer. Скрипты с этим атрибутом загружаются все асинхронно, но выполняются потом в том порядке, в котором записаны в html (только они все должны быть отдельными файлами, не инлайновыми скриптами).

Также, если у вас уже есть много скриптов, да еще и месиво из инлайново вставленных и асинхронно подгружаемых, причем все друг от друга зависят и оперативно это не починить, то можно организовать маленькую систему событий, которая будет в себе хранить информацию о том, кто загрузился, а кто - нет (чтобы не получился классический callback-hell). Она должна быть первым скриптом на странице. А загрузившиеся потом скрипты будут ей сообщать "я загрузился", а потом у нее спрашивать "ну что, вон тот уже загрузился?" а она такая "да", и они будут выполняться сразу, или "нет, пока нет", а они такие "ну ок, когда загрузится, скажи". Что-нибудь в таком духе. Также эта штука может помогать при отладке, чтобы понимать, что реально произошло на странице, а что еще нет.

Comments

[lilwings]

Пока что все в модулях инлайнового ничего нет, вот решил отказаться от этой идеи, лучше пусть все в модулях будет)).

P.S: Спасибо за ответ))

[Vann Damm]

lilwings, В чём смысл подключать всё скриптами , и париться за их очерёдность если всё можно собрать на React и не париться? P.S новичок

[lilwings]

effect_tw, ну я не подключаю скриптами, у меня на выходе один js файл, все собираеться автоматом. Да вы и правы, я ангуляр люблю, его использую, но не всегда есть проекты под него, вот нужно знать native технологии. Если не ошибаюсь то React тоже через webpack все собирает))

[Vann Damm]

lilwings, Наверное доработка старых проектов на native? По тому что не вижу смысла начинать делать сейчас spa на нативном js, когда есть тот же angular?

[lilwings]

effect_tw, Суть в том что это не spa, spa на нативе я бы и перед смертью делать не стал)) Обычное мультистраничное приложение на yii2, но там в js тоже должен быть порядок

[lilwings]

effect_tw, Вот такая архитектура js для MPA:
es6
---popup
----------js
----------html
---loader
---------js
---------html
---animate
---------js
----load-comment
---------js
---------html
---select-item
----------js
Index.js

index.js - в него все нужное экспортируеться и на выходе один js файл с модулями(классами)

[Vann Damm]

lilwings, Понял, спасиббо что объяснил