Как в js подключить другой js

Внешние скрипты, порядок исполнения

Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

Более новая информация по этой теме находится на странице https://learn.javascript.ru/script-async-defer.

Если JavaScript-кода много – его выносят в отдельный файл, который подключается в HTML:

Здесь /path/to/script.js – это абсолютный путь к файлу, содержащему скрипт (из корня сайта).

Браузер сам скачает скрипт и выполнит.

Можно указать и полный URL, например:

Вы также можете использовать путь относительно текущей страницы. Например, src=»https://learn.javascript.ru/lodash.js» обозначает файл из текущей директории.

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

На заметку:

Как правило, в HTML пишут только самые простые скрипты, а сложные выносят в отдельный файл.

Браузер скачает его только первый раз и в дальнейшем, при правильной настройке сервера, будет брать из своего кеша.

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

Если указан атрибут src , то содержимое тега игнорируется.

В одном теге SCRIPT нельзя одновременно подключить внешний скрипт и указать код.

Вот так не сработает:

Нужно выбрать: либо SCRIPT идёт с src , либо содержит код. Тег выше следует разбить на два: один – с src , другой – с кодом, вот так:

Асинхронные скрипты: defer/async

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

Если браузер видит тег , то он по стандарту обязан сначала выполнить его, а потом показать оставшуюся часть страницы.

Например, в примере ниже – пока все кролики не будут посчитаны – нижний

не будет показан:

    
Начинаем считать:
  
Кролики посчитаны!





  

Такое поведение называют «синхронным». Как правило, оно вполне нормально, но есть важное следствие.

Если скрипт – внешний, то пока браузер не выполнит его, он не покажет часть страницы под ним.

То есть, в таком документе, пока не загрузится и не выполнится big.js , содержимое будет скрыто:

  Этот текст не будет показан, пока браузер не выполнит big.js. 

И здесь вопрос – действительно ли мы этого хотим? То есть, действительно ли оставшуюся часть страницы нельзя показывать до загрузки скрипта?

Есть ситуации, когда мы не только НЕ хотим такой задержки, но она даже опасна.

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

А что, если сервер, с которого загружается внешний скрипт, перегружен? Посетитель в этом случае может ждать очень долго!

Вот пример, с подобным скриптом (стоит искусственная задержка загрузки):

Важная информация не покажется, пока не загрузится скрипт.
  
. Важная информация!

Можно поставить все подобные скрипты в конец страницы – это уменьшит проблему, но не избавит от неё полностью, если скриптов несколько. Допустим, в конце страницы 3 скрипта, и первый из них тормозит – получается, другие два его будут ждать – тоже нехорошо.

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

Поэтому «расположить скрипты внизу» – не лучший выход.

Кардинально решить эту проблему помогут атрибуты async или defer :

Поддерживается всеми браузерами, кроме IE9-. Скрипт выполняется полностью асинхронно. То есть, при обнаружении браузер не останавливает обработку страницы, а спокойно работает дальше. Когда скрипт будет загружен – он выполнится.

Поддерживается всеми браузерами, включая самые старые IE. Скрипт также выполняется асинхронно, не заставляет ждать страницу, но есть два отличия от async .

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

То есть, в таком коде (с async ) первым сработает тот скрипт, который раньше загрузится:

А в таком коде (с defer ) первым сработает всегда 1.js , а скрипт 2.js , даже если загрузился раньше, будет его ждать.

Поэтому атрибут defer используют в тех случаях, когда второй скрипт 2.js зависит от первого 1.js , к примеру – использует что-то, описанное первым скриптом.

Второе отличие – скрипт с defer сработает, когда весь HTML-документ будет обработан браузером.

Например, если документ достаточно большой…

 Много много много букв

…То скрипт async.js выполнится, как только загрузится – возможно, до того, как весь документ готов. А defer.js подождёт готовности всего документа.

Это бывает удобно, когда мы в скрипте хотим работать с документом, и должны быть уверены, что он полностью получен.

async вместе с defer

При одновременном указании async и defer в современных браузерах будет использован только async , в IE9- – только defer (не понимает async ).

