Есть две стратегии, которые вы можете использовать для решения своей проблемы. У них обоих есть свои плюсы и минусы, но в первую очередь они зависят от одного вопроса: используете ли вы упаковщик или нет?
Использование внешнего файла HTML в качестве шаблона и внедрение его на страницу
Один из подходов может заключаться в том, чтобы написать файл шаблона, запросив его через javascript и затем внедрив его в DOM. Проблема с этим методом заключается в том, что вы должны настроить / свой сервер, чтобы эта бесполезная страница stati c была доступна через запрос, но тогда вы могли бы легко создать подкаталоги, такие как /static/templates/navbar.html.
Это краткий пример этого подхода:
fetch('/static/templates/navbar.html').then(response => {
if(response.ok)
return response.txt();
}).then(page => {
document.body.innerHTML += page;
});
Очевидные ограничения этого метода заключаются в том, что вам необходимо создать файл шаблона HTML для каждого компонента и загрузить их в порядке , в противном случае, ваша DOM будет беспорядочной (1), и тогда вам нужно будет загрузить все эти шаблоны, которые потребуют дополнительной полосы пропускания.
Рефакторинг ваших тегов с помощью javascript и их внедрение на страницу
В случае, если вы используете сборщик, я честно считаю, что этот подход более устойчив, поскольку вы не запрашиваете какой-либо другой файл, вместо этого вы можете создать эти элементы через javascript, а затем загрузить их через другой скрипт. Скрипт будет содержать функцию (что-то вроде init () или аналогичную), которая будет вставлять элементы в DOM.
const nav = document.createElement('nav');
const ul = document.createElement('ul');
ul.id = 'menu';
const li01 = document.createElement('li');
const a01 = document.createElement('a');
a01.href = 'watchlist.html';
a01.innerText = 'Watchlist';
li01.appendChild(a01);
ul.appendChild(li01);
nav.appendChild(ul);
И отсюда вы можете понять, как это работает. Преимущество этого подхода в том, что вам не нужно запрашивать какой-либо внешний файл и вы можете записать весь этот код внутри другого файла, который сборщик автоматически скомпилирует в один. js (2). С другой стороны, если ваше меню огромно, ваше время на интерактивность может увеличиться из-за всех вычислений javascript.
Используйте javascript фреймворк
Как уже было сказано другим пользователем , используются различные фреймворки, которые позволяют создавать шаблоны, называемые компоненты , а затем загружать их динамически, такие как React, Preact, VueJS, Angular и многие другие. Изучение хотя бы одного из них абсолютно поможет вам, если вы захотите найти работу в веб-разработке. Обратной стороной этого подхода является то, что вы в основном внедряете в свой код множество функций, которые, возможно, никогда не будете использовать, что, очевидно, будет медленнее по сравнению с vanilla javascript.
Выбирайте!
(1) помните, что выборка является асинхронной функцией, и поэтому она не загружает ресурсы по порядку. (2) если по какой-то причине вы не хотите использовать сборщик, вы все равно можете загрузить файл с помощью другого тега скрипта.