Js подключить несколько файлов

Обновлено: 06.07.2024

У меня есть домашняя работа для моего класса программирования, которая требует, чтобы я работал с классами JS. Кроме того, я должен работать с HTML, а классы должны быть определены в отдельном файле .js. Я сделал всю работу, и она работает нормально, если классы определены в одном и том же файле .js, но перестает работать, как только я вставляю код в другой файл. Я пытался импортировать классы из основного файла, но я мог заставить его работать (я пробовал разные коды импорта, потому что я нашел разные ответы на этот вопрос в Google, но никто не работал, поэтому я спрашиваю здесь ) . Я полагаю, что это, вероятно, потому что я делаю что-то неправильно при импорте, но я просто не могу найти ошибку.

3 ответа

Хотя ваш код работает, хранение файлов js в верхней части HTML приведет к задержке времени загрузки страницы. В простом сценарии, таком как домашнее задание, не нужно беспокоиться, но в крупных проектах это становится критически важным.

И, читая ваш код, он просто запускается, когда все страницы уже загружены, поэтому нет необходимости помещать его в голову.

Сначала я поделюсь некоторым кодом. Это моя голова HTML:

Это мой соответствующий код на первом JS:

И это код моего второго файла JS (тот, что с классом):

Я начну говорить, что, хотя я выяснил проблему, я не понимаю, почему это происходит.

Хорошо, как вы можете видеть на последнем фрагменте кода, параметры имеют то же имя, что и атрибуты класса. Если бы я попытался скопировать код в первый файл JS, он бы работал без каких-либо проблем, но как только я работаю с этим кодом в отдельном файле JS, он перестает работать. Перебрав каждую часть кода, я в итоге изменил имя параметра, чтобы оно отличалось от атрибутов класса, теперь это выглядит так:

И этот код работает совершенно нормально, ничего не меняя в остальных файлах (ни в первом, ни в HTML-файле).

Если кто-то понимает больше, чем я, почему это происходит, не стесняйтесь редактировать этот ответ.

Просто на обычном PHP написать функцию и в цикле пройтись по массиву и через require_once подключить все файлы.

Слышал о Require.js, но там какие то колбэки прописывать надо после каждого подключения. Кто какой подход использует


66k 154 154 золотых знака 66 66 серебряных знаков 203 203 бронзовых знака 533 1 1 золотой знак 6 6 серебряных знаков 23 23 бронзовых знака

Подключение некритичных скриптов уже на клиенте:

А чем это лучше PHP?, кроме того через require_once не нужно делать проверку на уже подключенный файлы, т.к функция сама выдаст исключение если повторно подключается одинаковый файл Как-то влияет на время отрисовки страницы, что-то около SEO. Отложенная загрузка позволит сначала отрисовать страницу без ожидания скриптов, и лишь потом дожидаться их догрузки

А по поводу подключения js в нужный момент то чем не вариант JQ ?


1,618 10 10 серебряных знаков 14 14 бронзовых знаков В вашем примере, колбэк done произойдет когда скрипт загрузиться или выполниться? Скрипты выполнятся в тот же момент как будут загружены. Да все верно , это всего лиш пример того как можно загрузить скрипты и выполнить их только после того как все объекты будут аккуратно загружены . Событие которое может инициализировать этот процесс может быть любым , предположим пользователь подвел мышку к диву где есть кнопка , после загрузки скриптов кнопка станет активной . Разве это не экономия ресурсов , подгружать только тогда - когда есть надобность .

RequireJS всё-таки хорошее решение именно для вашей задачи. Скачайте себе сам require.js, в теле страницы единственный тег:

А в скрипте загрузки scripts/main.js что-то типа:

Другой подход. Если все скрипты грузятся с вашего сервера, можно собрать их в один файл и минифицировать. Понадобится, скорее всего, node.js и напр. модуль UglifyJS.

Редактировать скрипты будете по-отдельности, а потом запускать команду или маленький деплой скрипт, который их соберёт и сожмёт в единственный js файл, который и грузится обычным образом из странице. Можно даже сделать так, чтобы скрипт «следил» за папкой, где вы редактируете код, и автоматом собирал все после каждого сохранения.

