JS ES 6におけるexportとimportの詳細

この文章は清園で沈没したAtlanttisのJS ES 6の中でexportとimportをまねるもので、ここでは学習用だけに、原文の作者の書いたものは本当に完璧です.個人的には補足の挿入点がありません.
Export
モジュールは独立したファイルです.このファイル内のすべての変数は外部から取得できません.ある変数を取得するには、exportを通じて出力しなければなりません.

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

またはより良い方法で、大かっこで出力する変数のセットを指定します.

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

export {firstName, lastName, year};

変数の出力以外に、関数やクラス(クラス)も出力できます.

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

大量に出力することもできます.同じ括弧に含めることもできます.asで名前を変えてもいいです.

function v1() { ... }
function v2() { ... }

export {
  v1 as streamV1,
  v2 as streamV2,
  v2 as streamLatestVersion
};

注意:export命令では、対外インターフェースを定めており、モジュール内部変数と一対一の関係を確立しなければなりません.

//    
export var m = 1;

//    
var m = 1;
export {m};

//    
var n = 1;
export {n as m};


//   
export 1;

//   
var m = 1;
export m;

エラーの書き方は、外部へのインターフェースが提供されていないため、第一に直接出力1、第二に変数mがありますが、直接出力1があり、解決できなくなります.同じように、functionとclassの出力もこのような書き方を守らなければなりません.

//   
function f() {}
export f;

//   
export function f() {};

//   
function f() {}
export {f};

And:export文が出力するインターフェースは、その対応する値が動的バインディングの関係であり、すなわちこのインターフェースを通じて取ったのはモジュール内部のリアルタイムの値である.位置:exportモジュールはモジュール内の任意の位置に位置することができますが、モジュールの最上階にある必要があります.他の作用領域であれば、エラーが発生します.

function foo() {
  export default 'bar' // SyntaxError
}
foo()

Importコマンド
exportはモジュールの対外インターフェースを定義した後、他のJSファイルはimportによってこのモジュールをロードできます.

// main.js
import {firstName, lastName, year} from './profile';

function setName(element) {
  element.textContent = firstName + ' ' + lastName;
}

importコマンドは、他のモジュールから導入する変数名を指定する大きな括弧のペアを受け取ります.導入されたモジュールの対外インターフェースの名前と同じでなければなりません.導入した変数の名前をもう一度あげたいなら、asキーワードを使ってもいいです.

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

import後のfromは導入モジュールが必要なパス名を指定してもいいし、絶対パスでもいいし、相対パスでもいいです.jsパスは省略できます.モジュール名だけあって、パスがないなら、プロファイル指定が必要です.なお、importコマンドは、リフティング効果があり、モジュール全体のヘッダに引き上げられますので、まず実行してください.(コンパイル段階で実行されます)importは静的に実行されますので、式や変数は使用できません.つまり、実行時に結果が得られる構文構造(e.g.if...else...)
moduleの全体ロード
特定の出力値をロードする以外に、オブジェクトを(*)で指定することもできます.すべての変数はこのオブジェクトにロードされます.

// circle.js。      

export function area(radius) {
  return Math.PI * radius * radius;
}

export function circumference(radius) {
  return 2 * Math.PI * radius;
}


// main.js       

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));

なお、モジュール全体のロード先のオブジェクト(上記の例はcircule)は、静的に分析できるはずですので、動作時の変更は許可されません.

import * as circle from './circle';

//           
circle.foo = 'hello';
circle.area = function () {};

export default
以前の例では、importを使って導入する時、モジュールにロードする変数名や関数名を知る必要があります.ユーザーはソースを読みたくないかもしれません.直接インターフェースを使いたいだけです.export defaultコマンドを使ってモジュールに出力を指定します.

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

他のモジュールがこのモジュールをロードする場合、importコマンドは、その匿名関数の名前を任意に指定できます.

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

export defaultは、非匿名関数の前にも用いることができる.標準出力と正常出力を比較します.

//    
export default function crc32() { //   
  // ...
}

import crc32 from 'crc32'; //   

//    
export function crc32() { //   
  // ...
};

import {crc32} from 'crc32'; //   

export defaultを使用する場合、import文は大括弧を使用しないことが分かります.importコマンドとexportコマンドは、モジュールの最上階にしかありません.コードブロックの中には入れません.文法のエラーが発生します.このような設計は、コンパイラの効率を向上させることができますが、実行時にロードすることができません.requireは実行時にロードされますので、importコマンドはrequireのダイナミックローディング機能の代わりにはなりません.そこでimport()関数を導入した.ダイナミックロードが完了しました.

import(specifier)

speciferは、ロードするモジュールの位置を指定します.importはどのパラメータが受け入れられますか?import()は同じパラメータが受け入れられます.import()はPromiseオブジェクトを返します.

const main = document.querySelector('main');

import(`./section-modules/${someVariable}.js`)
  .then(module => {
    module.loadPageInto(main);
  })
  .catch(err => {
    main.textContent = err.message;
  });

import()関数が適用される場合
1、必要に応じてロードする

button.addEventListener('click', event => {
  import('./dialogBox.js')
  .then(dialogBox => {
    dialogBox.open();
  })
  .catch(error => {
    /* Error handling */
  })
});

above:importモジュールはイベント傍受関数でユーザーがボタンをクリックしただけで、このモジュールをロードすることができます.2、ロードimport()を提出してif...else文に置くことができ、条件のロードを実現します.

if (condition) {
  import('moduleA').then(...);
} else {
  import('moduleB').then(...);
}

これで終わりますJS ES 6におけるexportとimportの詳細