지금 제 이메일 목록을 구독하려면 http://jauyeung.net/subscribe/으로 전화하십시오.
트위터에 팔로우 해주세요.
자세한 내용은 https://medium.com/@hohanga으로 문의하십시오.
ES6의 주요 특징은 내장 모듈을 지원하는 JavaScript입니다.모듈은 export과 import 문법을 사용하여 파일 간에 코드를 공유할 수 있도록 합니다.script 태그와 전역 변수 크로스 파일 공유 코드를 사용하는 것에 비해 이것은 매우 큰 개선이다.script 표시를 사용하면 불러오는 순서가 매우 중요하기 때문에 오류가 발생하기 쉽다.스크립트 순서 오류가 발생하면 프로그램이 설명하지 않은 코드를 실행할 수 있습니다.그것은 또한 우리로 하여금 진정한 구조나 논리적 조합이 없는 스파게티 코드를 작성하게 했다.모듈에 이 문제가 존재하지 않습니다. 모든 내용은 파일 사이에서 직접 내보내고 가져오기 때문입니다.그 밖에 우리는 가져오는 코드의 정의를 쉽게 알 수 있다. 왜냐하면 이것은 현식이기 때문에 그 중에서 가져오고 인용하는 모듈이기 때문이다.

수출입

JavaScript 파일의 코드를 가져올 수 있도록 하려면 export 문을 사용하여 코드를 명시적으로 내보내야 합니다.이를 위해, 우리는 export을 다른 문서에 공개할 변수나 상수 앞에 두기만 하면 된다.예를 들어 다음과 같이 쓸 수 있습니다.

export let num = 1;

다른 모듈에서 사용할 수 있도록 num 변수를 내보냅니다.
우리는 import, var, let, 그리고 함수와 클래스의 내용을 내보낼 수 있다.내보낸 항목은 반드시 맨 위에 신고해야 한다.const은 함수와 클래스 내부 같은 다른 곳에 사용할 수 없습니다.
한 번에 여러 멤버를 내보낼 수 있습니다.우리가 해야 할 일은 모든 구성원을 쉼표로 구분된 네모난 괄호로 묶는 것이다.예를 들어 다음과 같이 쓸 수 있습니다.

const num1 = 1;  
const num2 = 2;  
const num3 = 3;  
export {num1, num2, num3};

그러면 다른 JavaScript 파일에서 export, num1 및 num2을 가져올 수 있습니다.
이제 다른 JavaScript 파일에서 가져올 수 있는 구성원을 내보냈습니다.우리는 num3 문장을 사용하여 한 명 이상의 구성원을 모듈에 가져와 사용할 수 있다.예를 들어, import에 다음과 같은 내용이 있는 경우

const num1 = 1;  
const num2 = 2;  
const num3 = 3;  
export {num1, num2, num3};

그리고 moduleA.js에서 다음 코드를 작성하여 moduleB.js에서 프로젝트를 가져올 수 있습니다.

import {num1, num2, num3} from './moduleA'

moduleA.js 키워드 뒤의 경로는 마침표로 시작합니다.마침표는 현재 폴더에 있음을 나타냅니다.
이것은 from과 moduleA.js이 같은 폴더에 있다고 가정한다.moduleB.js의 내보내기 구성원을 moduleA.js으로 가져오려면 moduleB.js과 moduleA.js의 경로를 지정해야 한다.예를 들어 moduleB.js이 moduleA.js보다 한 단계 높으면 moduleB.js에 다음과 같이 적혀 있습니다.

import {num1, num2, num3} from '../moduleAFolder/moduleA'

경로 앞의 두 문장은 우리가 폴더 등급을 올린 다음에 moduleB.js, 그리고 moduleAFolder을 얻었다는 것을 의미한다.moduleA.js 태그에 JavaScript 모듈을 사용할 수도 있습니다.이를 위해, 스크립트에 표시된 script 속성을 type으로 설정해야만 사용할 수 있습니다.예를 들어, HTML 파일에서 module을 사용하려면 다음과 같이 작성할 수 있습니다.

<script type='module' src='moduleA.js'></script>

JavaScript 모듈에서 moduleA.js과 import을 사용할 수 있습니다.그들은 일반적인 스크립트를 사용할 수 없다.
스크립트는 자동으로 엄격한 모드에서 실행되기 때문에 전역 변수를 의외로 설명할 수도 없고, 엄격한 모드를 사용하지 않는 다른 일도 할 수 없습니다.그것들은 자동으로 비동기적으로 불러옵니다. 이렇게 하면 스크립트가 페이지의 불러오는 것을 방해할 필요가 없습니다.또한 export과 import은 두 스크립트 사이에서만 발생하기 때문에 전역 변수를 설정하지 않았습니다.따라서 콘솔에서 직접 볼 수 없습니다.

기본 내보내기

모듈 구성원을 내보내는 데 사용되는 기본 내보내기 옵션도 있습니다.우리가 이전에 변수를 내보낸 방식은 이름에 따라 변수를 가져오는 것이다.모듈에서 하나의 구성원을 내보내는 기본 내보내기가 있습니다. 가져올 때 이름에 따라 인용할 필요가 없습니다.예를 들어, 내보내려는 모듈에 구성원이 한 명만 있는 경우 export에 다음을 기록할 수 있습니다.

const num = 1;  
export default num;

moduleA.js을 사용할 때 괄호가 없습니다.
그런 다음 구성원을 가져올 파일에서export default에서 우리는 다음과 같이 썼다.

import num from './moduleA'

