Я пробую делать spa-сайт с помощью обычного JavaScript. Выглядит это примерно так:
Есть центральный пустой блок:
<div id="main"></div>
и есть десяток кнопок в меню. Когда кликаешь на кнопку, должно подгружаться содержимое центрального блока. Соответственно, есть десяток html-файлов, где хранится содержимое состояний центрального блока.
Подгружаю html код из этих файликов с помощью фетча и вставляю его в центральный блок. Примерно так:
let elem = document.getElementById('main')
export async function fetchHTML(address, elem) {
return fetch(address)
.then(
response => {
return response.text();
},
error => {
console.log('Ошибка фетча', error)
})
.then((response) => {
elem.innerHTML = response;
})
}
Все работает, кликаю на кнопки, содержимое файлов загружается в центральный див. Красота, это и есть SPA.
Засада заключается в том, что код, вставляемый с помощью innerHTML, не работает. В html-файлах может быть сколько угодно <script>, все они совершенно инертны. При этом, в каждом файле может быть js-код, который обслуживает именно этот файл. Например, делает что-то с местными дивами, имеющими определенный id.
Такое поведение innerHTML неприятно. Было бы хорошо и логично сразу держать в одном файле и html, и js. Можно было бы даже делать отладку одного файла.
Однако, хотелось бы динамически подгружать и js-код, т.к. это и подразумевается в "рекламных" статьях про SPA. Подгрузка только статического HTML неинтересна.
Рядом с каждым html-файлом я насоздавал по js-файлу, который обслуживает этот html-файл. Как его запустить? Если простые листенеры на клик, которые обслуживают класс элементов, то проблем нет, достаточно запустить import(jsAddress).
А запустить код, который должен обработать html-код в момент запуска, например, обслужить конкретный id, какие-то элементы создать, и что-то там собрать - не получается.
Я пробовал так, например:
import(jsAddress)
.then((module) => module.run())
Нужно, чтобы js-код запускался каждый раз, когда подгружается html-код. А не только первый раз, когда загружается модуль.
В общем, пока получается не SPA, как его рисуют, а бесполезная загружалка html.
Я начинаю использовать Vue. Там та жа история - бесполезно что-то вставлять в html-код, который будет в центральном диве. Vue его не сможет обслужить. И если нужно обслужить конкретный элемент, с конкретным id, пока его нет в центральном диве, экземпляр Vue для него не создать, будет выдавать ошибку, что нет такого id.
(Сборщиками кода пока не пользовался - и не очень понимаю пока, зачем они. Хотя может быть в них и находится ответ. Но по идее, это должно как-то в обычном JavaScript решаться.)
По крайней мере, пока не получилось. 
