ES6 지식 - 모듈 모듈

4.5 모듈 모듈

4.5.1 개념

• ES6하기 전에 가장 중요한,로드 프로그램 모듈을 개발 CommonJS와 AMD의 두 종류가 있습니다 .

• 서버에 대한 CommonJS, 브라우저의 AMD.

• 에서 ES6 언어 표준 수준의 모듈 기능의 실현에, 같은 브라우저와 서버 범용 모듈 솔루션 .

• ES6 모듈 설계 이다 가능한 정적만큼 , 그래서 컴파일러 때 모듈 의존성뿐만 아니라 입력 및 출력 변수들을 결정할 수있다.

  // CommonJS模块
  let { stat, exists, readFile } = require('fs');
  // 等同于
  let _fs = require('fs');
  let stat = _fs.stat, exists = _fs.exists, readfile = _fs.readfile;
  //★结果分析：这种加载称为“运行时加载”，
  //因为只有运行时才能得到这个对象，导致完全没办法在编译时做“静态优化”

• "로드 컴파일시"또는 정적 하중

  • 즉 ES6가 될 수있다 모듈이로드 시간을 컴파일 완료 , 효율 모듈 로딩 CommonJS의 비율이 높은 .
  • 사용 의 전체 속도 와 캐리어, 즉를 별표하면 ( *) 그 위에 적재 된 물체의 모든 출력값 객체를 지정한다.

• 펑션 블록은 주로 두 가지 명령으로 구성 : 수출 및 수입.

  • 수출 명령은 외부 인터페이스 모듈을 지정하는 데 사용됩니다
  • 다른 모듈에 의해 제공 반입 명령 입력 기능.

4.5.2 엄격 모드

• ES6 모듈은 자동으로 엄격 모드를 사용 하면 추가 모듈 헤더에 "엄격한 사용"여부,;.
• 엄격 모드가 있습니다 다음과 같은 제한 사항 :
  • 변수는 사용하기 전에 선언해야합니다;
  • 함수 매개 변수, 그렇지 않으면 오류가 같은 이름의 속성을 가질 수 없습니다;
  • 당신은 문으로 사용할 수 없습니다;
  • 읽기 전용 속성, 그렇지 않으면 오류를 할당 할 수 없습니다;
  • 당신은 0 8 진수를 나타내는 접두사, 그렇지 않으면 오류를 사용할 수 없습니다;
  • 당신은 속성을 삭제할 수 없습니다, 그렇지 않으면 오류를 삭제할 수 없습니다;
  • 당신은하지 삭제 변수 삭제 소품, 당신은 제거 할 수 있습니다, 불평 수 있습니다 재산 삭제 글로벌 [소품]
  • 평가는 포위 범위에 변수를 도입하지;
  • 평가 및 인수를 재 할당 할 수 없습니다;
  • 인수가 자동으로 함수 매개 변수의 변화를 반영하지 않는다;
  • 당신은 arguments.callee를 사용할 수 없습니다;
  • 당신은 arguments.caller 사용할 수 없습니다;
  • 전역 객체에이 점을 금지;
  • 당신은 fn.caller를 사용할 수 없으며 fn.arguments는 함수 호출 스택을 얻을;
  • (예컨대 보호 정적 인터페이스 등) 예약어 증가.

4.5.3export 명령

• 모듈은 독립형 문서 . 내부 문서는 모든 변수는 외부 얻을 수 없다 .

• 당신이 원하는 경우에 읽을 수있는 외부 모듈 내부의 변수를 취할를, 당신은 사용해야합니다 (가) 출력 변수를 내보내 키워드 .

• 그런데 외부 출력 변수 :

  //方式一：var 
  export var firstName = 'jack';
  export var lastName = 'huang';
  //方式二：大括号
  var firstName = 'jack';
  var lastName = 'huang';
  export { firstName,lastName }
  //方式三：输出函数或类（class）
  export function addd(x, y) {return x * y;};
  //方式四：可以使用as关键字重命名
  var firstName = 'jack';
  var lastName = 'huang';
  export { firstName as f1, lastName as f2}

4.5.4import 명령

• 다른 JS 당신이 할 수있는 파일 가져 오기 명령을 모듈을로드 .

• 참고 import 명령 리프팅 효과가 로 승격한다 전체 모듈 헤드 먼저 수행 .

• 반입 명령은 허용 중괄호 쌍 하고, 지정된 다른 모듈에서 수입으로 변수 이름 . 변수 이름은 내부 교정기 (main.js)는 외부 인터페이스 모듈에 도입해야 동일한 이름 .

• 당신이 변수를 다시 입력하려면 새로 만들기 이름을 가져 오기 명령을 키워드로 사용되는 , 이름 변수 입력.

• 뒤에서 오기 지정된 파일 모듈의 위치 일 수있다 상대 경로 일 수있다 절대 경로 , 경로가 생략 된 .js있다 .

  // a.js
  import {firstName, lastName} from './main.js';
  console.log(firstName)
  
  import {firstName as newName} from './main.js';

4.5.5export의 기본 명령

• 하기 위해 사용자에게 편의를 제공 그들이 그렇게하는 것이, 모듈을로드 할 수있을 것입니다 문서를 읽지 않는다 , 필요가 수출 기본 명령을 사용하여 , 모듈 지정 기본 출력을 .

• 다른 모듈은 모듈을로드 할 때, 가져 오기 명령은 익명 함수에 대한 이름을 지정할 수 있습니다 .

  // export-default.js
  export default function () {
    console.log('foo');
  }
  // import-default.js
  import customName from './export-default';
  customName();    // 'foo'
  //★需要注意的是，这时import命令后面，不使用大括号。

• 일반 출력과 비교 기본 출력

  // 第一组   默认输出
  export default function crc32() { // 输出
    // ...
  }
  import crc32 from 'crc32'; // 输入
  // 第二组    正常输出
  export function crc32() { // 输出
    // ...
  };
  import {crc32} from 'crc32'; // 输入xport-default';
  customName(); // 'foo'

4.5.6export 복잡한 표현의 수입

• 모듈 중 하나 인 경우 상기 제 동일한 입출력 모듈 수출입 진술 문 수 함께 물품 .

  export { foo, bar } from 'my_module';
  // 等同于
  import { foo, bar } from 'my_module';
  export { foo, boo};