ilyachalov (ilyachalov) wrote,
ilyachalov
ilyachalov

Categories:

JavaScript: модули, зачем нужен экспорт и импорт

Начал читать тринадцатый раздел («Модули») первой части («Язык программирования JavaScript») учебника по JavaScript, а именно подраздел 13.1 «Модули, введение».

Цитата оттуда:

Модуль — это просто файл. Один скрипт — это один модуль.

Модули могут загружать друг друга и использовать директивы export и import, чтобы обмениваться функциональностью, вызывать функции одного модуля из другого:

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


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

Например, еще в подразделе 2.1 «Привет, мир!» учебника рассказано о том, как в HTML-страницу можно вставить несколько скриптов из разных файлов с помощью тега <script></script>:

<script src="script1.js"></script>
<script src="script2.js"></script>

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

Текст файла script1.js:
function sayHi(user) {
    alert(`Привет, ${user}!`);
}

Текст файла script2.js:
sayHi("Илья");

Как я понимаю, ключевые слова export и import, во-первых, могут пригодиться в таком окружении, в котором HTML-теги недоступны. Например, программная платформа Node.js превращает JavaScript из узкоспециализированного языка (в браузерном окружении) в язык общего назначения, на котором можно писать даже программы, работающие как приложения операционной системы. (Это в качестве предположения, так как я не в курсе, как пишут многофайловые программы в Node.js. Я пока еще не работал с этой платформой.)

Во-вторых, ключевые слова export и import становятся нужны, если на HTML-страницу мы вставляем только один скрипт, а уже этот скрипт вызывает функции из другого скрипта, который не был вставлен на эту HTML-страницу с помощью тега <script></script>. Например, что-то вроде следующего:

Текст файла test.html:
...
<script src="script2.js" type="module"></script>
...
Тут, кстати, следует отметить атрибут type="module", без него будет выдана ошибка: «Uncaught SyntaxError: Cannot use import statement outside a module».

Текст файла script1.js:
export function sayHi(user) {
    alert(`Привет, ${user}!`);
}

Текст файла script2.js:
import {sayHi} from "./script1.js";

sayHi("Илья");

Продолжение: «JavaScript: Политика одинакового источника и CORS».
Tags: Образование, Программирование
Subscribe

  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your IP address will be recorded 

  • 0 comments