Detaillierte Einführung in Module in ES6 (mit Beispielen)

Der Inhalt dieses Artikels ist eine detaillierte Einführung in das Modul in ES6 (mit Beispielen). Ich hoffe, dass es für Sie nützlich ist . hat geholfen.

In diesem Artikel wird hauptsächlich die Verwendung des Modulmoduls, einer neuen Funktion von ES6, vorgestellt, das Konzept und die Funktion des Modulmoduls kurz erläutert und die Verwendungsmethode und die damit verbundenen Vorsichtsmaßnahmen des Modulmoduls analysiert die Form von Beispielen. Was benötigt wird, können Freunde auf

1. Einführung in das Modul

Die Klasse von ES6 ist lediglich Syntaxzucker für die objektorientierte Programmierung Schreibmethode zur Prototypenkettenvererbung des ES5-Konstruktors. Sie löst das Modularitätsproblem nicht. Zur Lösung dieses Problems wird die Modulfunktion vorgeschlagen.

In der Vergangenheit gab es in JavaScript kein Modulsystem, und es ist unmöglich, ein großes Programm in kleine, voneinander abhängige Dateien aufzuteilen und diese dann auf einfache Weise zusammenzusetzen. Andere Sprachen verfügen über diese Funktion.

Vor ES6 entwickelte die Community einige Modulladelösungen, die wichtigsten waren CommonJS und AMD. Ersteres ist für Server und letzteres für Browser. 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.

Die Designidee von ES6-Modulen besteht darin, so statisch wie möglich zu sein, damit die Abhängigkeiten des Moduls zur Kompilierungszeit bestimmt werden können (diese Art des Ladens wird als „Laden zur Kompilierungszeit“ bezeichnet). sowie die Ein- und Ausgabevariablen. Sowohl CommonJS- als auch AMD-Module können diese Dinge nur zur Laufzeit ermitteln.
Die Syntax für Browser zur Verwendung von ES6-Modulen lautet wie folgt.

<script type="module" src="fs.js"></script>

Der obige Code fügt ein Modul fs.js in die Webseite ein. Da das Typattribut auf Modul gesetzt ist, weiß der Browser, dass es sich um ein ES6-Modul handelt.

// ES6加载模块
import { stat, exists, readFile } from 'fs';

Der obige Code lädt ein Modul durch Import und lädt einige seiner Methoden.

2. Import und Export

Die Modulfunktion besteht hauptsächlich aus zwei Befehlen: Export und Import. Mit dem Exportbefehl wird die externe Schnittstelle des Moduls angegeben, mit dem Importbefehl werden die von anderen Modulen bereitgestellten Funktionen eingegeben.
Ein Modul ist eine unabhängige Datei. Alle Variablen in dieser Datei können nicht von außen abgerufen 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 auszugeben. Unten finden Sie eine JS-Datei, die den Exportbefehl zum Ausgeben von Variablen verwendet. Zusätzlich zu den oben genannten gibt es eine andere Möglichkeit,

// profile.js
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;

export zu schreiben. (Dies ist empfehlenswert, da Sie am Ende des Skripts auf einen Blick sehen können, welche Variablen ausgegeben werden.) Mit dem Befehl

// profile.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
export {firstName, lastName, year};

export können neben Variablen auch Funktionen oder Klassen ausgegeben werden. Normalerweise hat die vom Export ausgegebene Variable ihren ursprünglichen Namen, sie kann jedoch mit dem Schlüsselwort as umbenannt werden.

function v1() { ... }
function v2() { ... }
export {
  v1 as streamV1,
  v2 as streamV2,
  v2 as streamLatestVersion
};

Nachdem der Exportbefehl zum Definieren der externen Schnittstelle des Moduls verwendet wurde, können andere JS-Dateien dieses Modul (Datei) über den Importbefehl laden.

// main.js
import {firstName, lastName, year} from './profile';
function setName(element) {
  element.textContent = firstName + ' ' + lastName;
}

Der Importbefehl im obigen Code wird verwendet, um die Datei „profile.js“ und die Eingabevariablen daraus zu laden. Der Importbefehl akzeptiert ein Objekt (gekennzeichnet durch geschweifte Klammern), das die Variablennamen angibt, die aus anderen Modulen importiert werden sollen. Der Variablenname in den geschweiften Klammern muss mit dem Namen der externen Schnittstelle des importierten Moduls (profile.js) übereinstimmen.
Wenn Sie die Eingabevariable umbenennen möchten, verwenden Sie das Schlüsselwort as im Importbefehl, um die Eingabevariable umzubenennen.

import { lastName as surname } from './profile';

Der Importbefehl hat einen Lifting-Effekt und wird an die Spitze des gesamten Moduls befördert und zuerst ausgeführt.

foo();
import { foo } from 'my_module';

3. Gesamtladung des Moduls

Zusätzlich zur Angabe eines bestimmten zu ladenden Ausgabewerts können Sie auch die Gesamtladung verwenden, also ein Sternchen verwenden (*) um ein Objekt anzugeben. Alle Ausgabewerte werden in dieses Objekt geladen.
Es gibt eine Datei „circle.js“, die zwei Methoden „Fläche“ und „Umfang“ ausgibt.
Laden Sie nun dieses Modul.

