Заглавная страница
Избранные статьи
Случайная статья
Познавательные статьи
Новые добавления
Обратная связь

ТОП 10 на сайте

Приготовление дезинфицирующих растворов различной концентрации

Техника нижней прямой подачи мяча.

Франко-прусская война (причины и последствия)

Организация работы процедурного кабинета

Смысловое и механическое запоминание, их место и роль в усвоении знаний

Коммуникативные барьеры и пути их преодоления

Обработка изделий медицинского назначения многократного применения

Образцы текста публицистического стиля

Четыре типа изменения баланса

Задачи с ответами для Всероссийской олимпиады по праву

Мы поможем в написании ваших работ!

ЗНАЕТЕ ЛИ ВЫ?

Влияние общества на человека

Приготовление дезинфицирующих растворов различной концентрации

Практические работы по географии для 6 класса

Организация работы процедурного кабинета

Изменения в неживой природе осенью

Уборка процедурного кабинета

Сольфеджио. Все правила по сольфеджио

Балочные системы. Определение реакций опор и моментов защемления

Главная Избранные Случайная статья Познавательные Новые добавления Обратная связь FAQ

Проблема 4. Связи между файлами исходного кода

⇐ ПредыдущаяСтр 3 из 5Следующая ⇒

Мы подошли к проблеме связанности исходных файлов нашего приложения. Если внимательно к ним присмотреться, окажется, что они представляют определённую иерархию связей. В ней одни исходные файлы зависят от вторых, а третьи — полностью независимые и в дополнительных внешних файлах не нуждаются:

Это примерная схема и её цель — показать возможные варианты связей файлов исходного кода в абстрактном веб-приложении

Но если присмотреться к нашему приложению, пример исходного приводится в предыдущем разделе, окажется, что каждый из файлов загружается из html-файла. Это значит, что структура приложения плоская, а сами файлы с кодом ничего не знают об остальных нужных для его работы файлах. Это ещё принято называть зависимостями, от английского dependencies.

Наш html-файл, наоборот, владеет слишком большой частью приложения. Ему приходится знать о зависимостях кода, хотя он никак напрямую их и не использует:

На этой схеме нет «мёртвых» зависимостей, то есть тех файлов, подключение которых мы указали в примерах исходного кода в предыдущей главе, но которые в действительности не используются

Чтобы решить эту проблему, нужно добавить новые теги <script> динамически, с использованием методов манипулирования DOM-деревом. И браузер, увидев новый тег, тут же подгрузит внешний файл, на который он указывает.

Напишем простую функцию для добавления в наш документ новые скрипты:

Файл load.js:

function loadScript(url, callback) { const element = document.createElement("script"); element.type = "text/javascript"; element.src = url; element.onload = callback; document.body.appendChild(element); }

Обратим внимание на функцию обратного вызова (callback) и повесим её на событие onload нашего нового элемента. Нужно, чтобы наш файл, запрашивающий загрузку другого файла, продолжил исполняться, только когда код успешно загрузится. При этом не забываем, что все операции, связанные с сетью, асинхронные.

Файл timer.html:

<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="css/main.css"> <script src="js/main.js"> </script> <script src="js/load.js"> </script> <script defer src="js/timer.js"> </script>  </head> <body>  </body> </html>

Файл timer.js:

loadScript("js/common.js", () => { loadScript("<https://cdn.jsdelivr.net/npm/luxon@1.25.0/build/global/luxon.min.js>", () => { console.log("timer.js ") }) })

Файл common.js:

console.log("common.js");

Если запустим этот код в браузере, то увидим, что последовательность загрузки файлов и вывода текста в консоль примет вид:

Сначала из timer.html загружаются main.js и load.js (с функцией loadScript), потом timer.js, требуя загрузить файлы common.js и luxon, и лишь после этого выполняется код внутри функции обратного вызова.

Отлично, мы решили часть проблем. Теперь наш html-файл знает только о тех файлах, с которыми взаимодействует напрямую, а js-файлы могут загружать нужный им для работы код.

Такая структура имела бы и более сложный вид, если, например, common.js мог (чисто теоретически) загрузить какой-то дополнительный код, требуемый для его работы.

Но наша простая реализация функции loadScript далека от идеала. Например, она принимает всего один файл, из-за чего, при загрузке нескольких внешних файлов, приходится делать вложенные функции. Чтобы это исправить, нужно передать в неё массив путей к файлам.

Нерешёнными остаются вопросы, касающиеся:

l рекурсивной загрузки файлов, когда файл А зависит от файла В, а файл В — от файла А;

l запроса уже загруженных файлов, когда файл А зависит от В, и C зависит от В.

⇐ Предыдущая 1 234 5 Следующая ⇒

Читайте также:

Алгоритмические операторы Matlab

Конструирование и порядок расчёта дорожной одежды

Исследования учёных: почему помогают молитвы?

Почему терпят неудачу многие предприниматели?

Последнее изменение этой страницы: 2022-01-22; просмотров: 31; Нарушение авторского права страницы; Мы поможем в написании вашей работы!

infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 3.147.65.65 (0.005 с.)