Как динамически подгружать js-код для SPA?

[AlexLF]

Это именно и есть не SPA, а загружалка html. Какая то имитация iframe.
SPA не грузит постоянно html код с сервера. С сервера должны загружаться данные. А на основании этих данных приложение формирует страницу. Если, что и подгружается, то это файлы js, css, в том случае, если они нужны, для блоков, которые используются редко.

Да, пожалуй, SPA это когда загружается только JSON.

У меня стояла задача менять состояния центрального блока main. Для этого - раньше - я складывал в main дивы со всеми возможными состояниями. И делал видимым только один див, который должен быть активным на этот момент. Не знаю, делают ли так, но это вполне работало.

Меня не устраивало, как собираются все дивы в центральном блоке. Не делать же один большой див. Я разбивал на разные php-файлы, отвечающие разным состояниям, и собирал с помощью стопки функций include ''file_name.php" с помощью php. js-код в php-файлах работал без проблем.

Это работало, но приходилось следить в разных местах, чтобы файлы всех состояний были. В общем, некрасиво, и php я не люблю. Решил заменить на подгрузку с помощью фетча.

Но, пожалуй, вернусь к единоразовой загрузки дивов со всеми состояниями, и к загрузке всего js-кода. Пускай загружается, и так и лежит. Если загружать и уничтожать в innerHTML код - полагаю, мне это в будущем отзовется разными непредсказуемостями. Тот же Vue, полагаю, тоже отреагирует негативно, если после запуска "подгрузить еще немного" Vue-объектов.

[AlexLF]

AlexLF,
https://javascript.ru/forum/misc/791...ri-nego-2.html

Спасибо. Не очень разобрался, правда, с DOMParser. К тому же, это пока экспериментальная функция. Вот здесь человек с другого форума написал (вероятно) похожее решение без DOMParser - может быть, кому-то пригодится:
https://www.cyberforum.ru/javascript...l#post15443073

[AlexLF]

А зачем модули использовать, никто же не заставляет?

"Когда я пришел" в JavaScript, ES-модули уже были. Я к ним приладился - удобно разбивать код, и передавать-принимать данные из модуля в модуль. И на "законном" основании, без всяких "прием модуль в JavаScript", немедленное выполнение на месте и прочей истории.

Я не использовал особо никогда стопку <script src='...'> для запуска кода. У меня js-код запускается как стопка функций, которые импортируются из разных модулей.

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

[voraa]

Для этого - раньше - я складывал в main дивы со всеми возможными состояниями. И делал видимым только один див, который должен быть активным на этот момент. Не знаю, делают ли так, но это вполне работало.

Можно все "дивы со всеми возможными состояниями" помещать в <template> и потом копировать нужное в главный див.
Необходимый js код можно погружать по мере необходимости, если не хотите грузить все сразу.

У меня js-код запускается как стопка функций, которые импортируются из разных модулей.

Так они все равно импортируются из какого то модуля.
И совсем не обязательно делать так, что бы код выполнялся сразу при загрузке модуля на автомате. Можно обернуть его в функцию и вызывать ее после загрузки модуля, когда требуется.
Т.е. модуль грузится один раз. А функцию вызывать каждый раз, когда вы визуализируете див, связанный с этим модулем.

[AlexLF]

Можно все "дивы со всеми возможными состояниями" помещать в <template> и потом копировать нужное в главный див.
Необходимый js код можно погружать по мере необходимости, если не хотите грузить все сразу.

С <template> это мысль. Как раз повод попробовать. Я почему-то думал, что он только к теневому DOM относится.

[AlexLF]

C <template> не получается, попробовал.

Если в одном и том же файле, то все нормально.

Но если в другом файле, то template - это не HTMLElement или что-то подобное, а просто код (строка), который нужно еще куда-то вставлять. И здесь не пройти мимо хотя бы одного innerHTML, и js-код получается неработающий.

---

Пока обхожусь тем, что делаю два файла - html и js отдельно. Html загружаю и вставляю через innerHTML, а js-файл запускаю через динамический импорт - import('jsAddress'). И не перезатираю дивы с состояниями центральной панели, только делаю их невидимыми. js-код работает, включая Vue.