ES6의 모듈에 대한 자세한 소개(예제 포함)

이 기사는 ES6의 모듈에 대한 자세한 소개를 제공합니다(예제 포함). 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

이 글에서는 ES6의 새로운 기능인 모듈의 사용법을 주로 소개합니다. 모듈의 개념과 기능을 간략하게 설명하고, 모듈의 사용 방법과 관련 주의사항을 예시 형태로 분석합니다. 필요하면 참조하세요

1. 모듈 소개

ES6의 클래스는 ES5 생성자의 프로토타입 체인 상속 작성 방법을 업그레이드한 것일 뿐 모듈화 문제를 해결하지는 않습니다. 이러한 문제를 해결하기 위해 Module 기능이 제안되었습니다.

역사적으로 JavaScript에는 모듈 시스템이 없었으며 대규모 프로그램을 작은 상호 의존적 파일로 분할한 다음 간단한 방법으로 조립하는 것은 불가능합니다. 다른 언어에도 이 기능이 있습니다.

ES6 이전에 커뮤니티는 몇 가지 모듈 로딩 솔루션을 개발했는데, 가장 중요한 솔루션은 CommonJS와 AMD였습니다. 전자는 서버용이고 후자는 브라우저용입니다. ES6은 언어 사양 수준에서 모듈 기능을 구현하며 구현이 매우 간단합니다. 기존 CommonJS 및 AMD 사양을 완전히 대체하고 브라우저 및 서버를 위한 범용 모듈 솔루션이 될 수 있습니다.

ES6 모듈의 설계 아이디어는 모듈의 종속성이 컴파일 타임에 결정될 수 있도록 가능한 한 정적으로 유지하는 것입니다(이런 종류의 로딩을 "컴파일 타임 로딩"이라고 함). 입력 및 출력 변수. CommonJS와 AMD 모듈 모두 런타임에만 이러한 사항을 결정할 수 있습니다.
ES6 모듈을 사용하기 위한 브라우저의 구문은 다음과 같습니다.

<script type="module" src="fs.js"></script>

위 코드는 웹 페이지에 fs.js 모듈을 삽입합니다. type 속성이 module로 설정되어 있으므로 브라우저는 이것이 ES6 모듈임을 인식합니다.

// ES6加载模块
import { stat, exists, readFile } from 'fs';

위 코드는 import를 통해 모듈을 로드하고 해당 메서드 중 일부를 로드합니다.

2. 가져오기 및 내보내기

모듈 기능은 주로 내보내기 및 가져오기라는 두 가지 명령으로 구성됩니다. 내보내기 명령은 모듈의 외부 인터페이스를 지정하는 데 사용되며, 가져오기 명령은 다른 모듈에서 제공하는 기능을 입력하는 데 사용됩니다.
모듈은 독립된 파일입니다. 이 파일 내의 모든 변수는 외부에서 얻을 수 없습니다. 외부 세계에서 모듈 내부의 변수를 읽을 수 있도록 하려면 내보내기 키워드를 사용하여 변수를 출력해야 합니다. 다음은 내보내기 명령을 사용하여 변수를 출력하는 JS 파일입니다.

// profile.js
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;

수출, 위 방법 말고도 다른 방법이 있습니다. (스크립트 마지막 부분에서 어떤 변수가 출력되는지 한눈에 알 수 있기 때문에 권장합니다.) 내보내기 명령은 변수 출력 외에도 함수나 클래스도 출력할 수 있습니다. 일반적으로 내보내기로 출력되는 변수는 원래 이름이지만 as 키워드를 사용하여 이름을 바꿀 수 있습니다.

// profile.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
export {firstName, lastName, year};

export 명령을 사용하여 모듈의 외부 인터페이스를 정의한 후 다른 JS 파일에서 import 명령을 통해 이 모듈(파일)을 로드할 수 있습니다.

function v1() { ... }
function v2() { ... }
export {
  v1 as streamV1,
  v2 as streamV2,
  v2 as streamLatestVersion
};

위 코드의 import 명령은 profile.js 파일과 입력 변수를 로드하는 데 사용됩니다. import 명령은 다른 모듈에서 가져올 변수의 이름을 지정하는 객체(중괄호로 표시)를 허용합니다. 중괄호 안의 변수 이름은 가져온 모듈(profile.js)의 외부 인터페이스 이름과 동일해야 합니다.

입력 변수의 이름을 바꾸려면 가져오기 명령에서 as 키워드를 사용하여 입력 변수의 이름을 바꾸세요.

// main.js
import {firstName, lastName, year} from './profile';
function setName(element) {
  element.textContent = firstName + ' ' + lastName;
}

import 명령은 리프팅 효과가 있어 전체 모듈의 선두로 승격되어 먼저 실행됩니다.

import { lastName as surname } from './profile';

3. 모듈 전체 로딩

로드할 특정 출력 값을 지정하는 것 외에도 전체 로딩을 사용할 수도 있습니다. 즉, 별표(*)를 사용하여 객체를 지정하고 모든 출력 값을 지정할 수도 있습니다. ​​​​이 ​​개체에 로드됩니다.

