Heim >Web-Frontend >js-Tutorial >Ausführliche Erläuterung der Unterschiede und Zusammenhänge zwischen Export Default, Require and Exports und Export
Sind Sie immer noch besorgt über die Unterschiede und Zusammenhänge zwischen module.exports, exports, export und export default, import und require? Dieser Artikel reicht im Grunde aus!
1. Lassen Sie uns zunächst eine grundlegende Frage klären:
module.exports und exports gehören zum CommonJS Modulspezifikation! (Sie sind sich bei CommonJS nicht sicher? Meister, werfen Sie bitte einen Blick auf die CommonJS-Spezifikationen hier)
export und export default gehören zum ES6 Syntax (Nicht sicher über ES6? Schauen Sie sich bitte das ES6-Modul hier an) !
Ebenso gehören import und require zu ES6 bzw. CommonJS!
2. Es gibt noch einen weiteren klaren Punkt, um zu wissen, zu welchem Teil der Grammatik es gehört:
Modul. Exporte und Exporte, Export und Standardexport sind alleExportmodul > und
erforderlichsind Module importieren. Lassen Sie sich jetzt nicht verwirren, module.exports export entspricht „require import“ und export export entspricht „import import“. Hey! Warten Sie, warum sagen wir, dass „module.exports export“ „require import“ und „export export“ „import import“ entspricht? Dann gibt es noch „exports“ und „export default“? ? Dann machen wir weiter. 3. Der Unterschied und Zusammenhang zwischen module.exports und exports
An dieser Stelle muss ich die Modularität noch ein wenig erwähnen: Knotenanwendungen bestehen aus Modulen und übernehmen die CommonJS-Modulspezifikation. Gemäß dieser Spezifikation ist jede Datei ein Modul und hat ihren eigenen Gültigkeitsbereich. In einer Datei definierte Variablen, Funktionen und Klassen sind privat und für andere Dateien nicht sichtbar. Die CommonJS-Spezifikation legt fest, dass innerhalb jedes Moduls die Variable
das aktuelle Modul darstellt. Diese Variable ist ein Objekt und ihr -Attribut (d. h. ) ist die externe Schnittstelle. Beim Laden eines Moduls wird tatsächlich das -Attribut des Moduls geladen.
Der obige Code gibt Variablen
und Funktionen bis module
aus. Zum Laden von Modulen wird die Methode exports
module.exports
module.exports
verwendet.
var x = 5;var addX = function (value) { return value + x;};module.exports.x = x;module.exports.addX = addX;
Nachdem Sie gerade die Einführung in die CommonJS-Spezifikation gelesen haben, können Sie die folgenden Unterschiede und Zusammenhänge kennen:
Tatsächlich zeigt die Exportvariable auf das Modul .exports, und das Laden des Moduls ist eigentlich das module.exports
, das das Modul lädt. Dies entspricht einer Zeile wie dieser am Kopf jedes Moduls. x
addX
require
und
Standardexportvar example = require('./example.js');console.log(example.x); // 5console.log(example.addX(1)); // 6besteht hauptsächlich aus:
und module.exports
.
var exports = module.exports;importiert die von anderen Modulen bereitgestellten Schnittstellen. Export unterscheidet sich tatsächlich ein wenig vom Standardexport in der Art und Weise, wie sie geschrieben sind. Zum einen werden einzelne Schnittstellen exportiert, zum anderen wird standardmäßig eine gesamte Schnittstelle exportiert. Bei Verwendung des Befehls
muss der Benutzer den zu ladenden Variablennamen oder Funktionsnamen kennen, andernfalls kann er nicht geladen werden. Hier ist eine einfache Möglichkeit, es zu schreiben, ohne die spezifischen offengelegten Schnittstellennamen zu kennen. Verwenden Sie einfach den Befehl , um die Standardausgabe für das Modul anzugeben. Export kann wie folgt geschrieben werden:
Nachdem der Befehl export
zum Definieren der externen Schnittstelle des Moduls verwendet wurde, können andere JS-Dateien dieses Modul über import构成
laden Befehl. export
import
import
export default
Vergleichen wir den Exportstandard und die Exportausgabe.
<code class=" language-javascript"><span class="token comment">// testA.js<span class="token keyword">var f <span class="token operator">= <span class="token string">'Miel'<span class="token punctuation">;<span class="token keyword">var name <span class="token operator">= <span class="token string">'Jack'<span class="token punctuation">;<span class="token keyword">var data<span class="token operator">= <span class="token number">1988<span class="token punctuation">; export <span class="token punctuation">{f<span class="token punctuation">, name<span class="token punctuation">, data<span class="token punctuation">}<span class="token punctuation">;<br/></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>Sie können sehen, dass die erste Gruppe verwendet wird, die Anweisung muss keine geschweiften Klammern verwenden; die zweite Gruppe wird verwendet, die entsprechende Anweisung muss geschweifte Klammern verwenden, ein Modul kann also nur eine Standardausgabe haben kann nur einmal verwendet werden.
export
import
<code class=" language-javascript"><span class="token comment">// main.js import <span class="token punctuation">{</span></span></code><code class=" language-javascript"><span class="token comment"><span class="token keyword"><span class="token operator"><span class="token string"><span class="token punctuation"><span class="token keyword"><span class="token operator"><span class="token string"><span class="token punctuation"><span class="token keyword"><span class="token operator"><span class="token number"><span class="token punctuation"><span class="token punctuation">f<span class="token punctuation">, name<span class="token punctuation">, data</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code><code class=" language-javascript"><span class="token comment"><span class="token punctuation"><span class="token punctuation"><span class="token punctuation"><span class="token punctuation">} from <span class="token string">'./testA'<span class="token punctuation">;<br/></span></span></span></span></span></span></span></code>
<code class=" language-javascript"><span class="token comment">// export-default.js export default <span class="token keyword">function <span class="token punctuation">(<span class="token punctuation">) <span class="token punctuation">{ console<span class="token punctuation">.<span class="token function">log<span class="token punctuation">(<span class="token string">'foo'<span class="token punctuation">)<span class="token punctuation">;<span class="token punctuation">}<br/></span></span></span></span></span></span></span></span></span></span></span></span></code>
// 或者写成function foo() { console.log('foo');} export default foo;Nach dem Lesen ist es tatsächlich klar Die oben genannten , import und require sind nur zwei Syntaxen zum Importieren von Modulen, die zu ES6 bzw. CommonJS gehören.
<code class=" language-javascript"><span class="token comment">// import-default.js import customName from <span class="token string">'./export-default'<span class="token punctuation">;<span class="token function">customName<span class="token punctuation">(<span class="token punctuation">)<span class="token punctuation">;<span class="token comment"> // 'foo'<br/><br/></span></span></span></span></span></span></span></span></code>
Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Unterschiede und Zusammenhänge zwischen Export Default, Require and Exports und Export. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!