Hoe werken de import- en export-operatoren in JavaScript?

De operatoren import en export worden in JavaScript gebruikt om met modules te werken, waardoor de code kan worden opgesplitst in onafhankelijke, herbruikbare delen en afhankelijkheden tussen hen kunnen worden beheerd.

export

De operator export wordt gebruikt om variabelen, functies, klassen of andere waarden vanuit een module te exporteren. Export kan genummerd of standaard zijn.

Genummerde export:

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

Standaard export: een module kan slechts één standaardexport hebben.

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

import

De operator import wordt gebruikt om waarden te importeren die door andere modules zijn geëxporteerd.

Genummerde import:

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

Importeren met een andere naam:

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

Alle geëxporteerde namen importeren als een object:

// another-module.js
import * as moduleAlias from './module.js';
// Toegang: moduleAlias.myVariable, moduleAlias.myFunction

Standaard export importeren:

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

Tegelijkertijd de genummerde en standaard export importeren:

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

Werking principes:

1. Statische analyse: De JavaScript-motor analyseert de import en export operators tijdens de compilatie (voor het uitvoeren van de code), waardoor een afhankelijkheidsdiagram tussen de modules wordt gemaakt.
2. "Levende" koppelingen: Geïmporteerde variabelen zijn geen kopieën van de waarden uit de exporterende module. Het zijn "levende" koppelingen (levende referenties) naar de variabelen van de originele module. Als de waarde van een variabele in de exporterende module verandert, wordt deze wijziging zichtbaar via de geïmporteerde koppeling.
3. Eénmalige uitvoering: De code van elke module wordt slechts één keer uitgevoerd bij de eerste import van die module. De resultaten van de export worden in cache opgeslagen en bij latere importen gebruikt.
4. Gebruik in context: Modules worden uitgevoerd in hun eigen context, geïsoleerd van de globale scope. Variabelen gedeclareerd aan de root van de module vervuilen de globale ruimte niet, tenzij ze expliciet worden geëxporteerd.