Einführung in den Export und Import von JavaScript-Modulen (ausführliche Erklärung)

Dieser Artikel bietet Ihnen eine Einführung (ausführliche Erklärung) zum Export und Import von JavaScript-Modulen. Ich hoffe, dass er für Freunde hilfreich ist.

Ich habe mir kürzlich einige im Vue-Framework geschriebene Programme angesehen und festgestellt, dass mein Front-End-Wissen noch einige Jahre zurückliegt. Auf den ersten Blick habe ich festgestellt, dass es verschiedene Importe von Modulen in Javascript-Programmen gibt. die imports Es ist der Syntax von Python sehr ähnlich, außer dass die beiden Schlüsselwörter from und import in umgekehrter Reihenfolge verwendet werden. Wenn Sie genau hinschauen, unterscheidet sich das Importmodul erheblich von Python. Die Voraussetzung ist, dass das Modul über Exporte verfügt und auch in Standardexporte und benannte Exporte unterteilt ist, was etwas problematisch ist. Der heutige Artikel fasst daher alle Exportformen und entsprechenden Importverwendungen zusammen.

ES6 implementiert Modulfunktionen auf der Ebene von Sprachstandards und wird zu einer universellen Modullösung für Browser und Server. Es kann CommonJS- und AMD-Spezifikationen vollständig ersetzen:

• Jedes Modul wird nur einmal geladen und jedes JS wird nur einmal ausgeführt. Wenn Sie das nächste Mal dieselbe Datei im selben Verzeichnis laden, wird sie direkt aus dem Speicher gelesen

• Alle innerhalb eines Moduls deklarierten Variablen sind alle lokalen Variablen und verschmutzen nicht den globalen Bereich

• Variablen oder Funktionen innerhalb des Moduls können durch Export exportiert werden; 🎜>

Ein Modul kann andere Module importieren
2 Die Modulfunktion besteht hauptsächlich aus zwei Befehlen: Export und Import. Der Exportbefehl wird verwendet, um die externe Schnittstelle des Moduls anzugeben, und der Importbefehl wird verwendet, um die von anderen Modulen bereitgestellten Funktionen einzugeben.

3 Ein Modul ist eine unabhängige Datei und alle Variablen innerhalb der Datei kann nicht extern bezogen werden. Wenn Sie möchten, dass die Außenwelt eine Variable innerhalb des Moduls lesen kann, müssen Sie das Schlüsselwort export verwenden, um die Variable

var year = '2018';
var month = 'Febuary';
export {year, month};

export export module

export-Syntaxanweisung zu verwenden Exportfunktionen, Objekte, Gibt den ursprünglichen Wert der Datei (oder des Moduls) an. Es gibt zwei Möglichkeiten, Module zu exportieren:

Benannter Export (Namensexport)

und Standardexport (Definitionsexport) Jedes Modul kann mehrere benannte Exporte haben, während jeder Standardexport nur ein Modul enthält. Benannter Export

Das Modul kann Exportobjekte über das Export-Präfix-Schlüsselwort deklarieren, und es können mehrere Exportobjekte vorhanden sein. Diese Exportobjekte werden durch Namen unterschieden, die als benannte Exporte bezeichnet werden.

export { func }; // 导出一个已定义的函数func
export const foo = Math.sqrt(100); // 导出一个常量

Wir können die Schlüsselwörter * und from verwenden, um die Modulvererbung zu implementieren:

export * from 'base_module';

Beim Exportieren eines Moduls können Sie das Modul angeben exportierte Mitglieder. Exportierte Mitglieder können als öffentliche Mitglieder in der Klasse betrachtet werden, während nicht exportierte Mitglieder als private Mitglieder in der Klasse betrachtet werden können:

var name = 'Kevin的居酒屋';
var domain = 'http://coffee.toast.com';
 
export {name, domain}; // 相当于导出{name:name,domain:domain}

Wenn das Modul exportiert wird, können wir das Schlüsselwort as verwenden, um das exportierte umzubenennen Mitglieder, wie oben gezeigt, Export kann wie folgt geschrieben werden:

export {name as siteName, domain}

Achten Sie auf die Syntaxfehler:

export 1; 
var a = 100;
export a;

