エクスポートのデフォルト、要求とエクスポート、およびエクスポートの違いと関連性の詳細な説明

module.exports、exports、export と exportdefault、import と require の違いや接続についてまだ心配していませんか? 基本的にはこの記事で十分です。

1. まず、基本的な質問を理解しましょう:

module.exports と exports は CommonJS モジュール仕様に属しています。 (commonjs についてよくわかりません? マスター、ここで commonjs の仕様を見てください)

export と exportdefault は ES6 構文 に属します (ES6 についてよくわかりません? マスター、ES6 の仕様を見てください)モジュールはこちら)!

同様に、importとrequireはそれぞれES6とCommonJSに属します。

2 番目に、それがどの構文に属するかを明確にする必要があります:

module.exports と exports、export と デフォルトのエクスポート 都エクスポートモジュール

importとrequire モジュールをインポートします。 だから、ここで混乱しないでください。 module.exports のエクスポートは require import に対応し、export のエクスポートは import のインポートに対応します。

やあ！待ってください。なぜ module.exports のエクスポートは require import に対応し、export のエクスポートは import のインポートに対応すると言えるのでしょうか。では、exports と export default があるのです。 ?それでは続けましょう。

3. module.exports

と

exportsの違いと関係 ここでモジュール性について少し触れておく必要があります: Node アプリケーションはモジュールで構成され、CommonJS を使用しますモジュール仕様。 この仕様によれば、各ファイルはモジュールであり、独自のスコープを持ちます。ファイル内で定義された変数、関数、およびクラスはプライベートであり、他のファイルからは参照できません。 CommonJS 仕様では、各モジュール内の module 変数が現在のモジュールを表すと規定されています。この変数はオブジェクトであり、その exports 属性 (つまり、module.exports) は外部インターフェイスです。モジュールをロードすると、実際にはモジュールの module.exports 属性がロードされます。

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

上記のコードは、module.exportsx と関数 addX。

require メソッドはモジュールのロードに使用されます。

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

commonjs 仕様の概要を読んだ後は、次の違いと関連性を知ることができます:

実際、exports 変数は module.exports を指します。 、モジュールをロードすると、実際にはこのモジュールの module.exports がロードされます。これは、各モジュールの先頭に次のような行があることと同じです。

var exports = module.exports;

module变量代表当前模块。这个变量是一个对象，它的exports属性（即module.exports）是对外的接口。加载某个模块，其实是加载该模块的module.exports属性。

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

上面代码通过module.exports输出变量x和函数addX。

require方法用于加载模块。

<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">&#39;./testA&#39;<span class="token punctuation">;<br/></span></span></span></span></span></span></span></code>

看了刚刚这段commonjs规范上面的介绍可以知道以下区别与联系：

其实exports变量是指向module.exports，加载模块实际是加载该模块的module.exports。这等同在每个模块头部，有一行这样的命令。

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

于是我们可以直接在 exports 对象上添加方法，表示对外输出的接口，如同在module.exports上添加一样。注意，不能直接将exports变量指向一个值，因为这样等于切断了exports与module.exports的联系。

三、export和export default的区别与联系

模块功能主要由：export和import构成。export导出模块的对外接口，import命令导入其他模块暴露的接口。

export其实和export default就是写法上面有点差别，一个是导出一个个单独接口，一个是默认导出一个整体接口。使用import命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载。这里就有一个简单写法不用去知道有哪些具体的暴露接口名，就用export default命令，为模块指定默认输出。

export可以这样写

// 或者写成function foo() {
  console.log('foo');}
export default foo;

使用export命令定义了模块的对外接口以后，其他 JS 文件就可以通过import命令加载这个模块。

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

export default可以这样写

rrreeerrreeerrreee

下面比较一下export default和export 输出。

可以看到第一组是使用，语句不需要使用大括号；第二组使用，对应的语句需要使用大括号，一个模块只能有一个默认输出，所以只能使用一次。

<strong>四、import和require</strong><strong>的区别与联系</strong>そのため、module.exports に追加するのと同じように、exports オブジェクトにメソッドを直接追加して、外部出力インターフェイスを表すことができます。これは、exports と module.exports の間の接続を切断することと同じであるため、exports 変数に値を直接指定することはできないことに注意してください。

3.export

と🎜exportdefaultの違いと関連性🎜🎜🎜モジュール関数は主にexportとimportで構成されます。 export コマンドはモジュールの外部インターフェイスをエクスポートし、import コマンドは他のモジュールによって公開されたインターフェイスをインポートします。 🎜🎜実際、エクスポートとデフォルトのエクスポートは書き方が少し異なります。1 つは個別のインターフェイスをエクスポートすること、もう 1 つはデフォルトでインターフェイス全体をエクスポートすることです。 import コマンドを使用する場合、ユーザーはロードする変数または関数の名前を知っている必要があります。そうでないと、ロードできません。ここでは、特定の公開インターフェイス名を知らなくても、 exportdefault コマンドを使用してモジュールのデフォルト出力を指定する簡単な方法を示します。 🎜🎜エクスポートは次のように記述できます🎜rrreee🎜 export コマンドを使用してモジュールの外部インターフェイスを定義した後、他の JS ファイルは import コマンドを通じてこのモジュールをロードできます。 🎜rrreee🎜exportdefaultは次のように書くことができます🎜rrreeerrreeerrreee🎜以下はexportdefaultとexportの出力を比較しています。 🎜🎜最初のグループが使用されており、ステートメントでは中かっこを使用する必要がありません。2 番目のグループが使用されており、対応するステートメントでは中かっこを使用する必要があり、モジュールにはデフォルトの出力が 1 つしかないため、それのみを使用できることがわかります。一度。 🎜🎜🎜🎜4. import と require の違いと関係🎜🎜🎜🎜🎜 上記を読めば、ES6 に属するモジュールをインポートするための 2 種類の構文は明らかです。と CommonJS をそれぞれ指定します。 🎜🎜

以上がエクスポートのデフォルト、要求とエクスポート、およびエクスポートの違いと関連性の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。