Ausführliche Erläuterung der Verwendung und des Unterschieds zwischen Export-Import und Export-Standard in JavaScript ES6

Dieser Artikel stellt Ihnen hauptsächlich die Verwendung und die Unterschiede von Export, Import und Exportstandard in JavaScript ES6 vor. Ich glaube, dass es für jeden hilfreich sein wird, ES6 zu lernen . Wenn Sie es brauchen, können Freunde darauf verweisen, schauen wir uns unten um.

Vorwort

Ich glaube, viele Leute haben Export, Export Default und Import verwendet, aber was ist der Unterschied zwischen ihnen? Bevor wir uns die Unterschiede zwischen ihnen ansehen, werfen wir zunächst einen Blick auf ihre Verwendung.

Verwendung von ES6-Import und -Export

Die js-Modulladelösung ist bereits vor ES6 erschienen. Die wichtigsten sind CommonJS- und AMD-Spezifikationen. CommonJS wird hauptsächlich auf Servern verwendet, um synchrones Laden zu erreichen, z. B. NodeJS. Für Browser gelten AMD-Spezifikationen, wie zum Beispiel requirejs, das asynchron geladen wird. Es gibt auch CMD-Spezifikationen für synchrone Ladelösungen wie seaJS.

ES6 implementiert Modulfunktionen auf der Ebene von Sprachspezifikationen und die Implementierung ist recht einfach. Es kann die vorhandenen CommonJS- und AMD-Spezifikationen vollständig ersetzen und zu einer universellen Modullösung für Browser und Server werden.

ES6-Modul hat hauptsächlich zwei Funktionen: Export und Import

• Export wird verwendet, um dieses Modul extern auszugeben (eine Datei kann als eine Datei verstanden werden). module ) Die Schnittstelle der Variablen

• import wird verwendet, um ein anderes Modul zu laden, das die Exportschnittstelle in einem Modul enthält.

Das heißt, nachdem der Exportbefehl zum Definieren der externen Schnittstelle des Moduls verwendet wurde, können andere JS-Dateien dieses Modul (Datei) über den Importbefehl laden. Wie folgt (vorausgesetzt, die Dateien a und b befinden sich im selben Verzeichnis)

// a.js

var sex="boy";
var echo=function(value){
　　console.log(value)
}
export {sex,echo} 
//通过向大括号中添加sex，echo变量并且export输出，就可以将对应变量值以sex、echo变量标识符形式暴露给其他文件而被读取到
//不能写成export sex这样的方式，如果这样就相当于export "boy",外部文件就获取不到该文件的内部变量sex的值，因为没有对外输出变量接口,只是输出的字符串。

// b.js
通过import获取a.js文件的内部变量，{}括号内的变量来自于a.js文件export出的变量标识符。
import {sex,echo} from "./a.js" 
console.log(sex) // boy
echo(sex) // boy

a.js-Datei kann auch gemäß der folgenden Exportsyntax geschrieben werden, ist jedoch nicht so intuitiv wie oben und wird nicht empfohlen.

// a.js
export var sex="boy";
export var echo=function(value){
　　console.log(value)
}

//因为function echo(){}等价于 var echo=function(){}所以也可以写成
export function echo(value){
　　　console.log(value)
}

Das Obige ist die grundlegende Verwendung von Export und Modul und erweitert dann die Studie

Wie aus dem vorherigen ersichtlich ist Beispiel: b.js Bei Verwendung des Importbefehls muss der Benutzer die von a.js bereitgestellte Variablenkennung kennen, andernfalls kann sie nicht geladen werden. Sie können den Befehl export default verwenden, um die Standardausgabe für das Modul anzugeben, sodass Sie den Variablennamen des zu ladenden Moduls nicht kennen müssen.

//a.js
var sex="boy";
export default sex（sex不能加大括号）
//原本直接export sex外部是无法识别的，加上default就可以了.但是一个文件内最多只能有一个export default。
其实此处相当于为sex变量值"boy"起了一个系统默认的变量名default，自然default只能有一个值，所以一个文件内不能有多个export default。

// b.js
本质上，a.js文件的export default输出一个叫做default的变量，然后系统允许你为它取任意名字。所以可以为import的模块起任何变量名，且不需要用大括号包含
import any from "./a.js"
import any12 from "./a.js" 
console.log(any,any12) // boy,boy

Der Unterschied zwischen Export, Import und Export-Standard in ES6

In Javascript ES6 sowohl Export als auch Export-Standard sind verfügbar. Um Konstanten , Funktionen , Dateien, Module usw. zu exportieren, können Sie import + (constant | function | file | module) name in other übergeben Importieren Sie die Datei- oder Modulmethode, damit sie verwendet werden kann. In einer Datei oder einem Modul kann es jedoch mehrere Exporte und Importe geben, und es gibt nur einen Exportstandard.

Spezifische Verwendung:

1,

//demo1.js
export const str = 'hello world'

export function f(a){
 return a+1
}

entsprechende Importmethode:

//demo2.js
import { str, f } from 'demo1' //也可以分开写两次，导入的时候带花括号

2,

//demo1.js
export default const str = 'hello world'

entsprechende Importmethode:

//demo2.js
import str from 'demo1' //导入的时候没有花括号

Zusammenfassung

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Verwendung und des Unterschieds zwischen Export-Import und Export-Standard in JavaScript ES6. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!