내보내기 기본값, 요구 및 내보내기, 내보내기 간의 차이점과 연결에 대한 자세한 설명

아직도 module.exports, 내보내기, 내보내기 및 내보내기 기본값, 가져오기 및 요구 사항 사이의 차이점과 연결에 대해 걱정하고 계시나요?

1 먼저 기본적인 질문을 알아봅시다.

module.exports 및 exports는 CommonJS 모듈 사양에 속합니다! (commonjs에 대해 모르시나요? 마스터님, 여기에서 commonjs 사양을 살펴보세요.)

export 및 export default는 ES6 구문에 속합니다. (ES6에 대해 잘 모르시나요? 마스터님, ES6를 살펴보시기 바랍니다.) 모듈은 여기)!

마찬가지로 import 및 require는 각각 ES6 및 CommonJS에 속합니다!

두 번째로, 어떤 구문에 속하는지 알 수 있는 명확한 점이 있습니다.

module.exports 및 exports, export 및 export 기본값 DU 내보내기 모듈은

import이고 require은 입니다. 모듈 가져오기.

이제 혼동하지 마세요. module.exports 내보내기는 require import에 해당하고, 내보내기 내보내기는 import import에 해당합니다.

안녕하세요! 잠깐, 왜 module.exports 내보내기가 require import에 해당하고 내보내기 내보내기가 import import에 해당한다고 말하는 걸까요? 그러면 내보내기와 내보내기 기본값이 있습니다! ? 그럼 계속합시다.

3. module.exports과 exports

여기서 모듈성에 대해 조금 언급해야 합니다.

노드 애플리케이션은 모듈로 구성되며 CommonJS를 사용합니다. 모듈 사양.

이 사양에 따르면 각 파일은 모듈이며 자체 범위를 갖습니다. 파일에 정의된 변수, 함수 및 클래스는 비공개이며 다른 파일에는 표시되지 않습니다.

CommonJS 사양에서는 각 모듈 내부에서 모듈 변수가 현재 모듈을 나타낸다고 규정합니다. 이 변수는 개체이며 exports 속성(예: module.exports)은 외부 인터페이스입니다. 모듈을 로드하면 실제로 모듈의 module.exports 속성이 로드됩니다. 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.exports输出变量x和函数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;

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

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

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

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

export可以这样写

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

使用export命令定义了模块的对外接口以后，其他 JS 文件就可以通过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">&#39;./testA&#39;<span class="token punctuation">;<br/></span></span></span></span></span></span></span></code>

export default可以这样写

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

<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和export 输出。

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

<strong>四、import和require</strong><strong>的区别与联系</strong>

rrreee

위 코드는 module.exportsx 및 addX 함수. 🎜🎜require 메소드는 모듈을 로드하는 데 사용됩니다. 🎜

🎜rrreee🎜지금 commonjs 사양에 대한 소개를 읽고 나면 다음과 같은 차이점과 연관성을 알 수 있습니다. 🎜🎜실제로 내보내기 변수는 module.exports를 가리킵니다. , 그리고 모듈을 로드하면 실제로 이 모듈에 대한 module.exports가 로드됩니다. 이는 각 모듈의 헤드에 이와 같은 줄을 두는 것과 같습니다. 🎜rrreee🎜따라서 module.exports에 추가하는 것처럼 외부 출력 인터페이스를 나타내기 위해 내보내기 개체에 직접 메서드를 추가할 수 있습니다. 내보내기 변수에 값을 직접 지정할 수 없다는 점에 유의하세요. 이는 내보내기와 module.exports 사이의 연결을 끊는 것과 같기 때문입니다. 🎜🎜🎜3.export🎜와 🎜export default🎜🎜🎜의 차이점과 연결 모듈 기능은 주로 export와 import로 구성됩니다. export는 모듈의 외부 인터페이스를 내보내고 import 명령은 다른 모듈에서 노출된 인터페이스를 가져옵니다. 🎜🎜사실 내보내기와 기본 내보내기는 작성상 약간 다릅니다. 하나는 개별 인터페이스를 내보내는 것이고, 다른 하나는 기본적으로 전체 인터페이스를 내보내는 것입니다. import 명령을 사용할 때 사용자는 로드할 변수나 함수의 이름을 알아야 합니다. 그렇지 않으면 로드할 수 없습니다. 노출된 특정 인터페이스 이름을 모르고 작성하는 간단한 방법은 다음과 같습니다. export default 명령을 사용하여 모듈의 기본 출력을 지정하세요. 🎜🎜export는 이렇게 작성할 수 있습니다🎜rrreee🎜 export 명령을 사용하여 모듈의 외부 인터페이스를 정의한 후 다른 JS 파일에서 import 명령을 통해 이 모듈을 로드할 수 있습니다. . 🎜rrreee🎜export default는 이렇게 쓸 수 있습니다🎜rrreeerrreeerrreee🎜다음은 내보내기 기본값과 내보내기의 출력을 비교합니다. 🎜🎜첫 번째 그룹이 사용되고 명령문은 중괄호를 사용할 필요가 없으며 해당 명령문은 중괄호를 사용해야 하며 모듈은 하나의 기본 출력만 가질 수 있으므로 사용할 수 있습니다. 한 번. 🎜🎜🎜🎜4. import와 require의 차이점과 연결🎜🎜🎜🎜🎜위를 읽고 나면 이미 명확해졌습니다. Import와 require는 ES6에 속하는 모듈을 가져오기 위한 두 가지 유형의 구문입니다. 그리고 CommonJS. 🎜🎜

위 내용은 내보내기 기본값, 요구 및 내보내기, 내보내기 간의 차이점과 연결에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!