넓이와 원주 두 가지 방법으로 출력하는 Circle.js 파일이 있습니다.

이제 이 모듈을 로드하세요.

foo();
import { foo } from 'my_module';

위 방법은 로드할 메소드를 하나씩 지정하는 것입니다. 전체적인 로드 방법은 다음과 같습니다.

// main.js
import { area, circumference } from './circle';
console.log('圆面积：' + area(4));
console.log('圆周长：' + circumference(14));

4. 기본값 내보내기

사용자에게 편의를 제공하고 문서를 읽지 않고도 모듈을 로드할 수 있도록 내보내기 기본 명령을 사용하여 모듈의 기본 출력을 지정합니다.

import * as circle from './circle';
console.log('圆面积：' + circle.area(4));
console.log('圆周长：' + circle.circumference(14));

위 코드는 모듈 파일인 import-default.js이며, 기본 출력은 함수입니다.

다른 모듈이 이 모듈을 로드할 때 import 명령은 익명 함수의 이름을 지정할 수 있습니다.

// export-default.js
export default function () {
  console.log('foo');
}

import 명령 뒤에는 중괄호가 사용되지 않는다는 점에 유의하세요. 기본적으로 기본값 내보내기는 기본값이라는 변수나 메서드를 출력하는 것입니다. 그런 다음 시스템에서 이름을 지정할 수 있습니다. 변수 선언문은 뒤에 올 수 없습니다.

// import-default.js
import customName from './export-default';
customName(); // 'foo'

5. ES6 모듈 로딩의 본질

ES6 모듈 로딩 메커니즘은 CommonJS 모듈과 완전히 다릅니다. CommonJS 모듈은 값의 복사본을 출력하는 반면 ES6 모듈은 값에 대한 참조를 출력합니다.

CommonJS 모듈은 출력 값의 복사본을 출력합니다. 즉, 값이 출력되면 모듈 내 변경 사항이 이 값에 영향을 미치지 않습니다. 다음 모듈 파일 lib.js의 예를 살펴보세요.

// 正确
var a = 1;
export default a;
// 错误
export default var a = 1;

위 코드는 내부 변수 counter와 이 변수를 재정의하는 내부 메서드 incCounter를 출력합니다. 그런 다음 이 모듈을 main.js에 로드하세요.

// main.js
var mod = require('./lib');
console.log(mod.counter); // 3
mod.incCounter();
console.log(mod.counter); // 3

上面代码说明，lib.js模块加载以后，它的内部变化就影响不到输出的mod.counter了。这是因为mod.counter是一个原始类型的值，会被缓存。除非写成一个函数，才能得到内部变动后的值。

// lib.js
var counter = 3;
function incCounter() {
 counter++;
}
module.exports = {
 get counter() {
  return counter
 },
 incCounter: incCounter,
};

上面代码中，输出的counter属性实际上是一个取值器函数。现在再执行main.js，就可以正确读取内部变量counter的变动了。
ES6模块的运行机制与CommonJS不一样，它遇到模块加载命令import时，不会去执行模块，而是只生成一个动态的只读引用。等到真的需要用到时，再到模块里面去取值，换句话说，ES6的输入有点像Unix系统的“符号连接”，原始值变了，import输入的值也会跟着变。因此，ES6模块是动态引用，并且不会缓存值，模块里面的变量绑定其所在的模块。
还是举上面的例子。

// lib.js
export let counter = 3;
export function incCounter() {
 counter++;
}
// main.js
import { counter, incCounter } from './lib';
console.log(counter); // 3
incCounter();
console.log(counter); // 4

上面代码说明，ES6模块输入的变量counter是活的，完全反应其所在模块lib.js内部的变化。
由于ES6输入的模块变量，只是一个“符号连接”，所以这个变量是只读的，对它进行重新赋值会报错。

// lib.js
export let obj = {};
// main.js
import { obj } from './lib';
obj.prop = 123; // OK
obj = {}; // TypeError

上面代码中，main.js从lib.js输入变量obj，可以对obj添加属性，但是重新赋值就会报错。因为变量obj指向的地址是只读的，不能重新赋值，这就好比main.js创造了一个名为obj的const变量。
最后，export通过接口，输出的是同一个值。不同的脚本加载这个接口，得到的都是同样的实例。

// mod.js
function C() {
 this.sum = 0;
 this.add = function () {
  this.sum += 1;
 };
 this.show = function () {
  console.log(this.sum);
 };
}
export let c = new C();

上面的脚本mod.js，输出的是一个C的实例。不同的脚本加载这个模块，得到的都是同一个实例。

// x.js
import {c} from './mod';
c.add();
// y.js
import {c} from './mod';
c.show();
// main.js
import './x';
import './y';

现在执行main.js，输出的是1。这就证明了x.js和y.js加载的都是C的同一个实例。

위 내용은 ES6의 모듈에 대한 자세한 소개(예제 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!