우리는 다시 꽃괄호를 생략했다.모듈마다 기본 내보내기만 허용하기 때문이다.또는 moduleB.js에 다음과 같은 내용을 기재할 수 있습니다.

import {default as num} from './moduleA'

가져오기 및 내보내기 이름 바꾸기

만약 우리가 많은 모듈을 가지고 있고, 그들이 내보낸 구성원이 같은 이름을 가지고 있다면, 만약 우리가 여러 모듈을 가져오려고 시도한다면 충돌이 발생할 것이다.이것은 우리가 해결해야 할 문제가 될 것이다.다행히도 자바스크립트에는 moduleB.js 키워드가 있어서 내보내기와 가져오기의 이름을 바꾸어 코드의 이름 충돌을 피할 수 있습니다.as 키워드 이름을 사용하여 내보내려면 as에서 다음을 작성했습니다.

export {  
  num1 as numOne,  
  num2 as numTwo  
}

그리고 moduleA.js에서 다음과 같은 방법으로 가져올 수 있습니다.

import { numOne, numTwo } from './moduleA'

또는 가져올 때 이름을 바꿀 수 있습니다.이를 위해 moduleB.js에서 다음과 같이 제안했습니다.

export {  
  num1,  
  num2  
}

그리고 moduleA.js에서 우리는 다음과 같이 주장했다.

import { num1 as numOne, num2 as numTwo } from './moduleA'

같은 이름을 가진 모듈의 멤버를 가져오려고 시도할 경우(예:

import { num1, num2 } from './moduleA';  
import { num1, num2 } from './moduleB';  
import { num1, num2 } from './moduleC';

우리는 moduleB.js을 확보할 것이다.따라서 모듈이 실행될 수 있도록 이름을 바꿔야 합니다.

import { num1 as num1A, num2 as num2A } from './moduleA';  
import { num1 as num1B, num2 as num2B } from './moduleB';  
import { num1 as num1C, num2 as num2C } from './moduleC';

같은 이름을 가진 구성원의 여러 모듈에서 가져오는 더 간결한 방법은 모듈의 모든 내보내는 구성원을 하나의 대상으로 가져오는 것이다.우리는 별표로 할 수 있다.예를 들면 다음과 같습니다.

import { num1 as num1A, num2 as num2A } from './moduleA';  
import { num1 as num1B, num2 as num2B } from './moduleB';  
import { num1 as num1C, num2 as num2C } from './moduleC';

우리는 다음과 같이 쓸 수 있다.

import * as moduleA from './moduleA';  
import * as moduleB from './moduleB';  
import * as moduleC from './moduleC';

다음 코드를 가져오면 다음과 같이 쓸 수 있습니다.

moduleA.num1;  
moduleA.num2;  
moduleB.num1;  
moduleB.num2;  
moduleC.num1;  
moduleC.num2;

우리는 클래스를 내보내고 가져올 수도 있다.따라서 만약에 우리가 하나 이상의 클래스를 포함하는 파일, 예를 들어 SyntaxError 파일이 있다면 그 클래스는 다음과 같다.

class Person {  
  constructor(firstName, lastName) {  
    this._firstName = firstName;  
    this._lastName = lastName;  
  }  
  get fullName() {  
    return `${this.firstName} ${this.lastName}`  
  }  
  get firstName() {  
    return this._firstName  
  }  
  get lastName() {  
    return this._lastName  
  }  
  sayHi() {  
    return `Hi, ${this.firstName} ${this.lastName}`  
  }  
  set firstName(firstName) {  
    this._firstName = firstName;  
  }  
  set lastName(lastName) {  
    this._lastName = lastName;  
  }  
}

그런 다음 다음 다음 클래스를 내보냅니다.

export { Person };

이렇게 하면 클래스 Person.js이 내보내지고 클래스를 가져올 수 있습니다.

import { Person } from './person';

동적 모듈 로드

JavaScript 모듈은 동적으로 로드됩니다.응용 프로그램이 실행될 때 모든 모듈을 불러오는 것이 아니라 필요할 때만 모듈을 불러옵니다.이를 위해, 우리는 Person 함수를 사용하고, 이 함수는 약속을 되돌려줍니다.매개 변수의 모듈이 불러올 때 약속이 이루어집니다.promise는 하나의 모듈 대상으로 해석된 다음에 응용 프로그램의 코드로 사용할 수 있습니다.import() 클래스에 Person 클래스가 있으면 다음 코드를 사용하여 동적으로 가져올 수 있습니다.

import('./Person')  
.then((module)=>{  
  const Person = module.Person;  
  const person = new Person('Jane', 'Smith');  
  person.sayHi();  
})

또는 Person.js과 async 구문을 사용하여 함수에 넣을 수 있습니다.

const importPerson = async ()=>{   
  const module = await import('./Person');  
  const Person = module.Person;  
  const person = new Person('Jane', 'Smith');  
  person.sayHi();  
}

importPerson();

보시다시피 JavaScript 모듈은 조직 코드에 유용합니다.이것은 우리가 다른 모듈에 공개할 내용을 내보낼 수 있도록 함으로써 전역 변수에 대한 수요를 없앴다.또한 여러 모듈을 가져올 때 충돌하지 않도록 내보내기와 가져오기의 이름을 바꿀 수 있습니다.또한 내보낸 모든 구성원을 한 번에 모두 가져올 수 있습니다. 그러면 전체 모듈을 하나의 구성원이 아니라 하나의 대상으로 가져올 수 있습니다.마지막으로 모듈에서 하나만 내보내려면 await을 사용할 수 있습니다.