Осваивайте профессию, начните зарабатывать, а платите через год!


Курсы Python Ак­ция! Бес­плат­но!


Станьте хакером на Python за 3 дня


Веб-вёрстка. CSS, HTML и JavaScript



Курс Bootstrap 4


Станьте веб-разработчиком с нуля

В этой главе мы займемся размещением сценариев в HTML-документе, чтобы иметь возможность использовать их для оперативной модификации HTML-документа. Для вставки JavaScript-кoдa в НТМL-страницу обычно используют элемент <script> .

Первая программа

Чтобы ваша первая пpoгpaммa (или сценарий) JavaScript запустилась, ее нужно внедрить в НТМL-документ.
Сценарии внедряются в HTML-документ различными стандартными способами:

  • поместить код непосредственно в атрибут события HTML-элемента;
  • поместить код между открывающим и закрывающим тегами <script> ;
  • поместить все ваши скрипты во внешний файл (с расширением .js), а затем связать его с документом HTML.

JavaScript в элементе script

Самый простой способ внедрения JavaScript в HTML-документ – использование тега <script> . Теги <script> часто помещают в элемент <head> , и ранее этот способ считался чуть ли не обязательным. Однако в наши дни теги <script> используются как в элементе <head> , так и в теле веб-страниц.

Таким образом, на одной веб-странице могут располагаться сразу несколько сценариев. В какой последовательности браузер будет выполнять эти сценарии? Как правило, выполнение сценариев браузерами происходит по мере их загрузки. Браузер читает HTML-документ сверху вниз и, когда он встречает тег <script> , рассматривает текст программы как сценарий и выполняет его. Остальной контент страницы не загружается и не отображается, пока не будет выполнен весь код в элементе <script> .

Обратите внимание: мы указали атрибут language тега <script> , указывающий язык программирования, на котором написан сценарий. Значение атрибута language по умолчанию – JavaScript, поэтому, если вы используете скрипты на языке JavaScript, то вы можете не указывать атрибут language .

JavaScript в атрибутах событий HTML-элементов

Вышеприведенный сценарий был выполнен при открытии страницы и вывел строку: «Привет, мир!». Однако не всегда нужно, чтобы выполнение сценария начиналось сразу при открытии страницы. Чаще всего требуется, чтобы программа запускалась при определенном событии, например при нажатии какой-то кнопки.

В следующем примере функция JavaScript помещается в раздел <head> HTML-документа. Вот пример HTML-элемента <button> с атрибутом события, обеспечивающим реакцию на щелчки мышью. При нажатии кнопки генерируется событие onclick.

Внешний JavaScript

Если JavaScript-кода много – его выносят в отдельный файл, который, как правило, имеет расширение .js .

Чтобы включить в HTML-документ JavaScript-кoд из внешнего файла, нужно использовать атрибут src (source) тега <script> . Его значением должен быть URL-aдpec файла, в котором содержится JS-код:

В этом примере указан абсолютный путь к файлу с именем script.js, содержащему скрипт (из корня сайта). Сам файл должен содержать только JavaScript-кoд, который иначе располагался бы между тегами <script> и </script> .

По аналогии с элементом <img> атрибуту src элемента <script> можно назначить полный URL-aдpec, не относящийся к домену текущей НТМL-страницы:

На заметку: Подробнее о путях файлов читайте в разделе «Абсолютные и относительные ссылки».

Чтобы подключить несколько скриптов, используйте несколько тегов:

Примечание: Элемент <script> с атрибутом src не может содержать дополнительный JаvаSсriрt-код между тегами <script> и </script> , хотя внешний сценарий выполняется, встроенный код игнорируется.

Независимо от того, как JS-код включается в НТМL-документ, элементы <script> интерпретируются браузером в том порядке, в котором они расположены в HTML-документе. Сначала интерпретируется код первого элемента <script> , затем браузер приступает ко второму элементу <script> и т. д.

