【認識先端第一歩】ES 6におけるモジュールの使用について

古いバージョンjsから来た人にとって、モジュールの概念は新しい先端開発の第一の試練と言える.結局歴史上、JavaScriptはずっとモジュールシステムがないです.
モジュール機能は主に二つのコマンドで構成されています.
export
二つの書き方、例の由来は阮一峰先生のES 6標準入門第三版です.

直接定義時に導出する:

// 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 defaultコマンド

このコマンドを使用してエクスポートした後、他のモジュールがこのモジュールをローディングする場合、exportコマンドは、匿名関数の任意の名前を指定することができます.

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

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

importimportコマンドを使用してモジュールの対外インターフェースを定義した後、他のJSファイルはimportコマンドでこのモジュールをロードすることができます.

導入のいくつかの方法

必要に応じて

を導入する.

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

ps:上でいくつかの概念を紹介しました.自分の知識で更新する時にプロセスを整理します.少なくとも他人のソースコードを読む時には、第一行までは退去させられません.先端の発展は、たまに伝統的なhtml+css+jsでテストページを構築するだけの私にとっては衝撃が大きいです.モジュールについてはまだ多くの詳細と知識点があります.詳しい情報は阮一峰先生のES 6標準入門第三版を見ることができます.あるいは必要に応じて検索して深く理解します.