Я занимаюсь редизайном приложения, которое могло бы хорошо подойти для SPA.Изучив код, я обнаружил, что предыдущие разработчики использовали метод JQuery/JavaScript load()
для включения .html
файлов.Например, у них есть header.html
и footer.html
.На странице загрузки .html
загружаются в контейнеры div.Пример:
<!DOCTYPE html>
<html>
<head>
<title>App Home Page</title>
</head>
<body>
// Body content
<script>
$(function () {
$('#header').load('includes/header.html');
$('#footer').load('includes/footer.html');
});
</script>
</body>
</html>
В этом случае загрузка .html
не оказывает никакого влияния на события JavaScript, поскольку ни один из элементов в этих двух файлах не имеет событий.Например, если я добавлю функцию onClick
в один из элементов header.html
, это будет проблемой.Содержимое DOM будет загружено до script
внизу тега body
.У меня есть вопросы по поводу этих методов:
- Это хороший подход для загрузки файлов
.html
с использованием JavaScript для этой цели? - Есть ли причина загружать
.html
с помощью JavaScript, кроме более чистого кода и более простого обслуживания? - Если есть преимущества загрузки
.html
с помощью JavaScript, как предотвратить состояние гонки в случаегде DOM загружается перед содержимым скрипта?
Я пытаюсь понять, почему этот подход был бы хорошим вариантом, и если сегодня это хорошая практика в веб-разработке одностраничных приложений.Еще одна вещь, которую я забыл упомянуть, это то, что я использую только языки интерфейса для этого проекта.Здесь не задействован язык на стороне сервера.