JavaScript
modules

Syntaxis

• import defaultMember van 'module';
• importeer {memberA, memberB, ...} uit 'module';
• import * als module uit 'module';
• importeer {memberA als een, memberB, ...} uit 'module';
• import defaultMember, * als module uit 'module';
• importeer standaardlid, {moduleA, ...} uit 'module';
• 'module' importeren;

Opmerkingen

Standaard export

Naast genoemde invoer kunt u een standaard export bieden.

// circle.js
export const PI = 3.14;
export default function area(radius) {
    return PI * radius * radius;
}

U kunt een vereenvoudigde syntaxis gebruiken om de standaard export te importeren.

import circleArea from './circle';
console.log(circleArea(4));

Merk op dat een standaard export impliciet gelijkwaardig is aan een benoemde export met de naam default , en de geïmporteerde binding ( circleArea hierboven) is gewoon een alias. De vorige module kan worden geschreven als

import { default as circleArea } from './circle';
console.log(circleArea(4));

U kunt slechts één standaard export per module hebben. De naam van de standaard export kan worden weggelaten.

// named export: must have a name
export const PI = 3.14;

// default export: name is not required
export default function (radius) {  
    return PI * radius * radius;
}

Importeren met bijwerkingen

Soms heb je een module die je alleen wilt importeren, zodat de code op het hoogste niveau wordt uitgevoerd. Dit is handig voor polyfills, andere globals of configuratie die slechts één keer wordt uitgevoerd wanneer uw module wordt geïmporteerd.

Gegeven een bestand met de naam test.js :

console.log('Initializing...')

Je kunt het zo gebruiken:

import './test'

In dit voorbeeld wordt Initializing... afgedrukt op de console.

Module definiëren

Bij gebruik van de modulesyntaxis ( import / export ) in ECMAScript 6 wordt elk bestand zijn eigen module met een privénaamruimte. Functies en variabelen op het hoogste niveau vervuilen de globale naamruimte niet. Als u functies, klassen en variabelen voor andere te importeren modules wilt blootleggen, kunt u het trefwoord export .

// not exported
function somethingPrivate() {
    console.log('TOP SECRET')
}


export const PI = 3.14;

export function doSomething() {
    console.log('Hello from a module!')
}

function doSomethingElse(){ 
    console.log("Something else")
}

export {doSomethingElse}

export class MyClass {
    test() {}
}

Opmerking: ES5 JavaScript-bestanden die zijn geladen via <script> -tags blijven hetzelfde wanneer u geen import / export .

Alleen de waarden die expliciet worden geëxporteerd, zijn buiten de module beschikbaar. Al het andere kan als privé of ontoegankelijk worden beschouwd.

Het importeren van deze module zou opleveren (ervan uitgaande dat het vorige codeblok zich in my-module.js ):

import * as myModule from './my-module.js';

myModule.PI;                 // 3.14
myModule.doSomething();      // 'Hello from a module!'
myModule.doSomethingElse();  // 'Something else'
new myModule.MyClass();      // an instance of MyClass
myModule.somethingPrivate(); // This would fail since somethingPrivate was not exported

Benoemde leden importeren uit een andere module

Aangezien de module uit de sectie Een module definiëren bestaat in het bestand test.js , kunt u vanuit die module importeren en de geëxporteerde leden gebruiken:

import {doSomething, MyClass, PI} from './test'

doSomething()

const mine = new MyClass()
mine.test()

console.log(PI)

De methode somethingPrivate() is niet geëxporteerd vanuit de test , dus proberen deze te importeren mislukt:

import {somethingPrivate} from './test'

somethingPrivate()

Een volledige module importeren

Naast het importeren van benoemde leden uit een module of de standaard export van een module, kunt u ook alle leden in een binding van een naamruimte importeren.

import * as test from './test'

test.doSomething()

Alle geëxporteerde leden zijn nu beschikbaar op de test . Niet-geëxporteerde leden zijn niet beschikbaar, net zoals ze niet beschikbaar zijn met geïmporteerde ledenimport.

Opmerking: het pad naar de module './test' wordt opgelost door de lader en valt niet onder de ECMAScript-specificatie - dit kan een string zijn voor elke bron (een pad - relatief of absoluut) op een bestandssysteem, een URL naar een netwerkbron of een andere tekenreeks-ID).

Benoemde leden met aliassen importeren

Soms kun je leden tegenkomen die echt lange thisIsWayTooLongOfAName() , zoals thisIsWayTooLongOfAName() . In dit geval kunt u het lid importeren en een kortere naam geven voor gebruik in uw huidige module:

import {thisIsWayTooLongOfAName as shortName} from 'module'

shortName()

U kunt meerdere lange ledennamen als volgt importeren:

import {thisIsWayTooLongOfAName as shortName, thisIsAnotherLongNameThatShouldNotBeUsed as otherName} from 'module'

shortName()
console.log(otherName)

En tot slot kunt u importaliassen combineren met de normale ledenimport:

import {thisIsWayTooLongOfAName as shortName, PI} from 'module'

shortName()
console.log(PI)

Meerdere benoemde leden exporteren

const namedMember1 = ...
const namedMember2 = ...
const namedMember3 = ...

export { namedMember1, namedMember2, namedMember3 }