Внешние скрипты практичны, когда один и тот же код используется во многих разных веб-страницах. Браузер скачает js-файл один раз и в дальнейшем будет брать его из своего кеша, благодаря чему один и тот же скрипт, содержащий, к примеру, библиотеку функций, может использоваться на разных страницах без полной перезагрузки с сервера. Кроме этого, благодаря внешним скриптам, упрощается сопровождение кода, поскольку вносить изменения или исправлять ошибки приходится только в одном месте.

Примечание: Во внешние файлы копируется только JavaScript-код без указания открывающего и закрывающего тегов <script> и </script> .

Расположение тегов <script>

Вы уже знаете, что браузер читает HTML-документ сверху вниз и, начинает отображать страницу, показывая часть документа до тега <script> . Встретив тег <script> , переключается в JavaScript-режим и выполняет сценарий. Закончив выполнение, возвращается обратно в HTML-режим и отображает оставшуюся часть документа.

Если на странице используется много скриптов JavaScript, то могут возникнуть длительные задержки при загрузке, в течение которых пользователь видит пустое окно браузера. Поэтому считается хорошей практикой все ссылки нa javaScript-cцeнapии указывать после контента страницы перед закрывающим тегом <body> :

Такое расположение сценариев позволяет браузеру загружать страницу быстрее, так как сначала загрузится контент страницы, а потом будет загружаться код сценария.
Для пользователей это предпочтительнее, потому что страница полностью визуализируется в браузере до обработки JavaScript-кoдa.

Отложенные и асинхронные сценарии

Как отмечалось ранее, по умолчанию файлы JavaScript-кода прерывают синтаксический анализ (парсинг) HTML-документа до тех пор, пока скрипт не будет загружен и выполнен, тем самым увеличивая промежуток времени до первой отрисовки страницы.
Возьмём пример, в котором элемент <script> расположен где-то в середине страницы:

В этом примере, пока пока браузер не загрузит и не выполнит script.js, он не покажет часть страницы под ним. Такое поведение браузера называется «синхронным» и может доставить проблемы, если мы загружаем несколько JavaScript-файлов на странице, так как это увеличивает время её отрисовки.

А что, если HTML-документ на самом деле не зависит от этих JS-файлов, а разработчик желает контролировать то, как внешние файлы загружаются и выполняются?

Кардинально решить проблему загрузки скриптов помогут атрибуты async и defer элемента <script> .

Атрибут async

Async используется для того, чтобы указать браузеру, что скрипт может быть выполнен «асинхронно».

При обнаружении тега <script async src="https://wm-school.ru/js/"> браузер не останавливает обработку HTML-документа для загрузки и выполнения скрипта, выполнение может произойти после того, как скрипт будет получен параллельно с разбором документа. Когда скрипт будет загружен – он выполнится.

Для сценариев с атрибутом async не гарантируется вы­полнение скриптов в порядке их добавления, например:

В примере второй скрипт может быть выполнен перед первым, поэтому важно, что­бы между этими сценариями не было зависимостей.

Примечание: Атрибут async используется, если нужно разрешить браузеру продолжить загрузку страницы, не дожидаясь завершения загрузки и выполнения сценария.

Атрибут defer

Атрибут defer откладывает выполнение скрипта до тех пор, пока вся HTML-страница не будет загружена полностью.

Как и при асинхронной загрузке скриптов — JS-файл может быть загружен, в то время как HTML-документ ещё грузится. Однако, даже если скрипт будет полностью загружен ещё до того, как браузер закончит обработку страницы, он не будет выполнен до тех пор, пока HTML-документ не обработается до конца.

Несмотря на то, что в приведенном примере теги <script defer src="https://wm-school.ru/js/"> включены в элемент <head> HTML-документа, выполнение сценариев не начнется, пока браузер не дойдет до закрыва­ющего тега </html> .

Кроме того, в отличие от async , относительный порядок выполнения скриптов с атрибутом defer будет сохранён.

Применение атрибута defer бывает полезным, когда в коде скрипта предусматривается работа с HTML-документом, и разработчик должен быть уверен, что страница полностью получена.

Примечание: Атрибуты async и defer поддерживаются только для внешних файлов сценариев, т.е. работают только при наличии атрибута src .