Beim Exportieren einer Schnittstelle muss diese eine Eins-zu-Eins-Entsprechung mit dem haben Variablen innerhalb des Moduls. Es macht keinen Sinn, 1 direkt zu exportieren, und es ist unmöglich, beim Importieren eine entsprechende Variable zu haben. Obwohl es wahr zu sein scheint, ist der Wert von a eine Zahl und die Dekonstruktion kann daher überhaupt nicht abgeschlossen werden es muss in der Form

geschrieben werden. Selbst wenn einer Funktion a zugewiesen ist, wird nicht empfohlen, das obige Formular zum Exportieren zu verwenden, da die meisten Stile vorschlagen, dass es am besten ist, am Ende des Moduls einen Export zu verwenden, um alle Schnittstellen zu exportieren, genau wie in den obigen Beispielen.

export aStandardexportexport {a}

Der Standardexport wird auch als definierter Export bezeichnet. Beim benannten Export können mehrere Werte exportiert werden. Beim Importieren einer Referenz muss jedoch derselbe Name auch für die Referenzierung des entsprechenden Werts verwendet werden. Beim Standardexport wird nur ein einzelner Wert exportiert. Bei dieser Ausgabe kann es sich um eine Funktion, eine Klasse oder einen anderen Werttyp handeln, der beim Importieren des Moduls einfacher zu referenzieren ist.

export default function() {}; // 导出一个函数
export default class(){}; // 导出一个类

Der Standardexport kann als eine andere Form des benannten Exports verstanden werden, der als benannter Export unter Verwendung des Standardnamens betrachtet werden kann.

Die folgenden zwei Exportmethoden sind äquivalent:

const D = 123; 
export default D;
export { D as default };

Beim Exportieren eines Moduls mit dem Namen:

// "my-module.js" 模块
function cube(x) {
    return x * x * x;
}
const foo = Math.PI + Math.SQRT2;
export { cube, foo };

In einem anderen Modul (JS-Datei) können wir wie folgt zitieren:

import { cube, foo } from 'my-module';
console.log(cube(3));
console.log(foo);

Bei Verwendung des Standardexports eines Moduls:

// "my-module.js"模块
export default function (x) {
return x * x * x;
}

In einem anderen Modul können wir wie folgt zitieren, was einfacher zu verwenden ist als der Namensexport:

import cube from 'my-module';
console.log(cube(3)); // 27

import Importmodul

Die Importsyntaxanweisung wird verwendet, um Funktionen, Objekte und die Originalwerte bestimmter Dateien (oder Module) aus exportierten Modulen und Skripten zu importieren. Der Import des Importmoduls entspricht der Exportfunktion des Exportmoduls. Es gibt außerdem zwei Modulimportmethoden: benannter Import (Namensimport) und Standardimport (Definitionsimport).

Hinweis:

Der Import muss am Anfang der Datei platziert werden und kein anderer logischer Code ist davor zulässig. Dies steht im Einklang mit dem Importstil von alle anderen Programmiersprachen. Benannter Import

Wir können importierte Mitglieder in den aktuellen Bereich einfügen, indem wir einen Namen angeben. Sie können ein einzelnes Mitglied oder mehrere Mitglieder importieren:

Beachten Sie, dass die Variablen in den geschweiften Klammern den Variablen nach dem Export entsprechen

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

通过*符号，我们可以导入模块中的全部属性和方法。当导入模块全部导出内容时，就是将导出模块（’my-module.js’）所有的导出绑定内容，插入到当前模块（’myModule’）的作用域中：

import * as myModule from "my-module";

默认导入

在模块导出时，可能会存在默认导出。同样的，在导入时可以使用import指令导入这些默认值。直接导入默认值：

import defaultName from "my-module";
import myDefault, {foo, bar} from "my-module"; // 指定成员导入和默认导入

default关键字

// my-module.js
export default function() {}
 
// 等效于：
function func() {};
export {func as default};

在import的时候，可以这样用：

import a from './my-module';
 
// 等效于，或者说就是下面这种写法的简写
import {default as a} from './my-module';

这个语法糖的好处就是import的时候，可以省去{}。

简单的说，如果import的时候，你发现某个变量没有花括号括起来（没有*号），那么你在脑海中应该把它还原成有花括号的{default as ...}语法，所以import $,{each,map} from 'jquery';import后面第一个$是{default as $}的替代写法。

Das obige ist der detaillierte Inhalt vonEinführung in den Export und Import von JavaScript-Modulen (ausführliche Erklärung). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!