Импорт модуля

Последнее обновление: 19.11.2023

Для импорта одного модуля в другом модуле достаточно прописать оператор import и передать ему путь к импортируемому модулю:

import "путь_к_модулю";

Например, пусть у нас будет следующий модуль message.js

const messageText = "Hello METANIT.COM";
console.log(messageText);

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

И определим в той же папке файл main.js, в котором подключим выше определенный модуль message.js:

import "./message.js";

Здесь мы просто испортируем модуль message.js. В данном случае предполагается что оба модуля - main.js и message.js будут находиться в одной папке, поэтому при импорте указан путь "./message.js", где "./" указывает на ту же папку, где расположен файл main.js.

Определение модулей JavaScript

Пусть у нас есть html-страница index.html, на которой подключается файл main.js:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
	<title>METANIT.COM</title>
</head>
<body>
<script type="module" src="main.js"></script>
</body>
</html>

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

Hello METANIT.COM

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

import "./message.js";

console.log(messageText);	// Ошибка ReferenceError: messageText is not defined

Хотя мы и подключили модуль message.js, но его переменная messageText нам недоступна. Так как она не экспортируется, и соотвестветвенно здесь мы ее не можем импортировать и использовать.

Такой способ импорта может показаться бессмысленным. Тем не менее мы можем воспользоваться преимуществами модуля, например, возможностью использовать выражения await без определения асинхронных функций. Например, изменим модуль message.js следующим образом:

const sum = (x, y)=>Promise.resolve(x + y);
 
const value = await sum(5, 3);
console.log("Результат асинхронной операции:", value);

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

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850