Explication détaillée des différences et des connexions entre l'exportation par défaut, l'exigence et l'exportation, et l'exportation

Êtes-vous toujours inquiet des différences et des connexions entre module.exports, exports, export et export default, import et require ? Cet article est fondamentalement suffisant !

1. Tout d'abord, abordons une question de base :

module.exports et exports appartiennent au CommonJS. spécification du module ! (Vous n'êtes pas sûr de commonjs ? Maître, veuillez jeter un œil aux spécifications de commonjs ici)

export et export default appartiennent à ES6 syntaxe (Vous n'êtes pas sûr de ES6 ? Maître, veuillez jeter un œil au module ES6 ici) !

De même, import et require appartiennent respectivement à ES6 et CommonJS !

2. Il y a un autre point clair pour savoir à quelle partie de la grammaire il appartient :

module. exports et exports, export et export par défaut sont tousModule d'exportation > et

exigent

sont importer des modules. Alors ne vous y trompez pas maintenant, module.exports export correspond à require import, et export export correspond à import import. Hé ! Attendez, pourquoi dit-on que module.exports export correspond à require import, et export export correspond à import import ? Ensuite, il y a exports et export default ! ? Alors continuons. 3. La différence et la connexion entre module.exports et exports

À ce stade, je dois mentionner la modularité : Les applications de nœuds sont composées de modules et adoptent la spécification de module CommonJS. Selon cette spécification, chaque fichier est un module et a sa propre portée. Les variables, fonctions et classes définies dans un fichier sont privées et ne sont pas visibles par les autres fichiers. La spécification CommonJS stipule qu'au sein de chaque module, la variable
représente le module actuel. Cette variable est un objet et son attribut (c'est-à-dire ) est l'interface externe. Le chargement d'un module charge en fait l'attribut du module.

Le code ci-dessus génère des variables

et des fonctions

à module. La méthode exportsmodule.exportsmodule.exports est utilisée pour charger les modules.

var x = 5;var addX = function (value) {  return value + x;};module.exports.x = x;module.exports.addX = addX;

Après avoir lu l'introduction à la spécification commonjs tout à l'heure, vous pouvez connaître les différences et connexions suivantes :

En fait, la variable exports pointe vers le module .exports, et le chargement du module est en fait le module.exports qui charge le module. Cela équivaut à avoir une ligne comme celle-ci en tête de chaque module. xaddX

Nous pouvons donc ajouter des méthodes directement à l'objet exports pour représenter l'interface de sortie externe, tout comme l'ajouter à module.exports. Notez que vous ne pouvez pas pointer directement la variable exports vers une valeur, car cela équivaut à couper la connexion entre exports et module.exports.

require

3. La différence et la connexion entre les fonctions du module export

et

export par défaut

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

sont principalement composées de :

et module.exports.

Exportez l'interface externe du module, et la commande

var exports = module.exports;

importe les interfaces exposées par d'autres modules.

L'exportation est en fait légèrement différente de l'exportation par défaut dans la façon dont elles sont écrites. L'une consiste à exporter des interfaces individuelles et l'autre consiste à exporter une interface entière par défaut. Lors de l'utilisation de la commande

, l'utilisateur doit connaître le nom de la variable ou de la fonction à charger, sinon elle ne pourra pas être chargée. Voici un moyen simple de l'écrire sans connaître les noms d'interface spécifiques exposés. Utilisez simplement la commande pour spécifier la sortie par défaut du module. export peut s'écrire comme ceci :

Après avoir utilisé la commande export pour définir l'interface externe du module, d'autres fichiers JS peuvent charger ce module via le import构成 commande. exportimport

La valeur par défaut de l'exportation peut être écrite comme ceci

importexport default

Comparons la valeur par défaut de l'exportation et la sortie de l'exportation.

<code class=" language-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>

Vous pouvez voir que le premier groupe est utilisé, l'instruction n'a pas besoin d'utiliser des accolades ; le deuxième groupe est utilisé, l'instruction correspondante doit utiliser des accolades, un module ne peut avoir qu'une seule sortie par défaut, donc il ne peut être utilisé qu’une seule fois.

exportimport</p>4. La différence et le lien entre importer et require<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">&lt;code class=&quot; language-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; language-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; language-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">Copier après la connexion</div></div><p></p>

<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">&#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;

C'est en fait clair après la lecture les éléments ci-dessus, import et require ne sont que deux syntaxes pour importer des modules appartenant respectivement à ES6 et CommonJS.

<code class=" language-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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!