Атрибуты async/defer – только для внешних скриптов

Атрибуты async/defer работают только в том случае, если назначены на внешние скрипты, т.е. имеющие src .

При попытке назначить их на обычные скрипты , они будут проигнорированы.

Тот же пример с async :

Важная информация теперь не ждёт, пока загрузится скрипт.





  
. Важная информация!

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

Эти атрибуты давно «в ходу»

Большинство современных систем рекламы и счётчиков знают про эти атрибуты и используют их.

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

Забегая вперёд

Для продвинутого читателя, который знает, что теги можно добавлять на страницу в любой момент при помощи самого javascript, заметим, что скрипты, добавленные таким образом, ведут себя так же, как async . То есть, выполняются как только загрузятся, без сохранения относительного порядка.

Если же нужно сохранить порядок выполнения, то есть добавить несколько скриптов, которые выполнятся строго один за другим, то используется свойство script.async = false .

Выглядит это примерно так:

function addScript(src) < var script = document.createElement('script'); script.src = src; script.async = false; // чтобы гарантировать порядок document.head.appendChild(script); >addScript('1.js'); // загружаться эти скрипты начнут сразу addScript('2.js'); // выполнятся, как только загрузятся addScript('3.js'); // но, гарантированно, в порядке 1 -> 2 -> 3

Более подробно работу со страницей мы разберём во второй части учебника.

Итого

• Скрипты вставляются на страницу как текст в теге , либо как внешний файл через
• Специальные атрибуты async и defer используются для того, чтобы пока грузится внешний скрипт – браузер показал остальную (следующую за ним) часть страницы. Без них этого не происходит.
• Разница между async и defer : атрибут defer сохраняет относительную последовательность скриптов, а async – нет. Кроме того, defer всегда ждёт, пока весь HTML-документ будет готов, а async – нет.

Очень важно не только читать учебник, но делать что-то самостоятельно.

Решите задачки, чтобы удостовериться, что вы всё правильно поняли.

Задачи

Какой скрипт выполнится первым?

важность: 4

В примере ниже подключены два скрипта small.js и big.js .

Если предположить, что small.js загружается гораздо быстрее, чем big.js – какой выполнится первым?

Как подключить файл .js к другому файлу .js?

Как подключить файл .js к другому файлу .js? Я не использую язык JavaScript внутри html-страницы, использую его, как язык для написания мобильных приложений для инструмента DroidScript. И так как долгое время программировал в Python, привык разделять код на полезные модули, да и вообще удобнее работать с небольшими файлами, нежели с трехэтажными мегакодами. Есть выход?

Отслеживать
задан 2 апр 2015 в 13:54
3,278 4 4 золотых знака 35 35 серебряных знаков 49 49 бронзовых знаков

не скажу за серверный js (хотя там вроде за это отвечает requirejs), но в браузерном js широко распространяется практика сборки, когда код из нескольких файлов объединяется в один.

2 апр 2015 в 15:26

5 ответов 5

Сортировка: Сброс на вариант по умолчанию

function include(url)

include("/js/script.js"); 

Отслеживать
ответ дан 2 апр 2015 в 14:18
Hermann Zheboldov Hermann Zheboldov
1,116 9 9 серебряных знаков 22 22 бронзовых знака
Я так понимаю, это работает только в контексте html страницы. Я же не пишу код в браузере.
2 апр 2015 в 14:25
круто, спасибо.
8 фев 2018 в 13:33

Внезапно хороший вопрос. Там нет явной поддержки включений, потому что авторы подразумевают компоновку через HTML-тэг script.

Однако все это можно обойти так или иначе:

1 вариант: jQuery однострочник

$.getScript("another_script.js", function()); 

2 вариант: На первый взгляд он немного сумашедший, но можно самому динамически создать тэг script как посоветовал @Hermann Zheboldov

Правда все это бесполезно если у вас нет браузера который обрабатывает HTML.

Поэтому я вижу только два варианта. Использовать препроцессор m4 или обычный C препроцессор для компоновки, либо так или иначе вставить туда код обрабатывающий HTML и использовать варианты выше(этот вариант значительно сложнее).

