ES 6のexportコマンド
2289 ワード
モジュール機能は主に2つのコマンドで構成されています.exportとimportです.exportコマンドはモジュールの対外インタフェースを規定し、importコマンドは他のモジュールが提供する機能を入力するために使用されます.
モジュールは独立したファイルです.このファイル内のすべての変数は、外部では取得できません.モジュール内の変数を外部で読み込むには、exportキーワードを使用して変数を出力する必要があります.次はJSファイルで、exportコマンドを使用して変数を出力します.
exportコマンドは、変数の出力に加えて、関数またはクラス(class)を出力することもできます.
通常、export出力の変数は本来の名前ですが、asキーワードで名前を変更できます.
特に注意すべきは、exportコマンドは対外的なインタフェースを規定しており、モジュール内部の変数と一つ一つ対応関係を確立しなければならない.
同様に、functionやclassの出力も、このような書き方を守らなければなりません.
この点はCommonJS仕様とは全く違います.CommonJSモジュールは値のキャッシュを出力し、動的更新は存在しません.詳細は以下の「Moduleのロード実装」の項を参照してください.
最後に、exportコマンドは、モジュールの最上位にある限り、モジュールの任意の場所に表示できます.ブロックレベルの役割ドメイン内にある場合は、次のセクションのimportコマンドもエラーが表示されます.これは,条件コードブロックの中にあると静的最適化ができず,ES 6モジュールの設計の初心に反するためである.
モジュールは独立したファイルです.このファイル内のすべての変数は、外部では取得できません.モジュール内の変数を外部で読み込むには、exportキーワードを使用して変数を出力する必要があります.次はJSファイルで、exportコマンドを使用して変数を出力します.
// profile.js
exportvarfirstName='Michael';
exportvarlastName='Jackson';
varyear=1958;
export{firstName,lastName,year};
上のコードはexportコマンドの後ろにあり、出力する変数のセットをカッコで指定します.前の書き方(var文の前に直接置く)と等価ですが、この書き方を優先的に考慮する必要があります.これにより、スクリプトの最後に、どの変数が出力されているかを一目で明らかにすることができます.exportコマンドは、変数の出力に加えて、関数またはクラス(class)を出力することもできます.
export function multiply(x, y) {
return x * y;
};
上のコードは関数multiplyを外部に出力します.通常、export出力の変数は本来の名前ですが、asキーワードで名前を変更できます.
function v1() { ... }
function v2() { ... }
export {
v1 as streamV1,
v2 as streamV2,
v2 as streamLatestVersion
};
上のコードはasキーワードを使用して、関数v 1とv 2の対外インタフェースの名前を変更しました.名前を変更すると、v 2は異なる名前で2回出力できます.特に注意すべきは、exportコマンドは対外的なインタフェースを規定しており、モジュール内部の変数と一つ一つ対応関係を確立しなければならない.
//
export 1;
//
var m = 1;
export m;
上記の2つの書き方はいずれも間違っています.対外的なインタフェースが提供されていないからです.1番目の書き方は1を直接出力し、2番目の書き方は変数mを介して、または1を直接出力する.1はただの値で、インタフェースではありません.正しい書き方は以下の通りです.//
export var m = 1;
//
var m = 1;
export {m};
//
var n = 1;
export {n as m};
以上の3つの書き方はいずれも正しいもので,対外的なインタフェースmが規定されている.他のスクリプトは、このインタフェースを介して値1を取得できます.それらの本質は,インタフェース名とモジュール内部変数との間に,一つ一つ対応する関係が確立されていることである.同様に、functionやclassの出力も、このような書き方を守らなければなりません.
//
function f() {}
export f;
//
export function f() {};
//
function f() {}
export {f};
また、export文が出力するインタフェースは、それに対応する値が動的バインド関係であり、すなわち、このインタフェースによりモジュール内部のリアルタイムの値を取得することができる.export var foo = 'bar';
setTimeout(() => foo = 'baz', 500);
上のコードは変数fooを出力し、値はbarで、500ミリ秒後にbazになります.この点はCommonJS仕様とは全く違います.CommonJSモジュールは値のキャッシュを出力し、動的更新は存在しません.詳細は以下の「Moduleのロード実装」の項を参照してください.
最後に、exportコマンドは、モジュールの最上位にある限り、モジュールの任意の場所に表示できます.ブロックレベルの役割ドメイン内にある場合は、次のセクションのimportコマンドもエラーが表示されます.これは,条件コードブロックの中にあると静的最適化ができず,ES 6モジュールの設計の初心に反するためである.
function foo() {
export default 'bar' // SyntaxError
}
foo()
上のコードでは、export文が関数に置かれ、結果が間違っています.