import

Das import Statement wird verwendet um Funktionen, Objekte und Primitives zu importieren die von einem externen Modul, einem anderen Script, etc. exportiert wurden.

Hinweis:

Zur Zeit wird dieses Feature nicht von jedem Browser nativ unterstĂŒtzt. Viele Transpiler implementieren es, wie beispielsweise der Traceur CompilerBabelRollup oder Webpack.

Syntax

import name from "module-name";
import * as name from "module-name";
import { member } from "module-name";
import { member as alias } from "module-name";
import { member1 , member2 } from "module-name";
import { member1 , member2 as alias2 , [...] } from "module-name";
import defaultMember, { member [ , [...] ] } from "module-name";
import defaultMember, * as alias from "module-name";
import defaultMember from "module-name";
import "module-name";
name
Name des Objekts, das die importierten Daten empfÀngt
member, memberN
Namen der exportierten Member, die importiert werden
defaultMember
Name des exportierten Defaults, das importiert wird
alias, aliasN
Name des Objekts, das die importierte Property empfÀngt
module-name
Der Name des Moduls, das importiert wird. Also der Dateiname.

Beschreibung

Der Parameter name ist der Name des Objekts, das die exportierten Member empfĂ€ngt. Die member-Parameter legen einzelne Einheiten fest, wĂ€hrend der name Parameter alles importiert. name kann auch eine Funktion sein, wenn das Modul nur eine Einheit hat. Es folgen ein paar Beispiele fĂŒr die Syntax:

Importieren der gesamten Inhalte des Moduls. Folgendes fĂŒgt myModule in den aktuellen Namensraum ein, mit allen exportierten Verbindungen von "my-module" bzw. "my-module.js".

import * as myModule from "my-module";

EinfĂŒgen einer einzelnen Einheit eines Moduls. Folgendes fĂŒgt myMember in den aktuellen Namensraum ein.

import {myMember} from "my-module";

EinfĂŒgen von mehreren Einheiten eines Moduls. Folgendes fĂŒgt foo und bar in den aktuellen Namensraum ein.

import {foo, bar} from "my-module";

EinfĂŒgen und Vergeben eines Alias. Folgendes fĂŒgt shortName in den aktuellen Namensraum ein.

import {reallyReallyLongModuleMemberName as shortName} from "my-module";

EinfĂŒgen und Vergeben von mehreren Aliasen

import {reallyReallyLongModuleMemberName as shortName, anotherLongModuleName as short} from "my-module";

EinfĂŒgen eines ganzen Moduls, ohne dessen Namensbindungen zu importieren.

import 'my-module';

Defaults importieren

Ein Standardexport ist möglich (egal, ob es sich um ein Objekt, eine Funktion, eine Klasse oder anderes handelt). Dementsprechend ist es auch möglich einen Standard-import zu benutzen, um diese Standards zu importieren.

Die einfachste Version importiert die Standards direkt:

import myModule from "my-module";

Man kann diese Syntax auch benutzen, um die oben genannten imports durchzufĂŒren. In diesem Fall mĂŒssen die Standards aber wie folgt definiert werden:

import myDefault, * as myModule from "my-module";
// myModule wird als namespace benutzt

oder

import myDefault, {foo, bar} from "my-module";
// spezifische Imports nach Namen

Beispiele

Importieren einer weiteren Datei um AJAX JSON-Anfragen zu bearbeiten:

// --file.js--
function getJSON(url, callback) {
  let xhr = new XMLHttpRequest();
  xhr.onload = function () {
    callback(this.responseText)
  };
  xhr.open("GET", url, true);
  xhr.send();
}

export function getUsefulContents(url, callback) {
  getJSON(url, data => callback(JSON.parse(data)));
}

// --main.js--
import { getUsefulContents } from "file";
getUsefulContents("http://www.example.com", data => {
  doSomethingUseful(data);
});

Spezifikationen

BrowserkompatibilitÀt

BCD tables only load in the browser

Siehe auch