Итоги

  • JavaScript можно добавить в HTML-документ с помощью элемента <script> двумя способами:
    • Определить встроенный сценарий, который располагается непосредственно между парой тегов <script> и </script> .
    • Подключить внешний файл с JavaScript-кодом через <script src="https://wm-school.ru/js/%D0%BF%D1%83%D1%82%D1%8C"></script> .

    Задачи

    Всплывающее окно

    Перед вами простой HTML-документ. Разместите в теле НТМL-страницы сценарий, выводящий всплывающее окно с надписью: "Привет, javascript!"


    Эпоха тёплого лампового WEB 1.0 давно прошла, и в последнее время мы имеем дело со страницами, которые кишат так называемой динамичностью. Динамичность может быть обеспечена при помощи JavaScript, VbScript и плагинами вроде Java, Flash, Silverlight. В этой статье я хочу затронуть одну из возможных оптимизаций web-сайта — объединение всех javascript файлов в один.

    Зачем?

    1. Повышение скорости загрузки страницы.
    2. Снижение нагрузки на сервер.

    Касательно снижения нагрузки на сервер — всё сложнее. Снижение числа запросов в любом случае улучшает ситуацию, но вот насколько — я сказать затрудняюсь, т.к. я не админ. Я полагаю, что для снижения нагрузки можно найти массу более простых и действенных решений. Возможно, это, так называемая, экономия спичек на фоне пожара. Но в качестве побочного эффекта — сгодится.

    • Обернуть все файлы анонимными функциями, которые нужно будет вызывать единожды, по мере необходимости. Либо писать модульный код, где каждый файл может содержать 1 или несколько модулей, которые сами по себе не запускаются.
    • Весь код каждого файла поместить в строку, которую eval-ить по первому требованию.


    Но у меня не было выбора, т.к. используемый движок кишит кодом «сомнительного качества». Такой код я не могу обернуть в анонимную функцию, потому, что:


    Если обернуть оба файла в анонимные функции и после этого выполнить, то мы получим ошибку — браузер не сможет найти some. Причина кроется в том, что полученный код:


    Вовсе не приводит к window.some !== undefined; Функция some определяется в области видимости (scope) анонимной функции, а вовсе не window, как это было бы, если бы она была определена в отдельном файле. Решение этой проблемы нашлось в jQuery. Дело в том, что выполнить javascript-код в глобальной области видимости можно используя:


    В зависимости от браузера мы вызываем либо execScript, либо запускаем привычный нам eval, задавая ему this равным window. Такой подход используется в jQuery начиная с версии 1.6. В более ранних версиях создавался тег script, в который помещался нужный код, и этот скрипт прикреплялся к документу.

    Сжатие и обфускация

    Параллельно сборке всех файлов в список мы можем над ними поиздеваться. Во первых их можно сжать, во вторых испортить их читабельность. Для этого можно воспользоваться YUI Compressor-ом или любым его аналогом. В конечном итоге мы получаем несколько меньше кода без форматирования (отступы, лишние пробелы, укороченные имена локальных переменных и пр.), сжатого в одну строку.

    Компоновка

    Отладка

    Жизнь программиста была бы прекрасна, если бы не многочисленные баги, которые имеют привычку появляться не вовремя и хорошо прятаться. Тут наша с вами затея терпит крах по всем фронтам. Наш код нечитаем, firebug на нём виснет, и ошибки указывают невесть куда. К тому же большинство переменных имеют вид a, b, c. На помощь к нам приходит Сhrome. Дело в том, что он умеет «де-обфусцировать» код до вполне читабельного состояния (контекстное меню во вкладке Scripts). Например:


    Результат весьма далёк от оригинала, но такое уже можно хотя бы прочитать. К сожалению есть некоторые проблемы с постановкой точек останова и их срабатыванием. Но на безрыбье и рак рыба. Жить можно.

    Финальный штрих


    Использоване

    Локально работать с «единым файлом» чертовски неудобно, поэтому можно написать примерно такой велосипед:

    Разумеется, вариантов реализации подключения скрипта может быть множество. Да и этот можно улучшить. Например, поставив движок сайта на «событийную основу». Т.е. выполнять какой-либо код только тогда, когда выполнился ряд условий, например: были загружены все требуемые модули.

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