ES6 Module 구문

인터넷 수업의 단추가 ES6의 새로운 문법 규칙을 만났습니다.

완일봉 ECMASCRIPT6 입문

ES6에 앞서 커뮤니티는 CommonJS와 AMD 두 가지만 있으면 모듈식 로딩 방안을 제정했다.전자는 주로 서버에 사용되고, 후자는 브라우저에 사용된다.ES6는 언어 표준 차원에서 모듈화 기능을 실현하여 CommonJS와 AMD 규범을 완전히 대체하고 브라우저 개 서버에서 통용되는 모듈 솔루션이 될 수 있다.ES6 모듈 디자인 사상은 가능한 정태화이며 컴파일할 때 모듈의 의존 관계를 확정하고 출력할 양을 입력할 수 있다.CommonJS와 AMD 모듈은 실행할 때만 확인할 수 있습니다.예를 들어, CommonJS 모듈은 객체이며 입력할 때 객체 속성을 찾아야 합니다.예:

//CommonJS 
let {stat,exists,readFile} = require('fs');

// 
let_fs = require('fs');
let start = _fs.stat;
let exists = _fs.exists;
let readfile = _fs.readfile;

위의 코드는 전체적으로 fs모듈(즉 fs를 불러오는 모든 방법)을 불러오고 대상(_fs)을 생성한 다음에 이 대상에서 세 가지 방법을 읽는 것입니다.이런 불러오는 것을'운행시 불러오는 것'이라고 하는데, 운행할 때만 이 대상을 얻을 수 있기 때문에 컴파일할 때'정적 최적화'를 할 수 없다.ES6 모듈은 대상이 아니라 export 명령을 통해 출력 코드를 명시적으로 지정하고 import를 통해 입력합니다..` import { stat,exists,readFile} from 'fs'; ` 위 코드의 실질은 fs모듈에서 세 가지 방법을 기록하고 다른 방법은 불러오지 않습니다.이런 불러오는 것을'컴파일할 때 불러오기'또는'정적 불러오기'라고 부른다.ES6의 모듈은 자동으로 엄격한 모드를 사용합니다. 모듈 머리에'use strict'를 붙이든 안 하든 상관없습니다.

export 명령

모듈 기능은 주로 두 개의 명령으로 구성되어 있습니다: export와import.export 명령은 모듈의 대외 인터페이스를 규정하는 데 사용되고import 명령은 다른 모듈이 제공하는 기능을 입력하는 데 사용됩니다.
하나의 모듈은 하나의 독립된 파일이다.이 파일 내부의 모든 변수를 외부에서 가져올 수 없습니다.만약 외부에서 모듈 내부의 어떤 변수를 읽을 수 있기를 원한다면, export 키워드를 사용하여 이 변수를 출력해야 합니다.다음은 export 명령을 사용하여 변수를 출력하는 JS 파일입니다.

//profile.js
export var firstName = 'Michael';
export var lastName = 'Jack';
export var age = 20; 

위의 코드는 프로필입니다.js 파일, 사용자 정보 저장.ES6는 이를 하나의 모듈로 간주합니다. 그 안에 사용된 export 명령은 외부에 세 개의 변수를 출력합니다.export의 작법은 위와 같은 것을 제외하고는 이틀에 한 가지가 있다.

var firstName = 'Michael';
var lastName = 'Jack';
var age = 20; 
export{firstNmae,lasrName,year};

export 명령은 출력 변수를 제외하고 함수나 클래스 (class) 를 출력할 수 있습니다.

export function multiply(x,y){
   return x * y;
};

위의 코드는 대외적으로 하나의 함수를 출력하는 multiply
통상적으로 export 출력의 변수는 원래의 이름이지만, as 키워드로 이름을 바꿀 수 있습니다.

function v1(){...}
function v2(){...}
export{
  v1 as stream1,
  v2 as stream2，
  v2 as stream3
};

위의 코드는 as를 키워드로 사용하여 함수 v1, v2 인터페이스의 이름을 바꿨습니다.이름을 바꾼 후 v2는 다른 이름으로 두 번 출력할 수 있습니다.

import 명령

import 명령을 사용하여 모듈화된 인터페이스를 정의하면 다른 JS 파일은 import 명령을 통해 이 모듈을 불러올 수 있습니다.

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

프로필을 불러오는 데 사용되는 위 코드의import 명령입니다.js 파일을 입력하고 변수를 입력하십시오.import 명령은 다른 모듈에서 가져올 변수 이름을 지정하는 괄호를 받아들입니다.괄호 안의 변수 이름은 가져온 모듈 (profile.js) 외부 인터페이스의 이름과 같아야 합니다.