Главная

Что происходит, когда JS-модуль импортируют дважды?

2020-03-17 в 9:00, admin, рубрики: javascript, Блог компании RUVDS.com, разработка, Разработка веб-сайтов

Начнём этот материал с вопроса. ES2015-модуль increment содержит следующий код:

// increment.js
let counter = 0;
counter++;

export default counter;

В другом модуле, который мы назовём consumer, вышеприведённый модуль импортируется 2 раза:

// consumer.js
import counter1 from './increment';
import counter2 from './increment';

counter1; // => ???
counter2; // => ???

А теперь, собственно, вопрос. Что попадёт в переменные counter1 и counter2 после выполнения модуля consumer?

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

Выполнение модуля

Для того чтобы понять то, как работают внутренние механизмы JavaScript, полезно заглянуть в спецификацию.

В соответствии со спецификацией, каждый JavaScript-модуль ассоциирован с сущностью Module Record (запись модуля). У этой записи есть метод Evaluate(), который выполняет модуль:

Если данный модуль уже был успешно выполнен, вернуть undefined; […]. В противном случае транзитивно выполнить все зависимости этого модуля и затем выполнить этот модуль.
В результате оказывается, что один и тот же модуль выполняется лишь один раз.

К сожалению, то, что нужно знать для ответа на наш вопрос, этим не ограничивается. Как удостовериться в том, что вызов инструкции import с использованием одинаковых путей приведёт к возврату одного и того же модуля?

Разрешение команд импорта

За связь пути к модулю (спецификатора, specifier) с конкретным модулем отвечает абстрактная операция HostResolveImportedModule(). Код импорта модуля выглядит так:

import module from 'path';

Вот что говорит об этом спецификация:

Реализация HostResolveImportedModule должна соответствовать следующим требованиям:

Обычным возвращаемым значением должен быть экземпляр конкретного подкласса Module Record.
Если сущность Module Record, соответствующая паре referencingScriptOrModule, specifier, не существует, или такая сущность не может быть создана, должно быть выброшено исключение.
Каждый раз, когда эта операция вызывается с передачей ей в качестве аргументов конкретной пары referencingScriptOrModule, specifier, она должна, в случае её обычного выполнения, возвращать тот же самый экземпляр сущности Module Record.

Теперь рассмотрим это в более понятной форме.

HostResolveImportedModule(referencingScriptOrModule, specifier) — это абстрактная операция, которая возвращает модуль, соответствующий паре параметров referencingScriptOrModule, specifier:

Параметр referencingScriptOrModule — это текущий модуль, то есть — тот модуль, который выполняет импорт.
Параметр specifier — это строка, которая соответствует пути модуля в инструкции import.

В конце описания HostResolveImportedModule() говорится, что при импорте модулей, которым соответствует один и тот же путь, выполняется импорт одного и того же модуля:

import moduleA from 'path';
import moduleB from 'path';
import moduleC from 'path';

// moduleA, moduleB и moduleC -это одно и то же

moduleA === moduleB; // => true
moduleB === moduleC; // => true

Интересно, что спецификация указывает на то, что хост (браузер, среда Node.js, в общем — что угодно, пытающееся выполнить JavaScript-код) должен предоставлять конкретную реализацию HostResolveImportedModule().

Ответ

После вдумчивого чтения спецификации становится понятным, что JavaScript-модули при импорте выполняются лишь один раз. А при импорте модуля с использованием одного и того же пути возвращается один и тот же экземпляр модуля.

Вернёмся к нашему вопросу.

Модуль increment всегда выполняется лишь один раз:

// increment.js
let counter = 0;
counter++;

export default counter;

Вне зависимости от того, сколько раз был импортирован модуль increment, выражение counter++ вычисляется лишь один раз. Переменная counter, экспортируемая с использованием механизма экспорта по умолчанию, имеет значение 1.

Теперь взглянем на модуль consumer:

// consumer.js
import counter1 from './increment';
import counter2 from './increment';

counter1; // => 1
counter2; // => 1

В командах import counter1 from './increment' и import counter2 from './increment' используется один и тот же путь — './increment'. В результате оказывается, что импортируется один и тот же экземпляр модуля.

Получается, что в переменные counter1 и counter2 в consumer записано одно и то же значение 1.

Итоги

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

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

Если модуль импортируют несколько раз, но спецификатор модуля (путь к нему) при этом остаётся одним и тем же, то спецификация JavaScript гарантирует то, что импортирован будет один и тот же экземпляр модуля.

Уважаемые читатели! Как часто вы прибегаете к чтению спецификации JavaScript, выясняя особенности функционирования неких языковых конструкций?