Как подключить файл js к js
Обновлено: 06.07.2024
JavaScript – это очень популярный язык сценариев, который используется как на стороне клиента, так и на стороне сервера. JavaScript необходим для наших веб-страниц, поскольку он делает нашу веб-страницу интерактивной.
Чтобы стать фронтенд-разработчиком, необходимо выполнить три основных требования:
HTML — это сокращенное название языка гипертекстовой разметки, который обеспечивает структуру нашей веб-страницы, а CSS придает нашим страницам стиль. Наконец, JavaScript, как упоминалось ранее, делает нашу веб-страницу интерактивной. JavaScript также помогает изменять HTML и CSS.
Теперь возникает вопрос, как мы можем связать/связать JavaScript с HTML. Сегодня в этой статье мы рассмотрим практически все способы связи JavaScript с HTML.
Что такое тег скрипта?
Прежде чем перейти к решению о том, как связать JavaScript с HTML, давайте рассмотрим тег скрипта.
Тег используется для встраивания клиентских скриптов, которые представляют собой JavaScript. Этот тег содержит либо элементы сценария, либо ссылки на другой файл сценария с использованием атрибута src.
Синтаксис
Это тег скрипта с атрибутом src, в котором мы можем указать имя файла, на который мы хотим сослаться.
Использование JavaScript в файле HTML
Мы можем связать JavaScript с HTML, добавив весь код JavaScript в файл HTML. Мы достигаем этого с помощью тега script, который был объяснен ранее. Мы можем поместить тег либо в заголовок HTML, либо в конец тела. Это полностью зависит от нас, где мы хотим разместить его и когда мы хотим, чтобы JavaScript загружался. Программисты обычно вызывают тег script всякий раз, когда хотят сгенерировать контент или выполнить какое-либо действие. Поэтому, глядя на следующий код, рекомендуется загружать javaScript после тела HTML.
Давайте рассмотрим пример:
Пример
В этом примере сначала мы создали кнопку в HTML. Мы устанавливаем событие на щелчок. Всякий раз, когда пользователь нажимает на эту кнопку, активируется функция myFunc(). После этого ставим тег. Весь код JavaScript был здесь. Мы поместили функцию с именем myFunc() там, где мы показывали предупреждение.
Поздравляем! Мы успешно связали JavaScript с HTML, добавив код JavaScript в тег скрипта.
Этот метод подходит для небольших веб-страниц или одной веб-страницы. Однако по мере того, как ваше веб-приложение становится больше, код скрипта также будет увеличиваться, и с ним станет действительно трудно работать, а также читать. Решение состоит в том, чтобы написать JavaScript в выделенном отдельном файле javaScript и предоставить ссылку на файл JavaScript в файле HTML.
Использование JavaScript во внешнем файле
Использование внешнего файла для больших сценариев выгодно, так как мы можем разделить наш код на разные страницы JavaScript, а также в разные файлы. Это достигается путем ссылки на имя файла JavaScript в атрибуте «src» тега script в файле HTML.
Давайте немного изменим предыдущий пример. Код останется прежним. Мы создадим еще один файл JavaScript с именем «code.js». Мы поместим весь код JavaScript в файл «code.js» и предоставим ссылку «code.js» в файле HTML.
Например
Мы ссылались на файл code.js, используя атрибут src тега.
Теперь файл code.js:
Результат будет таким же, как и в предыдущем примере, т.е.
Преимущества внешних файлов JavaScript
Давайте формально сформулируем некоторые преимущества после обсуждения внешнего файла javaScript:
- Он разделяет наш код HTML и код JavaScript.
- Код JavaScript становится удобочитаемым и удобным для сопровождения.
- Еще одно преимущество заключается в том, что кэшированные файлы JavaScript ускоряют загрузку страниц.
Селекторы JavaScript
В предыдущих примерах мы воспользовались помощью события. Предположим, мы не хотим добавлять событие, а хотим выбрать элемент из html-файла. JavaScript помогает нам, предоставляя для этого различные параметры, которые называются селекторами JavaScript.
Основная функция селекторов JavaScript — выбрать элемент HTML и выполнить над ним различные действия в соответствии с нашими потребностями. JavaScript предоставляет для этого разные варианты, один из них — идентификатор.
Мы можем присвоить элементу атрибут id в HTML, а затем получить к нему доступ в JavaScript. Мы получаем доступ к JavaScript с помощью:
Идентификатор уникален и используется только для одного элемента.
JavaScript также дает нам возможность выбирать элемент с помощью атрибута класса. Мы можем использовать имя класса для разных элементов. Синтаксис:
Другой вариант, который предоставляет нам JavaScript, — это доступ к элементам JavaScript с использованием имен тегов. Синтаксис для доступа к именам тегов:
Включение JavaScript на вашу страницу – довольно простой процесс.
Во-первых, что такое JavaScript?
С сайта школ W3C:
- JavaScript был разработан для добавления интерактивности HTML-страницам.
- JavaScript – это язык сценариев.
- Язык сценариев – это легкий язык программирования.
- JavaScript обычно встраивается непосредственно в HTML-страницы.
- JavaScript – это интерпретируемый язык (это означает, что скрипты выполняются без предварительной компиляции)
- Каждый может использовать JavaScript без покупки лицензии
Включая JavaScript
Вы можете включить JavaScript в свой HTML двумя способами:
- Написание кода в HTML
- Включить его как ссылку на внешний файл
В большинстве случаев вы будете включать JavaScript как внешний файл.
Тег сценария
Тег — это то, что мы используем для включения нашего JavaScript. Он очень похож на тег, который вы уже использовали для включения файлов CSS.
Вот очень простой фрагмент кода JavaScript с использованием тега script. Этот JavaScript записывается непосредственно на нашу HTML-страницу. Он позвонит и уведомит окно, как только страница загрузится.
При использовании тега script мы всегда должны использовать имя атрибута и значение type="text/javascript" .
Использование тега script для включения внешнего файла JavaScript
Чтобы включить внешний файл JavaScript, мы можем использовать тег скрипта с атрибутом src. Вы уже использовали атрибут src при работе с изображениями. Значением атрибута src должен быть путь к вашему файлу JavaScript.
Этот тег script должен быть включен между тегами в HTML-документе.
Файлы JavaScript
- Всегда заканчивайте расширением js
- Включить только JavaScript
На веб-сайтах принято помещать все файлы JavaScript в папку с именем js, например:
Простая демонстрация включения JavaScript
Вот очень простая демонстрация того, как включить внешний файл JavaScript в HTML-страницу.
Другие JavaScript
Для этого класса от вас не требуется писать какой-либо реальный код JavaScript. К счастью для вас, многие люди уже написали много JavaScript и даже позволяют вам использовать его бесплатно.
Фреймворки JavaScript
Framework — это, по сути, библиотека кода для определенного языка. Как правило, фреймворк абстрагирует общие задачи и упрощает и ускоряет для дизайнеров и разработчиков написание своего конкретного кода. Фреймворки на самом деле ничего не делают сами по себе, они просто предоставляют людям более простую платформу для разработки.
Распространенные фреймворки JavaScript:
Из этих платформ JQuery в настоящее время является самой популярной. Кроме того, вы больше всего хотели бы встретить его в качестве модного слова.
Размеры файлов JavaScript
Многие файлы JavaScript могут быть довольно большими, что может замедлить загрузку вашей страницы. Популярные фреймворки обычно предлагают «уменьшенную» версию своего кода. Вы всегда должны использовать эту версию на своих страницах, потому что она будет иметь меньший размер файла.
Есть ли в JavaScript что-то похожее на @import в CSS, позволяющее включать файл JavaScript в другой файл JavaScript?
68 ответов 68
В старых версиях JavaScript не было импорта, включения или требования, поэтому было разработано множество различных подходов к этой проблеме.
Но с 2015 года (ES6) в JavaScript есть стандарт модулей ES6 для импорта модулей в Node.js, который также поддерживается большинством современных браузеров.
Для совместимости со старыми браузерами можно использовать инструменты сборки, такие как Webpack и Rollup, и/или инструменты транспиляции, такие как Babel.
Модули ECMAScript (ES6) поддерживаются в Node.js начиная с версии 8.5 с флагом --experimental-modules и по крайней мере с Node.js версии 13.8.0 без флага. Чтобы включить «ESM» (по сравнению с предыдущей системой модулей Node.js в стиле CommonJS [«CJS»]), вы либо используете «type»: «module» в package.json, либо даете файлам расширение .mjs . (Аналогичным образом модули, написанные с помощью предыдущего модуля CJS Node.js, могут называться .cjs, если по умолчанию используется ESM.)
Используя .mjs , вы получите module.mjs :
Модули ECMAScript в браузерах
Браузеры поддерживают прямую загрузку модулей ECMAScript (такие инструменты, как Webpack не требуются) начиная с Safari 10.1, Chrome 61, Firefox 60 и Edge 16. Проверьте текущую поддержку на сайте caniuse. Нет необходимости использовать расширение Node.js .mjs; браузеры полностью игнорируют расширения файлов в модулях/скриптах.
Динамический импорт в браузерах
Динамический импорт позволяет скрипту загружать другие скрипты по мере необходимости:
Старый стиль модуля CJS, который до сих пор широко используется в Node.js, — это система module.exports/require.
Существуют и другие способы включения внешнего содержимого JavaScript в браузеры, не требующие предварительной обработки.
Вы можете загрузить дополнительный скрипт с помощью вызова AJAX, а затем использовать eval для его запуска. Это самый простой способ, но он ограничен вашим доменом из-за модели безопасности JavaScript-песочницы. Использование eval также открывает двери для ошибок, взломов и проблем с безопасностью.
Как и при динамическом импорте, вы можете загружать один или несколько скриптов с вызовом fetch, используя промисы для управления порядком выполнения зависимостей скриптов с помощью библиотеки Fetch Inject:
Библиотека jQuery обеспечивает загрузку в одну строку:
Вы можете добавить тег скрипта с URL-адресом скрипта в HTML. Это идеальное решение, позволяющее избежать накладных расходов jQuery.
Сценарий может даже находиться на другом сервере. Кроме того, браузер оценивает код. Тег можно внедрить либо на веб-страницу, либо вставить непосредственно перед закрывающим тегом.
Вот пример того, как это может работать:
Эта функция добавит новый тег в конец раздела заголовка страницы, где для атрибута src задан URL-адрес, переданный функции в качестве первого параметра.
Оба этих решения обсуждаются и иллюстрируются в книге «Безумие JavaScript: динамическая загрузка скриптов».
Теперь есть большая проблема, о которой вы должны знать. Это означает, что вы загружаете код удаленно. Современные веб-браузеры будут загружать файл и продолжать выполнять ваш текущий скрипт, потому что они загружают все асинхронно для повышения производительности. (Это относится как к методу jQuery, так и к методу загрузки динамического скрипта вручную.)
Это означает, что если вы используете эти трюки напрямую, вы не сможете использовать только что загруженный код на следующей строке после того, как вы запросили его загрузку, потому что он все еще будет загружаться.
Например: my_lovely_script.js содержит MySuperObject :
Затем вы перезагружаете страницу, нажимая F5 . И это работает! Запутанно.
Что с этим делать?
Ну, вы можете использовать хак, предложенный автором по ссылке, которую я вам дал. Таким образом, для спешащих людей он использует событие для запуска функции обратного вызова при загрузке сценария. Таким образом, вы можете поместить весь код, используя удаленную библиотеку, в функцию обратного вызова. Например:
Затем вы пишете код, который хотите использовать ПОСЛЕ загрузки скрипта в лямбда-функцию:
Затем вы запускаете все это:
Обратите внимание, что скрипт может выполняться после загрузки DOM или до этого, в зависимости от браузера и от того, включили ли вы строку script.async = false; . Есть отличная статья о загрузке Javascript в целом, в которой это обсуждается.
Как упоминалось в начале этого ответа, многие разработчики используют в своих проектах инструменты сборки/транспиляции, такие как Parcel, Webpack или Babel, что позволяет им использовать будущий синтаксис JavaScript, обеспечивать обратную совместимость для старых браузеров, объединять файлы , минимизировать, выполнить разделение кода и т. д.
Простое руководство по импорту одного JS-файла в другой с помощью ES6
Еще несколько лет назад было невозможно импортировать один js-файл или блок кода из одного файла в другой, но с 2015 года в ES6 появились полезные модули ES6. Со стандартом модуля мы можем использовать ключевое слово import и export и синтаксис, данные для включения и экспорта модуля в JS соответственно.
Статический оператор импорта используется для импорта привязок, которые экспортируются другим модулем. Импортированные модули находятся в строгом режиме независимо от того, объявляете вы их таковыми или нет. Оператор импорта нельзя использовать во встроенных скриптах, если только такой скрипт не имеет type="module".
Существует также функция динамического import() , которая не требует скриптов type="module".
Обратная совместимость может быть обеспечена с помощью атрибута nomodule в теге скрипта.
Как мы подключаем файлы js:
index.html
script1.js
script2.js
Запустите приведенные выше примеры блоков кода в вашей локальной системе/локальном сервере, вы получите вывод консоли в виде: Привет, приятель!
Код и объяснение синтаксиса приведенного выше кода:
В script1.js мы экспортировали модуль с синтаксисом: экспортировать модуль
Аналогично, в нашем случае мы экспортировали функцию Hello, написав ключевое слово export в определении функции (строка номер 1 в script1.js). В script2.js мы импортировали этот модуль, написав следующий код/синтаксис:
Сейчас в script1.js у нас есть только один модуль для экспорта, но что, если бы у нас было несколько модулей для экспорта? Это также возможно с похожим синтаксисом, но с небольшой модификацией:
Пример кода для нескольких модулей:
script1.js
script2.js
В script1.js у нас есть три модуля: Имя, Адрес и Возраст. В Script2.js мы импортировали эти модули с похожим, но немного другим синтаксисом.
Примечание. Ранее у нас не было кода импорта, потому что это был экспорт по умолчанию (помните, что один файл может иметь только один экспорт по умолчанию).
Когда мы удаляем это ключевое слово по умолчанию в предыдущем коде script1.js, мы получаем сообщение об ошибке в консоли, и эта ошибка выглядит следующим образом:
На самом деле существует два типа экспорта:
- Именованные экспорты (ноль или более экспортов на модуль)
- Экспорт по умолчанию (по одному на модуль)
Это только краткое объяснение, вы можете найти больше примеров в веб-документах MDN:
Справочник по оператору импорта в MDN
Справочник по оператору экспорта в MDN
Как можно надежно и динамически загрузить файл JavaScript? Это можно использовать для реализации модуля или компонента, который при «инициализации» компонента будет динамически загружать все необходимые сценарии библиотеки JavaScript по запросу. В старых версиях JavaScript не было импорта, включения или требования, поэтому было разработано множество различных подходов к этой проблеме. Но с 2015 года (ES6) в JavaScript есть стандартные модули ES6 для импорта модулей в Node.js, который также поддерживается большинством современных браузеров.
Для совместимости со старыми браузерами можно использовать инструменты сборки и/или транспиляции.
Модули ECMAScript (ES6) поддерживаются в Node.js, начиная с версии 8.5, с флагом --experimental-modules. Все задействованные файлы должны иметь расширение .mjs.
Модули ECMAScript в браузерах
Браузеры поддерживают загрузку модулей ECMAScript напрямую (такие инструменты, как Webpack не требуются) начиная с Safari 10.1, Chrome 61, Firefox 60 и Edge 16. Проверьте текущую поддержку на сайте caniuse.
Динамический импорт в браузерах
Динамический импорт позволяет скрипту загружать другие скрипты по мере необходимости:
Старый стиль импорта модулей, до сих пор широко используемый в Node.js, — это система module.exports/require.
Существуют и другие способы включения внешнего содержимого JavaScript в браузеры, не требующие предварительной обработки.
Вы можете загрузить дополнительный скрипт с помощью вызова AJAX, а затем использовать eval для его запуска. Это самый простой способ, но он ограничен вашим доменом из-за модели безопасности JavaScript-песочницы. Использование eval также открывает двери для ошибок, взломов и проблем с безопасностью.
Как и при динамическом импорте, вы можете загружать один или несколько скриптов с вызовом fetch, используя промисы для управления порядком выполнения зависимостей скриптов с помощью библиотеки Fetch Inject:
Библиотека jQuery обеспечивает загрузку в одну строку:
Вы можете добавить тег скрипта с URL-адресом скрипта в HTML. Это идеальное решение, позволяющее избежать накладных расходов jQuery.
Сценарий может даже находиться на другом сервере. Кроме того, браузер оценивает код. Тег можно внедрить либо на веб-страницу, либо вставить непосредственно перед закрывающим тегом