Как импортировать файл js в файл js

Обновлено: 21.11.2024

Узнайте, как включить файл JavaScript в другой файл JavaScript.

Аннотация

Мы можем включить файл JavaScript в другой файл JavaScript, используя встроенную систему модулей ES6. Это позволяет нам совместно использовать код между различными файлами JavaScript и достигать модульности в коде. Существуют и другие способы включения JS-файла, такие как Node JS require, функция jQuery getScript и функция Fetch Loading.
В этой статье мы подробно рассмотрим каждый метод.

Что такое модули ES6?

В раннюю эпоху Интернета роль JavaScript ограничивалась проверкой форм и обеспечением некоторой интерактивности, поэтому большие сценарии не требовались.
Сегодня JavaScript стал основным языком для разработки веб-приложений, включая серверную часть и внешний интерфейс. Таким образом, размер программ JS также рос экспоненциально, что усложняло управление кодом.

Это мотивировало использование модульной системы — способа разделить код на несколько файлов и каталогов, но при этом гарантировать, что все части кода могут обращаться друг к другу.

Поскольку старые версии JavaScript не имеют встроенной модульной системы, многие библиотеки JavaScript поставляются со своими собственными. Например — CommonJS и RequireJS.

JavaScript представил собственную модульную систему в ES6 (ECMAScript 6 — официальное название JavaScript), которая называется Модуль ES6.

Модуль ES6 — это просто файл, содержащий код JS с двумя особыми характеристиками:

  • Он автоматически находится в строгом режиме: это запрещает использование небрежных ошибок в коде, таких как использование переменных без определения.
  • Вы можете использовать ключевое слово import или export внутри него, предоставляя возможность поделиться кодом с другими файлами.

Давайте обсудим различные способы достижения модульности и узнаем, как импортировать файл JS в файл JS.

Вывод:

  • Модуль ES6 – это файл JS, который может экспортировать свой код для совместного использования с другими файлами, а также импортировать и использовать код из других файлов JS.

Популярные способы включения файла JavaScript в другой файл JavaScript

В этом разделе мы узнаем о двух популярных способах включения файла JS в другой файл JS:

  • Использование модулей ES6.
  • Для использования Node JS требуется функция.

Использование импорта/экспорта | Модуль ES6

Давайте начнем с использования способа импорта и экспорта ES6. Создайте файл с именем utils.js и определите в нем следующую функцию и константу:

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

Привет, $ — это литерал шаблона в JavaScript. Это позволяет нам встраивать переменные в строку, используя синтаксис $ и <>.

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

В первой строке мы импортируем приветствие и сообщение из utils.js, указав их внутри фигурных скобок <> .
После этой строки мы можем использовать импортированные объекты, поскольку они определены в том же файле. Затем мы записываем в консоль выходные данные обоих объектов.

Синтаксис ES6 для импорта: импорт из 'filename.js'

Если вы собираетесь использовать модули ES6 в среде node js, не забудьте назвать свои файлы с расширением .mjs или установить «type»: «module» в файле package.json.

< /цитата>

Использование экспорта по умолчанию

Мы можем использовать ключевое слово по умолчанию для экспорта одного объекта по умолчанию из файла. Что это значит? Давайте посмотрим на примере. Сделайте функцию приветствия в utils.js экспортом по умолчанию, добавив перед ней значение default:

Теперь вы можете импортировать его в main.js следующим образом:

Он будет работать так же, как и раньше!

При выполнении экспорта по умолчанию randomName импортируется из приветствия.js. Так как randomName не находится в utils.js , экспорт по умолчанию (в данном случае welcome()) экспортируется как random_name.

Примечание 📝:

Давайте обсудим некоторые важные моменты, связанные с модулями ES6, которые следует помнить при их использовании:

Мы должны удалить фигурные скобки при импорте экспорта по умолчанию.
Например, если мы сохранили фигурные скобки в приведенном выше примере randomName следующим образом:

Это выдало бы ошибку о том, что такого экспорта не существует.

Файл может содержать несколько экспортов. Однако мы можем определить только один экспорт по умолчанию в файл.
Поэтому следующий код JavaScript недействителен ❌:

Мы не можем использовать псевдоним при импорте обычного экспорта.
Поэтому следующий импорт недействителен ❌:

Мы должны использовать то же имя при импорте обычного экспорта.

Мы можем смешивать стандартный и обычный экспорт следующим образом:

Обратите внимание, мы использовали <> для именованного (обычного) экспорта и поставили экспорт по умолчанию без <> .

Мы можем импортировать содержимое всего модуля, используя * :

Затем вы можете получить доступ ко всему экспорту, используя модуль как пространство имен:

Вы можете экспортировать все объекты вместе в конец файла Пример:

Вы можете переименовывать экспорт и импорт

    Пример переименования экспорта:

и в файле импорта:

и в файле экспорта:

Это может помочь справиться с конфликтами имен между похожими импортируемыми объектами.

Теперь мы увидим, как запускать эти модули ES6 в браузере.

Использование модулей ECMAScript (ES6) в браузерах

Большинство современных браузеров, таких как Chrome, Safari и Firefox, поддерживают прямой запуск модулей ES6. Давайте попробуем запустить созданные ранее модули в браузере.

В предыдущем разделе мы создали два JS-файла со следующим кодом:

В файле main.js мы импортировали и использовали функцию из utils.js с помощью ключевого слова import.

Теперь мы хотим запустить main.js с помощью браузера, связав модуль main.js с файлом HTML.

Поэтому создайте файл index.html и включите сценарий main.js следующим образом:

Нам нужен атрибут type="module" в элементе, чтобы объявить этот скрипт как модуль. type="module" позволяет использовать импорт и экспорт внутри файла JS.

Откройте файл HTML в браузере, используя локальный сервер, а затем откройте консоль (нажмите F12). Вы увидите следующий вывод:

Вы не можете загружать модули локально (то есть с URL-адресом file:// ) внутри ваших браузеров из-за требований безопасности модулей JavaScript. Совет 💡. Если вы используете VS Code, вы можете использовать расширение live server для размещения HTML-файла.

Использование Node.js требует

В следующем разделе требуется базовое понимание Node JS Framework. Вы можете пропустить этот раздел, если вы новичок в JavaScript.

Еще один популярный способ импорта и экспорта файлов JS — использование функции Node JS require.

Node.js – это кроссплатформенная внутренняя среда выполнения JavaScript с открытым исходным кодом, используемая для выполнения кода JavaScript вне веб-браузера. Он используется для создания веб-серверов.

Для запуска кода, приведенного в этом разделе, вам необходимо установить Node JS.

Node JS имеет модульную систему еще до появления модулей ES6 в JavaScript.

Давайте перепишем предыдущий пример приветствия, используя require в Node JS. Создайте новый файл utils.js со следующим кодом:

Объект modules.exports содержит все экспорты из этого файла. Теперь создайте файл main.js со следующим кодом:

Обратите внимание на первую строку: мы используем функцию require, передавая имя файла, который нужно импортировать.
Функция запроса:

  • Читает файл
  • Выполняет файл
  • А затем возвращает объект экспорта.

Мы сохранили возвращенный объект в переменной utils и использовали его для доступа к функции приветствия и сообщению.

Попробуйте запустить его с узлом следующим образом:

И вы увидите следующий вывод:

Обратите внимание, что Executing utils.js в выводе означает, что функция require выполняет файл перед возвратом объекта экспорта.

Выводы:

  • Система модулей ES6 и Node JS требуют наиболее популярных способов включения файла JS в другой файл JS.
  • Современные браузеры также напрямую поддерживают модули ES6.

Динамический импорт в браузерах

В следующем разделе требуется понимание промисов и async/await в JavaScript. Вы можете пропустить этот раздел, если вы новичок в JavaScript.

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

Для этого мы используем импорт как функцию. Давайте рассмотрим пример:

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

Пояснение Мы вызвали функцию импорта с путем к модулю в качестве параметра. Функция импорта возвращает обещание (поэтому мы используем async/await), которое выполняется с объектом, содержащим все экспорты.

Затем мы получаем доступ к функции приветствия, используя возвращенный объект модуля.

Когда следует использовать динамический импорт?

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

  • Мы можем динамически импортировать модуль по мере необходимости, используя функцию импорта.

Ajax с загрузкой выборки

В следующем разделе требуется понимание промисов и async/await в JavaScript. Вы можете пропустить этот раздел, если вы новичок в JavaScript.

До сих пор мы видели два популярных способа включения файла JS в другой файл JS.Мы также видели, как использовать модули ES6 по запросу в предыдущем разделе.
Теперь в следующих разделах мы рассмотрим другие возможные способы включения файла js в файл js, начиная с загрузки выборки.

Мы можем загрузить и выполнить файл JS, используя API выборки и функцию eval. Добавьте простой оператор журнала в файл utils.js:

Теперь добавьте следующий код в файл main.js:

Объяснение Мы ждем, пока загрузится наша HTML-страница, а затем загружаем файл utils с помощью fetch .
Затем мы обращаемся к коду файла JavaScript с помощью функции text и сохраняем его в utilsText, а затем передаем функции eval.
Функция eval оценивает код JavaScript, представленный в виде строки. Оценка кода JavaScript означает, что он запускает код, который был передан функции в виде строки.

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

Вывод:

  • Мы можем использовать комбинацию fetch и eval() для выполнения файла JS в другом файле JS.

Загрузка jQuery

В следующем разделе требуется базовое понимание библиотеки jQuery. Вы можете пропустить этот раздел, если вы новичок в JavaScript или не знакомы с jQuery.

jQuery — это библиотека JavaScript, предназначенная для упрощения обхода дерева HTML DOM и управления им.
Мы можем использовать его функцию getScript для загрузки файла JavaScript и его выполнения.

Чтобы использовать jQuery, добавьте следующий тег script в элемент заголовка HTML.

Теперь сохраните utils.js следующим образом:

И добавьте в main.js следующий код:

Объяснение $ — это псевдоним объекта jQuery, мы используем его для доступа к различным функциям, предоставляемым jQuery. Здесь мы передаем путь к нашему JS-файлу функции getScript. Функция getScript выполнит код utils.js и вернет данные (текст utils.js) в функции обратного вызова. Внутри функции обратного вызова мы обрабатываем данные файла.

Функция обратного вызова – это функция, которая передается в другую функцию в качестве аргумента, а затем вызывается внутри внешней функции для выполнения какой-либо подпрограммы или действия.

Вот результат приведенного выше кода:

Вывод:

  • jQuery предоставляет функцию getScript для загрузки и выполнения файла JS в другом файле JS.

Динамическая загрузка скрипта

Мы можем избежать использования функции jQuery getScript, внедрив тег скрипта самостоятельно.

В файле main.js это можно сделать так:

Объяснение Мы создали тег скрипта и установили для его исходного атрибута путь к файлу JavaScript. Затем мы добавили тег скрипта к элементу body.
Проверьте консоль сейчас, и вы увидите тот же вывод, что и раньше.

Объединить файлы

В приведенном выше примере мы включили один JS-файл в main.js, мы можем сделать то же самое с несколькими файлами.

Создайте файл first.js со следующим кодом:

Создайте еще один файл second.js следующим образом:

Теперь в main.js вы можете включить оба файла следующим образом:

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

Вывод:

  • Мы можем динамически вставлять тег скрипта, используя манипуляции с DOM, чтобы загрузить и выполнить файл JS без jQuery.

Определение выполнения скрипта

Теперь возникла проблема с вышеуказанным решением (динамическая загрузка скрипта). Если мы попытаемся получить доступ к переменной из импортированного файла сразу после его добавления в HTML, мы столкнемся с ошибкой, поскольку браузеры загружают файлы JS асинхронно (одновременно) для повышения производительности.

Например, если это файл utils.js:

И мы пытаемся получить доступ к константе сообщения в main.js следующим образом:

Мы столкнемся со следующей ошибкой:

Чтобы решить эту проблему, мы должны убедиться, что любой код в main.js, использующий объекты из utils.js, запускается после загрузки файла.
Для этого мы можем использовать функцию обратного вызова для атрибута onload тега script:

Ключевая строка здесь: scriptTag.onload = callback; . Функция обратного вызова вызывается только при загрузке скрипта. Теперь вывод будет правильным:

Есть ли в 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, обеспечивать обратную совместимость для старых браузеров, объединять файлы , минимизировать, выполнить разделение кода и т. д.

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

Импортированные модули находятся в строгом режиме независимо от того, объявляете вы их таковыми или нет. Оператор импорта нельзя использовать во встроенных скриптах, если только такой скрипт не имеет type="module" . Импортированные привязки называются активными привязками, поскольку они обновляются модулем, экспортировавшим привязку.

Существует также функция динамического import() , которая не требует скриптов type="module" .

Обратная совместимость может быть обеспечена с помощью атрибута nomodule в теге.

Синтаксис

Имя, которое будет ссылаться на экспорт по умолчанию из модуля.

Модуль для импорта. Часто это относительный или абсолютный URL-адрес файла .js, содержащего модуль. Некоторые сборщики могут разрешать или требовать использования расширения; проверьте свое окружение. Допускаются только строки в одинарных и двойных кавычках.

Имя объекта модуля, которое будет использоваться как своего рода пространство имен при ссылке на импорт.

Имя импортируемого экспорта.

Имена, которые будут ссылаться на именованный импорт.

Описание

Параметр имени – это имя "объекта модуля", которое будет использоваться в качестве своего рода пространства имен для ссылки на экспорт. Параметры экспорта определяют отдельные именованные экспорты, в то время как синтаксис импорта * как имя импортирует их все. Ниже приведены примеры для пояснения синтаксиса.

Импорт всего содержимого модуля

Это вставит myModule в текущую область, содержащую все экспорты из модуля в файле, расположенном в /modules/my-module.js .

Здесь доступ к экспорту означает использование имени модуля (в данном случае "myModule") в качестве пространства имен. Например, если модуль, импортированный выше, включает в себя экспорт doAllTheAmazingThings() , вы должны вызвать его следующим образом:

Импорт одного экспорта из модуля

Данный объект или значение с именем myExport, которое было экспортировано из модуля my-module либо неявно (поскольку весь модуль экспортируется, например, с помощью export * from 'another.js' ), ​​либо явно (с помощью оператора экспорта) , это вставит myExport в текущую область.

Импорт нескольких экспортов из модуля

Это вставляет и foo, и bar в текущую область.

Импортировать экспорт с более удобным псевдонимом

Вы можете переименовать экспорт при его импорте. Например, это вставляет в текущую область короткое имя.

Переименовать несколько экспортов во время импорта

Импорт нескольких экспортов из модуля с удобными псевдонимами.

Импортировать модуль только из-за его побочных эффектов

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

Это работает и с динамическим импортом:

Если в вашем проекте используются пакеты, которые экспортируют ESM, вы также можете импортировать их только для побочных эффектов. Это запустит код только в файле точки входа пакета (и любых файлах, которые он импортирует).

Импорт значений по умолчанию

Можно иметь экспорт по умолчанию (будь то объект, функция, класс и т. д.). Затем можно использовать оператор импорта для импорта таких значений по умолчанию.

Самая простая версия напрямую импортирует значение по умолчанию:

Также можно использовать синтаксис по умолчанию с указанными выше (импорт пространства имен или именованный импорт). В таких случаях сначала необходимо объявить импорт по умолчанию. Например:

При импорте экспорта по умолчанию с помощью динамического импорта это работает немного по-другому. Вам нужно деструктурировать и переименовать ключ «по умолчанию» из возвращенного объекта.

Динамический импорт

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

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

Используйте динамический импорт только при необходимости. Статическая форма предпочтительнее для загрузки первоначальных зависимостей, и ее легче извлечь из инструментов статического анализа и встряхивания дерева.

Для динамического импорта модуля ключевое слово import может вызываться как функция. При таком использовании возвращается обещание.

Эта форма также поддерживает ключевое слово await.

Примеры

Стандартный импорт

В приведенном ниже коде показано, как выполнить импорт из дополнительного модуля, чтобы помочь в обработке запроса AJAX JSON.

Модуль: file.js

Основная программа: main.js

Динамический импорт

В этом примере показано, как загрузить функции на страницу на основе действия пользователя, в данном случае нажатия кнопки, а затем вызвать функцию в этом модуле. Это не единственный способ реализации данного функционала. Функция import() также поддерживает await .

Технические характеристики

Совместимость с браузером

Таблицы BCD загружаются только в браузере

См. также

Нашли проблему с этой страницей?

Последнее изменение: 27 марта 2022 г., авторы MDN

Ваш план улучшения Интернета.

Поддержка

Наши сообщества

Разработчики

Простое руководство по импорту одного 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, мы получаем сообщение об ошибке в консоли, и эта ошибка выглядит следующим образом:

На самом деле существует два типа экспорта:

  1. Именованные экспорты (ноль или более экспортов на модуль)
  2. Экспорт по умолчанию (по одному на модуль)

Это только краткое объяснение, вы можете найти больше примеров в веб-документах MDN:
Справочник по оператору импорта в MDN
Справочник по оператору экспорта в MDN

Включение 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 могут быть довольно большими, что может замедлить загрузку вашей страницы. Популярные фреймворки обычно предлагают «уменьшенную» версию своего кода. Вы всегда должны использовать эту версию на своих страницах, потому что она будет иметь меньший размер файла.

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