P.S. Возможно там уже есть какое решение пробелмы с включениями, стоит это проверить, так как я не имею никакого отношения к DroidScript и ничего о нем не знаю.

Как в js подключить другой js

В прошлой статье код javascript непосредственно определялся на веб-странице. Но есть еще один способ подключения кода JavaScript, который представляет вынесение кода во внешние файлы и их подключение с помощью тега

Итак, в прошлой теме мы создали html-страницу index.html , которая находится в каталоге app . Теперь создадим в этом каталоге новый подкаталог. Назовем его js . Он будет предназначен для хранения файлов с кодом javascript. В этом подкаталоге создадим новый текстовый файл, который назовем main.js . Файлы с кодом javascript имеют расширение .js . То есть у нас получится следующая структура проекта в папке app :

Откроем файл main.js в текстовом редакторе и определим в нем следующий код:

document.write("
Первая программа на JavaScript
"); // выводим заголовок document.write("Привет мир!"); // выводим обычный текст

Здесь для добавления на веб-страницу некоторого содержимого применяется метод document.write . Первый вызов метода document.write выводит заголовок , а второй вызов — обычный текст.

Для совместимости с кодировкой страницы index.html для файла с кодом javascript также желательно устанавливать кодировку utf-8. При работе в Visual Studio Code этот редактор автоматически устанавливает кодировку UTF-8.

Теперь подключим этот файл на веб-страницу index.html :

Чтобы подключить файл с кодом javascript на веб-страницу, применяется также тег , у которого устанавливается атрибут src . Этот атрибут указывает на путь к файлу скрипта. В нашем случае используется относительный путь. Так как веб-страница находится в одной папке с каталогом js, то в качестве пути мы можем написать js/main.js .

Также надо учитывать, что за открывающим тегом script должен обязательно следовать закрывающий

И после открытия файла index.html в браузере отобразится сообщение:

В отличие от определения кода javascript вынесение его во внешние файлы имеет ряд преимуществ:

• Мы можем повторно использовать один и тот же код на нескольких веб-страницах
• Внешние файлы javascript бразуер может кэшировать, за счет этого при следующем обращении к странице браузер снижает нагрузка на сервер, а браузеру надо загрузить меньший объем информации
• Код веб-страницы становится «чище». Он содержит только html-разметку, а код поведения хранится во внешних файлах. В итоге можно отделить работу по созданию кода html-страницы от написания кода javascript

Поэтому, как правило, предпочтительнее использовать код javascript во внешних файлах, а не в прямых вставках на веб-страницу с помощью элемента script.

Асинхронная загрузка и отложенное выполнение

Нередко веб-страницы имеют сложную структуру, какие-то блоки на html-странице, где подключаются файлы javascript, формируются динамически, что может усложнять управление файлами javascript. И для управления загрузкой файла с кодом JavaScript браузер предоставляет два атрибута: async и defer .

Атрибут async гарантирует, что обработка HTML-кода не будет приостановлена, когда браузер встретит элемент . Файл JavaScript загружается асинхронно (отсюда и название атрибута — async ). В этом случае HTML-код продолжает обрабатываться до тех пор, пока не будет загружен соответствующий файл JavaScript. Когда будет загружен файл JavaScript, обработка HTML останавливается, и начинает выполняться загруженный файл JS. После выполнения кода JavaScript продолжается обработка HTML.

Пример применения атрибута async :

Атрибут defer также гарантирует, что обработка HTML-кода не будет приостановлена. С другой стороны, исходный код JavaScript выполняется только после полной обработки HTML-кода. Таким образом, выполнение кода JavaScript откладывается (отсюда и название — defer (в переводе на английский).

Пример применения атрибута defer :

js вывести другой js

Если нужно подключить другой js-файл в свой проект, то можно использовать тег в HTML-документе:

    charset="UTF-8" /> Мой проект   Привет, мир!  src="путь/к/файлу.js">   

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

Здесь более подробный пример создания html с выводом текста из js-файла.