Как работят операторите import и export в JavaScript…

Операторите import и export се използват в JavaScript за работа с модули, позволявайки разделянето на кода на независими, многократно използваеми части и управлението на зависимостите между тях.

export

Операторът export се използва за експортиране на променливи, функции, класове или други стойности от модул. Експортирането може да бъде именувано или по подразбиране.

Именувано експортиране:

// module.js
export const myVariable = 10;
export function myFunction() { // ... }
export class MyClass { // ... }

По подразбиране експортиране: в модул може да има само един експортиран по подразбиране елемент.

// module.js
const defaultValue = 'default value';
export default defaultValue;

import

Операторът import се използва за импортиране на стойности, експортирани от други модули.

Именуван импорт:

// another-module.js
import { myVariable, myFunction } from './module.js';

Импорт с друго име:

// another-module.js
import { myVariable as newVariableName } from './module.js';

Импортиране на всички именувани експорти като обект:

// another-module.js
import * as moduleAlias from './module.js';
// Достъп: moduleAlias.myVariable, moduleAlias.myFunction

Импортиране на експортиране по подразбиране:

// another-module.js
import defaultValueName from './module.js';

Импортиране както на именуваните, така и на експортирането по подразбиране едновременно:

// another-module.js
import defaultValueName, { myVariable, myFunction } from './module.js';

Принципи на работа:

Статичен анализ: JavaScript-движокът анализира операторите import и export по време на компилацията (преди изпълнението на кода), създавайки граф на зависимостите между модулите.
"Живи" връзки: Импортните променливи не са копия на стойностите от експортиращия модул. Те са "живи" връзки (живи препратки) към променливите в оригиналния модул. Ако стойността на променлива в експортиращия модул се промени, тази промяна ще бъде видима чрез импортираната връзка.
Еднократно изпълнение: Кодът на всеки модул се изпълнява само веднъж при първия импорт на този модул. Резултатите от експортирането се кешират и се използват при последващи импорти.
Използване в контекст: Модулите се изпълняват в собствен контекст, изолиран от глобалната среда. Променливите, обявени в корена на модула, не замърсяват глобалното пространство, освен ако не са експортирани явно.

Как работят операторите import и export в JavaScript?