// main.js
import { area, circumference } from './circle';
console.log('圆面积：' + area(4));
console.log('圆周长：' + circumference(14));

Die obige Methode besteht darin, die zu ladenden Methoden einzeln anzugeben. Die allgemeine Lademethode ist wie folgt.

import * as circle from './circle';
console.log('圆面积：' + circle.area(4));
console.log('圆周长：' + circle.circumference(14));

4. Export-Standard

Um den Benutzern Komfort zu bieten und ihnen das Laden des Moduls zu ermöglichen, ohne das Dokument zu lesen, wird der Export-Standardbefehl zur Angabe verwendet die Standardausgabe des Moduls.

// export-default.js
export default function () {
  console.log('foo');
}

Der obige Code ist eine Moduldatei export-default.js und seine Standardausgabe ist eine Funktion.
Wenn andere Module dieses Modul laden, kann der Importbefehl einen beliebigen Namen für die anonyme Funktion angeben.

// import-default.js
import customName from './export-default';
customName(); // 'foo'

Es ist zu beachten, dass nach dem Importbefehl keine geschweiften Klammern verwendet werden.
Im Wesentlichen besteht Export-Standard darin, eine Variable oder Methode namens „Default“ zu exportieren, und das System erlaubt Ihnen dann, ihr einen beliebigen Namen zu geben. Es kann keine Variablendeklarationsanweisung folgen.

// 正确
var a = 1;
export default a;
// 错误
export default var a = 1;

5. Die Essenz des ES6-Modulladens

Der Mechanismus des ES6-Modulladens unterscheidet sich völlig vom CommonJS-Modul. CommonJS-Module geben eine Kopie des Werts aus, während ES6-Module einen Verweis auf den Wert ausgeben.
Was das CommonJS-Modul ausgibt, ist eine Kopie des Ausgabewerts. Das heißt, sobald ein Wert ausgegeben wird, haben Änderungen innerhalb des Moduls keinen Einfluss auf diesen Wert. Schauen Sie sich das folgende Beispiel der Moduldatei lib.js an.

// lib.js
var counter = 3;
function incCounter() {
 counter++;
}
module.exports = {
 counter: counter,
 incCounter: incCounter,
};

Der obige Code gibt den internen Variablenzähler und die interne Methode incCounter aus, die diese Variable überschreibt. Laden Sie dann dieses Modul in main.js.

// main.js
var mod = require('./lib');
console.log(mod.counter); // 3
mod.incCounter();
console.log(mod.counter); // 3

上面代码说明，lib.js模块加载以后，它的内部变化就影响不到输出的mod.counter了。这是因为mod.counter是一个原始类型的值，会被缓存。除非写成一个函数，才能得到内部变动后的值。

// lib.js
var counter = 3;
function incCounter() {
 counter++;
}
module.exports = {
 get counter() {
  return counter
 },
 incCounter: incCounter,
};

上面代码中，输出的counter属性实际上是一个取值器函数。现在再执行main.js，就可以正确读取内部变量counter的变动了。
ES6模块的运行机制与CommonJS不一样，它遇到模块加载命令import时，不会去执行模块，而是只生成一个动态的只读引用。等到真的需要用到时，再到模块里面去取值，换句话说，ES6的输入有点像Unix系统的“符号连接”，原始值变了，import输入的值也会跟着变。因此，ES6模块是动态引用，并且不会缓存值，模块里面的变量绑定其所在的模块。
还是举上面的例子。

// lib.js
export let counter = 3;
export function incCounter() {
 counter++;
}
// main.js
import { counter, incCounter } from './lib';
console.log(counter); // 3
incCounter();
console.log(counter); // 4

上面代码说明，ES6模块输入的变量counter是活的，完全反应其所在模块lib.js内部的变化。
由于ES6输入的模块变量，只是一个“符号连接”，所以这个变量是只读的，对它进行重新赋值会报错。

// lib.js
export let obj = {};
// main.js
import { obj } from './lib';
obj.prop = 123; // OK
obj = {}; // TypeError

上面代码中，main.js从lib.js输入变量obj，可以对obj添加属性，但是重新赋值就会报错。因为变量obj指向的地址是只读的，不能重新赋值，这就好比main.js创造了一个名为obj的const变量。
最后，export通过接口，输出的是同一个值。不同的脚本加载这个接口，得到的都是同样的实例。

// mod.js
function C() {
 this.sum = 0;
 this.add = function () {
  this.sum += 1;
 };
 this.show = function () {
  console.log(this.sum);
 };
}
export let c = new C();

上面的脚本mod.js，输出的是一个C的实例。不同的脚本加载这个模块，得到的都是同一个实例。

// x.js
import {c} from './mod';
c.add();
// y.js
import {c} from './mod';
c.show();
// main.js
import './x';
import './y';

现在执行main.js，输出的是1。这就证明了x.js和y.js加载的都是C的同一个实例。

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in Module in ES6 (mit Beispielen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!