Ausführliche Erklärung des Imports in JavaScript (mit Beispielen)

Dieser Artikel enthält eine detaillierte Erklärung zum Import in JavaScript (mit Beispielen). Freunde in Not können darauf verweisen. Die

import-Anweisung wird verwendet, um eine von einem anderen Modul exportierte Bindung zu importieren. Unabhängig davon, ob der strikte Modus deklariert ist, werden importierte Module im strikten Modus ausgeführt. Die Importanweisung kann nicht in eingebetteten Skripten verwendet werden.

Syntax

import defaultExport from “module-name”;
import * as name from “module-name”;
import { export } from “module-name”;
import { export as alias } from “module-name”;
import { export1 , export2 } from “module-name”;
import { export1, export2 as alias2 , [...] } from “module-name”;
import defaultExport, { export [ , [...] ] } from “module-name”;
import defaultExport, * as name from “module-name”;
import “module-name”;

defaultExport

bezieht sich auf den Namen des Standardexports des Moduls.

Modulname

Das zu importierende Modul. Dies ist normalerweise ein relativer oder absoluter Pfadname zur .js-Datei, die das Modul enthält, und darf die Erweiterung .js nicht enthalten. Einige Paketierungstools erlauben oder erfordern möglicherweise die Verwendung dieser Erweiterung. Überprüfen Sie, ob in Ihrer Laufzeitumgebung nur Zeichenfolgen in einfachen und doppelten Anführungszeichen zulässig sind.

Name

Der Name des Modulobjekts, das bei Referenzierung als eine Art Namespace verwendet wird.

Export, ExportN

Name zum Importieren exportieren

Alias, AliasN

Geben Sie die Referenz an Name des Imports.

Beschreibung

Der Namensparameter ist der Name des „Modulobjekts“, das einen Namespace verwendet, um auf den Export zu verweisen. Der Exportparameter gibt einen einzelnen benannten Export an, während die Import * as Name-Syntax alle Exporte importiert.

Importieren Sie den Inhalt des gesamten Moduls

Dadurch wird myModule in den aktuellen Bereich eingefügt, wobei alle Module aus der Datei unter /modules/my-module.js exportiert werden.

import * as myModule from ‘/modules/my-module.js’;

Der Zugriff auf den Export bedeutet hier die Verwendung des Modulnamens (in diesem Fall „myModule“) als Namespace. Wenn das oben importierte Modul beispielsweise doAllTheAmazingThings() enthält, können Sie es folgendermaßen aufrufen:

myModule.doAllTheAmazingThings();

Einen einzelnen Export importieren

Gegeben ein Objekt oder ein Wert mit dem Namen myExport , das aus dem Modul my-module exportiert wurde (da das gesamte Modul exportiert wird) oder explizit exportiert wurde (mithilfe der Export-Anweisung), fügt myExport in den aktuellen Bereich ein.

import { myExport } from ‘/modules/my-module.js’;

Mehrere Exporte importieren

Foo und bar in den aktuellen Bereich einfügen.

import { foo, bar } from ‘/modules/my-module.js’;

Exporte mit Aliasen importieren

Exporte können beim Importieren umbenannt werden, beispielsweise durch Einfügen von shortName in den aktuellen Bereich.

import { reallyReallyReallyLongModuleExportName as shortName } from “/modules/my-module.js”;

Mehrere Exporte beim Import umbenennen

Verwenden Sie Aliase, um mehrere Exporte eines Moduls zu importieren.

import {
    reallyReallyReallyLongModuleMemberName as shortName,
    anotherLongModuleName as short
} form “/modules/my-module.js”;

Importieren eines Moduls nur für Nebenwirkungen

Das Modul importiert nur für Nebenwirkungen (neutrales Wort, keine abwertende Konnotation) und importiert nichts im Modul, wodurch der globale Code des Moduls ausgeführt wird , importiert aber eigentlich keine Werte.

import “/modules/my-module.js”

Standardwerte importieren

Verfügbar, wenn der Standardexport (ob Objekt, Funktion, Klasse usw.) aktiv ist. Solche Standardwerte können dann mithilfe von Importanweisungen importiert werden.
Die einfachste Verwendung besteht darin, den Standardwert direkt zu importieren:

import myDefault from “/modules/my-module.js”;

Es ist auch möglich, die Standardsyntax zusammen mit der oben genannten Verwendung zu verwenden (Namespace-Import und benannter Import). In diesem Fall muss zunächst der Standardimport deklariert werden.

import myDefault, * as myModule from “/modules/my-module.js”;

oder

import myDefault, { foo, bar } from “/modules/my-module.js”;

Beispiel

Importiert aus einem Hilfsmodul, um bei der Bearbeitung von AJAX-DSON-Anfragen zu helfen.

Modul: 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 getUserFulContents(url, callback){
    getJSON(url, data => callback(JSON.parse(data)));
}

Hauptprogramm: main.js

import { getUserFulContents } from “/modules/file.js”;
getUserFulContents(‘http://www.example.com”, 
    data => { doSomethingUseful(data); } )

Ergänzung

strenger Modus
strenger Modus
eingebettetes Skript

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung des Imports in JavaScript (mit Beispielen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!