Модули JavaScript

Оглавление

Учебник по JavaScript
Введение в JavaScript
JavaScript, куда
Вывод JavaScript
Операторы JavaScript
Синтаксис JavaScript
Комментарии JavaScript
Переменные JavaScript
JavaScript Let
Константа JavaScript
Операторы JavaScript
JavaScript-арифметика
Назначение JavaScript
Типы данных JavaScript
Функции JavaScript
Объекты JavaScript
События JavaScript
Строки JavaScript
Строковые методы JavaScript
Поиск строк в JavaScript
Литералы шаблонов JavaScript
Числа JavaScript
JavaScript BigInt
Числовые методы JavaScript
Свойства чисел JavaScript
JavaScript-массивы
Методы массивов JavaScript
Сортировка массивов JavaScript
Итерация массива JavaScript
Константа JavaScript
Объекты даты JavaScript
Форматы даты JavaScript
Методы даты в JavaScript
Методы установки даты в JavaScript
Математический объект JavaScript
JavaScript случайный
Логические значения JavaScript
Сравнение JavaScript и логические операторы
JavaScript, если еще, если
Оператор переключения JavaScript
JavaScript для цикла
JavaScript для входа
JavaScript для Of
JavaScript во время цикла
JavaScript: перерыв и продолжение
Итерации JavaScript
Наборы JavaScript
Карты JavaScript
Тип JavaScript
Преобразования типов JavaScript
JavaScript побитовый
Объект RegExp JavaScript
Приоритет операторов JavaScript
Ошибки JavaScript. Попробуйте Catch Throw.
Область применения JavaScript
Поднятие JavaScript
JavaScript «используйте строгий»
JavaScript это
Функция стрелки JavaScript
Классы JavaScript
Модули JavaScript
JavaScript JSON
Отладка JavaScript
Руководство по стилю JavaScript
Лучшие практики JavaScript
Ошибки JavaScript
Производительность JavaScript
Зарезервированные слова JavaScript
Версии JavaScript
JavaScript ES5
JavaScript ES6
JavaScript ECMAScript 2016
JavaScript ECMAScript 2017
JavaScript ECMAScript 2018
JavaScript ES2019
JavaScript ECMAScript 2020
JavaScript ECMAScript 2021
JavaScript IE и Edge
История JavaScript
Объекты JavaScript
Свойства JavaScript
Методы JavaScript
Объекты отображения JavaScript
Средства доступа JavaScript
Конструкторы JavaScript
Прототипы JavaScript
Итерации JavaScript
Наборы JavaScript
Карты JavaScript
Методы объекта JavaScript ES5
Определения функций JavaScript
Параметры функции JavaScript
Вызов функции JavaScript
Метод вызова функции JavaScript()
Функция JavaScript, метод apply()
Функция JavaScript Метод связывания()
Замыкание функций JavaScript
Классы JavaScript
Наследование классов JavaScript
Статические методы JavaScript
Обратные вызовы JavaScript
Асинхронный JavaScript
Обещания JavaScript
JavaScript асинхронный
JavaScript HTML DOM
Методы DOM JavaScript
DOM-документ JavaScript
DOM-элементы JavaScript
JavaScript DOM HTML
Проверка формы JavaScript
JavaScript DOM CSS
JavaScript DOM-анимация
События JavaScript DOM
Прослушиватель событий DOM в JavaScript
JavaScript DOM-навигация
Узлы DOM JavaScript
JavaScript DOM-коллекции
Список узлов JavaScript DOM
Окно JavaScript
Экран окна JavaScript
Расположение окна JavaScript
История окон JavaScript
Навигатор окон JavaScript
Всплывающие окна JavaScript
Временные события JavaScript
Файлы cookie JavaScript
Веб-API
Проверка формы JavaScript
API истории веб-поиска
API веб-хранилища
API веб-работников
API выборки JavaScript
API геолокации
AJAX Введение
AJAX Объект XMLHttpRequest
AJAX XMLHttpRequest
Ответ сервера AJAX XMLHttpRequest
AJAX XML
AJAX PHP
АЯКС АСП
База данных AJAX
XML-приложения
Примеры AJAX
JSON Введение
Синтаксис JSON
JSON против XML
Типы данных JSON
JSON.parse()
JSON.stringify()
Литералы JSON
JSON-массивы
JSON-сервер
JSON PHP
JSON HTML
JSONP
Селекторы jQuery
HTML-элементы jQuery
Стили CSS jQuery
jQuery DOM
HTML-графика
HTML-холст
Plotly.js
Chart.js
Google Диаграмма
D3.js
Примеры JavaScript
Примеры JavaScript HTML DOM
Примеры ввода HTML в JavaScript
Примеры HTML-объектов JavaScript
Примеры событий JavaScript
Примеры объектов браузера JavaScript
Показать оглавление

Модули

Модули JavaScript позволяют разбивать код на отдельные файлы.

Это упрощает поддержку базы кода.

Модули импортируются из внешних файлов с помощью оператора import.

Модули также используют type="module" в теге <script>.

<script type="module">
import message from "./message.js";
</script>

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Modules</h1>

<p id="demo"></p>

<script type="module">
import message from "./message.js";

document.getElementById("demo").innerHTML = message();

</script>

</body>
</html>

Экспорт

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

Существует два типа экспорта: Именованный экспорт и Экспорт по умолчанию.

Именованный экспорт

Давайте создадим файл с именем person.js и заполните его тем, что мы хотим экспортировать.

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

export const name = "Jesse";
export const age = 40;

const name = "Jesse";
const age = 40;

export {name, age};

Экспорт по умолчанию

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

В файле может быть только один экспорт по умолчанию.

const message = () => {
  const name = "Jesse";
  const age = 40;
  return name + ' is ' + age + 'years old.';
};

export default message;

Импортировать

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

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

import { name, age } from "./person.js";

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Modules</h1>

<p id="demo"></p>

<script type="module">
import { name, age } from "./person.js";

let text = "My name is " + name + ", I am " + age + ".";

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

import message from "./message.js";

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Modules</h1>

<p id="demo"></p>

<script type="module">
import message from "./message.js";

document.getElementById("demo").innerHTML = message();

</script>

</body>
</html>