1. 모듈이란?
ES6 모듈의 설계 아이디어는 静态化모듈의 종속성뿐만 아니라 입력 및 출력 변수도 컴파일 타임에 결정될 수 있도록 하는 것입니다. ES6 모듈은 객체가 아니지만 export命令출력을 명시적으로 지정한 다음 import命令입력을 전달하는 코드입니다.
2. 내보내기 명령
1. 모듈은 독립된 파일입니다. 이 파일 내의 모든 변수는 외부에서 얻을 수 없습니다. 외부 세계에서 모듈 내부의 변수를 읽을 수 있도록 하려면 export关键字출력 변수를 사용해야 합니다.
예:
// profile.js
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;
설명: 위 코드는 사용자 정보를 저장하는 profile.js 파일입니다. export命令ES6에서는 이를 세 개의 변수를 외부로 내보내는 모듈로 취급합니다 .
예:
// profile.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
export {
firstName, lastName, year };
설명: 위 코드는 大括号출력할 변수 세트를 지정하기 위해 내보내기 명령 후에 사용됩니다. 이전 작성 방식(var 문 바로 앞에 배치)과 동일하지만 이 작성 방식이 우선시되어야 합니다. 이렇게 하면 스크립트 마지막에 어떤 변수가 출력되는지 한눈에 확인할 수 있기 때문입니다.
2. 내보내기 명령은 변수 출력 외에도 함수나 클래스도 출력할 수 있습니다. 일반적으로 내보내기로 출력되는 변수는 원래 이름이지만 as关键字이름을 바꿀 수 있습니다.
예:
function v1() {
... }
function v2() {
... }
export {
v1 as streamV1,
v2 as streamV2,
v2 as streamLatestVersion
};
설명: 위 코드는 as关键字v1 및 v2 함수의 외부 인터페이스 이름을 바꾸는 데 사용됩니다. 이름을 바꾼 후 v2는 다른 이름으로 두 번 출력될 수 있습니다.
3. 내보내기 명령은 외부 인터페이스를 지정하고 모듈 내부 변수와 일대일 대응을 설정해야 합니다.
예:
// 写法1：报错（直接输出 1）
export 1;
// 写法2：报错（通过变量m，还是直接输出 1。1只是一个值，不是接口。）
var m = 1;
export m;
// 写法3：正确
export var m = 1;
// 写法4：正确
var m = 1;
export {
m};
// 写法5：正确
var n = 1;
export {
n as m};
설명: 마지막 세 가지 작성 방법은 모두 정확합니다. 외부 인터페이스 m을 지정합니다. 다른 스크립트는 이 인터페이스를 통해 값 1을 얻을 수 있습니다. 그들의 본질은 과 사이의 일대일 대응을 확립하는 것 입니다 接口名.模块内部变量
4. 내보내기 명령문의 인터페이스 출력은 해당 값과 관련됩니다 动态绑定. 즉, 이 인터페이스를 통해 모듈 내부의 실시간 값을 얻을 수 있습니다.
예:
export var foo = 'bar';
setTimeout(() => foo = 'baz', 500);
설명: 위 코드는 값이 bar인 변수 foo를 출력하고 500밀리초 후에 baz로 변경됩니다.
5. export命令모듈의 최상위 수준에 있는 한 모듈의 어느 곳에나 나타날 수 있습니다. 블록 수준 범위에 있는 경우 오류가 보고됩니다.
예:
function foo() {
export default 'bar' // SyntaxError
}
foo()
설명: 위 코드에서는 내보내기 문이 함수에 배치되고 오류가 보고됩니다.
3. 가져오기 명령
1. 내보내기 명령을 사용하여 모듈의 외부 인터페이스를 정의한 후 다른 JS 파일에서 가져오기 명령을 통해 이 모듈을 로드할 수 있습니다.
예:
// main.js
import {
firstName, lastName, year } from './profile.js';
function setName(element) {
element.textContent = firstName + ' ' + lastName;
}
설명: 위 코드의 가져오기 명령은 profile.js 파일과 입력 변수를 로드하는 데 사용됩니다. import 명령은 다른 모듈에서 가져올 변수 이름을 지정하는 중괄호 쌍을 허용합니다. 중괄호 안의 변수 이름은 가져온 모듈(profile.js)과 인터페이스해야 합니다 名称相同.
2. 입력 변수의 이름을 바꾸려면 import 명령을 사용하여 as关键字입력 변수의 이름을 바꿉니다.
예:
import {
lastName as surname } from './profile.js';
3. import 명령으로 입력된 변수는 모두 변수입니다 只读的. 그 본질은 입력 인터페이스이기 때문입니다. 즉, 모듈을 로드하는 스크립트에서 인터페이스를 다시 작성할 수 없습니다.
예:
import {
a} from './xxx.js'
a = {
}; // Syntax Error : 'a' is read-only;
설명: 스크립트는 변수 a를 로드하고 a는 읽기 전용 인터페이스이기 때문에 다시 할당되면 오류가 보고됩니다. 그러나 a가 객체인 경우 a의 속성을 재정의하는 것이 허용됩니다.
4. from가져온 후 지정된 모듈 파일의 위치는 다음과 相对路径같습니다 绝对路径. 가 단지 모듈 이름인 경우 모듈의 위치를 알려주는 가 不带有路径있어야 합니다 .配置文件JavaScript 引擎
예:
import {
myMethod } from 'util';
설명: util은 모듈 파일의 이름입니다. 경로가 포함되어 있지 않으므로 구성을 통해 이 모듈을 얻는 방법을 엔진에 알려주어야 합니다.
5. import 명령은 승격 효과가 있어 전체 모듈의 선두로 승격되어 먼저 실행됩니다.
예:
foo();
import {
foo } from 'my_module';
설명: foo가 호출되기 전에 가져오기가 실행되기 때문에 위 코드는 오류를 보고하지 않습니다. 이 동작의 핵심은 코드가 실행되기 전 컴파일 단계에서 import 명령이 실행된다는 것입니다.
6. 가져오기는 이므로 및 를 静态执行사용할 수 없습니다 . 이러한 구문 구조는 런타임에만 결과를 얻을 수 있습니다.表达式变量
예:
// 报错
import {
'f' + 'oo' } from 'my_module';
// 报错
let module = 'my_module';
import {
foo } from module;
// 报错
if (x === 1) {
import {
foo } from 'module1';
} else {
import {
foo } from 'module2';
}
설명: 위의 세 가지 쓰기 방법은 표현식, 변수 및 if 구조를 사용하기 때문에 오류를 보고합니다. 정적 분석 단계에서는 이러한 구문을 평가할 수 없습니다.
7. import 문은 로드된 모듈을 실행하므로 다음과 같이 작성할 수 있습니다.
예:
import 'lodash';
설명: 위 코드는 lodash 모듈만 실행하고 값을 입력하지 않습니다. 여러 번 실행하면 同一句import语句여러 번 실행되지 않고 한 번만 실행됩니다.
4. 모듈 전체 로딩
로드할 특정 출력 값을 지정하려면 전체 로드를 사용할 수도 있습니다. 즉, 星号（*）개체를 지정하면 모든 출력 값이 이 개체에 로드됩니다.
예: (하나씩 로드)
import {
area, circumference } from './circle';
console.log('圆面积：' + area(4));
console.log('圆周长：' + circumference(14));
예: (전체 부하)
import * as circle from './circle';
console.log('圆面积：' + circle.area(4));
console.log('圆周长：' + circle.circumference(14));
참고: 모듈이 전체적으로 로드되는 객체(위 예의 원)는 정적으로 분석 가능해야 하므로 런타임 시 변경이 허용되지 않습니다.
5. 기본 명령 내보내기
1. 사용자에게 편의를 제공하고 설명서를 읽지 않고도 모듈을 로드할 수 있도록 하기 위해 기본 출력 명령을 사용하여 모듈의 기본 출력을 지정합니다.
예:
// export-default.js
export default function () {
console.log('foo');
}
// import-default.js
import customName from './export-default';
customName(); // 'foo'
설명: 위 코드의 import 명령은 import-default.js의 출력을 가리킬 수 있으며 任意名称, 이 경우 원본 모듈에서 출력된 함수 이름을 알 필요가 없습니다. 현재로서는 다음 가져오기 명령이 사용되지 않습니다 大括号.
2. 기본 내보내기 명령을 非匿名函数먼저 .
// export-default.js
export default function foo() {
console.log('foo');
}
// 或者写成
function foo() {
console.log('foo');
}
export default foo;
설명: 위 코드에서 foo 함수의 함수 이름 foo는 모듈 외부에서 유효하지 않습니다. 로딩시 로딩으로 간주됩니다 匿名函数.
3. 기본 내보내기 명령은 모듈의 기본 출력을 지정하는 데 사용됩니다. 분명히 모듈은 하나의 기본 출력만 가질 수 있으므로 기본 내보내기 명령은 한 번만 사용할 수 있습니다. 따라서 가져오기 명령 뒤에 중괄호를 추가할 필요가 없습니다. 이는 내보내기 기본 명령에만 고유하게 대응할 수 있기 때문입니다.
예:
// 第一组
export default function crc32() {
// 输出
// ...
}
import crc32 from 'crc32'; // 输入
// 第二组
export function crc32() {
// 输出
// ...
};
import {
crc32} from 'crc32'; // 输入
설명: 첫 번째 그룹은 내보내기 기본값이 사용될 때 해당 import 문에 중괄호를 사용할 필요가 없고, 두 번째 그룹은 내보내기 기본값이 사용되지 않을 때 해당 import 문에 중괄호가 필요합니다.
4. 내보내기 기본값은 호출된 변수나 메소드를 출력하는 것이며 default시스템에서는 이름을 지정할 수 있습니다. 그러므로 다음의 글은 타당하다.
예:
// modules.js
function add(x, y) {
return x * y;
}
export {
add as default};
// 等同于
// export default add;
// app.js
import {
default as foo } from 'modules';
// 等同于
// import foo from 'modules';
5. default 내보내기 명령은 실제로 default라는 변수만 출력하므로 뒤에 변수 선언문이 올 수 없습니다.
// 正确
export var a = 1;
// 正确
var a = 1;
export default a;
// 错误
export default var a = 1;
설명: 내보내기 기본값 a의 의미는 변수 a의 값을 변수 기본값에 할당하는 것입니다. 따라서 마지막 작성 방법에서는 오류가 보고됩니다.
6. 수출입 복합기재
1. 모듈에 동일한 모듈을 먼저 입력하고 출력하는 경우, import 문은 import 문과 함께 작성할 수 있습니다.
예:
export {
foo, bar } from 'my_module';
// 可以简单理解为
import {
foo, bar } from 'my_module';
export {
foo, bar };
설명: 위 코드에서 내보내기 및 가져오기 문을 함께 결합하여 한 줄로 작성할 수 있습니다. 그러나 한 줄에 작성한 후에 foo와 bar는 실제로 현재 모듈로 가져오지 않지만 이 두 인터페이스와 동일하므로 对外转发현재 모듈에서 foo와 bar를 직접 사용할 수 없다는 점에 유의해야 합니다.
2. 모듈 인터페이스 이름 변경 및 전체 출력
예:
// 接口改名
export {
foo as myFoo } from 'my_module';
// 默认接口输出
export {
default } from 'my_module';
// 具名接口改为默认接口
export {
es6 as default } from 'my_module';
// 整体输出
export * from 'my_module';
7. 교차 모듈 상수
1. const로 선언된 상수는 현재 코드 블록에서만 유효합니다. 모듈 간 상수를 설정하려는 경우(즉, 여러 파일에 걸쳐) 또는 값을 여러 모듈에서 공유하려는 경우 다음 작성 방법을 사용할 수 있습니다.
예:
// constants.js 模块
export const A = 1;
export const B = 3;
export const C = 4;
// test1.js 模块
import * as constants from './constants';
console.log(constants.A); // 1
console.log(constants.B); // 3
// test2.js 模块
import {
A, B} from './constants';
console.log(A); // 1
console.log(B); // 3
2. 사용할 상수가 많은 경우 특수한 상수 디렉터리를 만들고, 여러 파일에 다양한 상수를 작성한 후 이 디렉터리에 저장할 수 있습니다.
예:
파일별로 상수를 설정합니다.
// constants/db.js
export const db = {
url: 'http://my.couchdbserver.local:5984',
admin_username: 'admin',
admin_password: 'admin password'
};
// constants/user.js
export const users = ['root', 'admin', 'staff', 'ceo', 'chief', 'moderator'];
index.js에 병합됨:
// constants/index.js
export {
db} from './db';
export {
users} from './users';
index.js를 직접 로드하려면 다음을 사용하세요.
// script.js
import {
db, users} from './constants/index';