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

erforderlich

sind 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 exportsmodule.exportsmodule.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. xaddX

So können wir Methoden direkt zum Exportobjekt hinzufügen, um die externe Ausgabeschnittstelle darzustellen, genau wie das Hinzufügen zu module.exports. Beachten Sie, dass Sie die Variable exports nicht direkt auf einen Wert verweisen können, da dies dem Unterbrechen der Verbindung zwischen exports und module.exports gleichkommt.

require

3. Der Unterschied und Zusammenhang zwischen den Modulfunktionen Export

und

Standardexport

var example = require('./example.js');console.log(example.x); // 5console.log(example.addX(1)); // 6

besteht hauptsächlich aus:

und module.exports.

Exportieren Sie die externe Schnittstelle des Moduls, und der Befehl

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. exportimport

Exportstandard kann so geschrieben werden

importexport default

Vergleichen wir den Exportstandard und die Exportausgabe.

<code class=" javascript"><span class="token comment">// testA.js<span class="token keyword">var f <span class="token operator">= <span class="token string">&#39;Miel&#39;<span class="token punctuation">;<span class="token keyword">var name <span class="token operator">= <span class="token string">&#39;Jack&#39;<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.

exportimport</p>4. Der Unterschied und Zusammenhang zwischen Import und Require<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;code class=&quot; javascript&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;// main.js import &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;code class=&quot; javascript&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;&lt;span class=&quot;token operator&quot;&gt;&lt;span class=&quot;token string&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;&lt;span class=&quot;token operator&quot;&gt;&lt;span class=&quot;token string&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;&lt;span class=&quot;token operator&quot;&gt;&lt;span class=&quot;token number&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;f&lt;span class=&quot;token punctuation&quot;&gt;, name&lt;span class=&quot;token punctuation&quot;&gt;, data&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;code class=&quot; javascript&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;} from &lt;span class=&quot;token string&quot;&gt;&amp;#39;./testA&amp;#39;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;br/&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;</pre><div class="contentsignin">Nach dem Login kopieren</div></div><p></p>

<code class=" 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">&#39;foo&#39;<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=" javascript"><span class="token comment">// import-default.js
import customName from <span class="token string">&#39;./export-default&#39;<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"> // &#39;foo&#39;<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!