ilyachalov (ilyachalov) wrote,
ilyachalov
ilyachalov

Category:

JavaScript: варианты реэкспорта, их отличие друг от друга

Прочел подраздел 13.2 «Экспорт и импорт» тринадцатого раздела «Модули» первой части «Язык программирования JavaScript» учебника по JavaScript.

В концовке этого подраздела рассказано про так называемый «реэкспорт» — это синтаксис в языке JavaScript, который позволяет импортировать что-то и тут же экспортировать.

Реэкспорт в коде может выглядеть примерно так:

Код тестовой HTML-страницы test.html:
...
<script type="module" src="myscript.js"></script>
...
Код скрипта myscript.js:
import {sayHi} from "./index.js";

sayHi("Илья");
Код скрипта index.js:
export {sayHi} from "./say.js"; // реэкспорт
Код скрипта say.js:
export function sayHi(user) {
    alert(`Привет, ${user}!`);
}

При открытии в браузере тестовой HTML-страницы test.html будет запущен скрипт myscript.js, который запускает на выполнение функцию sayHi. В самом скрипте myscript.js функция sayHi не определена, скрипт myscript.js импортирует эту функцию из скрипта index.js. В скрипте index.js эта функция тоже не определена, скрипт index.js реэкспортирует эту функцию из скрипта say.js, в котором и находится определение функции sayHi.

В комментариях к этому подразделу читатели отметили, что в тексте подраздела не рассказано про одну из особенностей реэкспорта:
https://learn.javascript.ru/import-export#comment-4850643041

В тексте подраздела сказано, что запись export ... from ... — это просто более короткий вариант следующего кода:

Код скрипта index.js:
// export {sayHi} from "./say.js"; // 1. реэкспорт (короткий вариант)

import {sayHi} from "./say.js";    // 2. реэкспорт (длинный
export {sayHi};                    //    вариант)

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

Попробуем в скрипте index.js запустить на выполнение функцию sayHi:
// export {sayHi} from "./say.js"; // 1. реэкспорт (короткий вариант)

import {sayHi} from "./say.js";    // 2. реэкспорт (длинный
export {sayHi};                    //    вариант)

sayHi("Вася");
После открытия тестовой HTML-страницы test.html в браузере скрипт поприветствует Васю, а затем Илью.

Если же для реэкспорта использовать не длинный, а короткий вариант синтаксиса, то после открытия тестовой HTML-страницы в браузере мы получим ошибку при попытке скрипта index.js запустить функцию sayHi("Вася");: «Uncaught ReferenceError: sayHi is not defined» и скрипт на этом прекратит свою работу.

То есть при коротком варианте реэкспорта экспортируемые сущности не становятся доступны в скрипте (в котором выполняется реэкспорт), а лишь реэкспортируются дальше. При длинном же варианте реэкспорта экспортируемые сущности становятся доступны в скрипте (в котором выполняется реэкспорт) и при этом реэкспортируются дальше.
Tags: Образование, Программирование
Subscribe

  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your IP address will be recorded 

  • 0 comments