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; 🎜>
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
und Standardexport (Definitionsexport) Jedes Modul kann mehrere benannte Exporte haben, während jeder Standardexport nur ein Modul enthält. Benannter Export
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}
export default function() {}; // 导出一个函数
export default class(){}; // 导出一个类const D = 123;
export default D;
export { D as default };// "my-module.js" 模块
function cube(x) {
return x * x * x;
}
const foo = Math.PI + Math.SQRT2;
export { cube, foo };import { cube, foo } from 'my-module';
console.log(cube(3));
console.log(foo);// "my-module.js"模块
export default function (x) {
return x * x * x;
}import cube from 'my-module'; console.log(cube(3)); // 27
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"; // 指定成员导入和默认导入// 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!
