全面解析ECMAScript 5とECMAScript 6モジュールシステム

ECMAScript 5モジュールシステム
1、Common JSモジュールシステム(requireとexport)
Common Jsは開発者からなるチームで、主にJavaScriptをめぐってAPIを実現し、研究開発の実践を行っています.チームはJavaScriptモジュール仕様を提示しました.各ファイルはモジュールとして利用でき、各ファイルは2つのオブジェクトにアクセスできます.requireは文字列(モジュール名)を受信し、モジュールから出力されたオブジェクトを返します.exportオブジェクトは、モジュールの方法および変数を導出するために使用されます.require方法で戻ってきたのがexportオブジェクトです.モジュール同期ローディング.サーバー側JavaScriptエンジンNode.jsはこのモジュールシステムを使っています.
2、AMD非同期モジュール定義(define)
AMDは非同期方式で依存モジュールをロードするモジュールシステムである.モジュールが異なるファイルにある場合、それらはXHRでロードされます.モジュールは、そのモジュールに依存するモジュールを一つ一つロードしてから実行されます.AMDモジュールは、必ず関数であり、パラメータとしてdefine関数に導入される.関数の戻り値は、すべての依存モジュールに転送され、得られた戻り値はパラメータとしてモジュールメソッドに渡されます.Require.jsライブラリでAMDを実現しました.
3、Type Script同期ローディングモジュール(export module、import)
Type Scriptは、JavaScriptのオーバーセットとして、モジュールシステムを提供しています.コンパイルされると、JavaScriptモジュールモードを使用し始めます.Type Scriptモジュールはmoduleキーワードで定義されています.出力されるオブジェクトはすべてexportキーで定義されています.importキーは、他のモジュールをモジュールにロードし、モジュールから導出されたオブジェクトを捕捉するために使用されます.Type Scriptモジュールは同期ローディングです.
ES 6モジュールシステム
ES 6モジュールシステムは、上記の既存のモジュールシステムに啓発され、以下の特性を有する.このキーワードは無限に使えます.2、importキーを使って他のモジュールをあるモジュールに導入します.これは任意の数のモジュールを導入するために使用できます.3、モジュールの非同期ロードをサポートします.4、ロードモジュールにプログラミングサポートを提供します.次に、具体的なプログラミング方法によって各特性を見てみましょう.エクスポートオブジェクトは既存のモジュールシステムにおいて、JavaScriptコードファイルごとにES 6でモジュールです.モジュール内のオブジェクトだけが外部呼出しが必要な場合、モジュールはオブジェクトを出力します.残りはモジュールのプライベートオブジェクトです.この処理方式は詳細をパッケージ化し、必要な機能のみを導出する.モジュールからオブジェクトを導出し、ES 6は私たちのために異なる方法を提供します.以下の議論を参照してください.インライン導出ES 6モジュール内のオブジェクトは、それらを作成する声明の中で導き出すことができる.一つのモジュールの中で何度もexportを使用できます.すべてのオブジェクトは一緒にエクスポートされます.次の例を見てください.

export class Employee {
 constructor(id, name, dob){
 this.id = id;
 this.name=name;
 this.dob= dob;
 }
 getAge(){
 return (new Date()).getYear() - this.dob.getYear();
 }
 }
 export function getEmployee(id, name, dob) {
 return new Employee(id, name, dob);
 }
 var emp = new Employee(1, "Rina", new Date(1994, 9, 15)); 

ケース内のモジュールは、2つのオブジェクトを導出しました.Employeeクラス、getEmployee関数.オブジェクトempはエクスポートされていませんので、まだモジュールのプライベートです.オブジェクトのグループをエクスポートするのはインラインガイドが効果的ですが、大規模なモジュールでは、モジュールが導き出す対象に追跡できない可能性があります.この場合、より良い方法は、モジュールの最後に単独で声明をエクスポートして、モジュール内のすべてのオブジェクトを導出することである.個別のエクスポートステートメントを使用して、前のケースのモジュールを書き換えた結果、

class Employee {
 constructor(id, name, dob){
 this.id = id;
 this.name=name;
 this.dob= dob;
 }
 getAge(){
 return (new Date()).getYear() - this.dob.getYear();
 }
 }
 function getEmployee(id, name, dob) {
 return new Employee(id, name, dob);
 }
 var x = new Employee(1, "Rina", new Date(1994, 9, 15));
 export {Employee, getEmployee};

はエクスポート時にオブジェクトの名前を変更してもいいです.以下の例に示すように、Employeeはエクスポート時にAsociateに名前を変え、関数GetEmployeeはget Asociateに名前を変えます.

export {
 Associate as Employee,
 getAssociate as getEmployee
 }; 

Defaultは、キーワードdefaultを使用して、対象をdefaultオブジェクトとして表示してエクスポートすることができます.defaultキーワードは各モジュールで一回しか使用できません.これはインラインエクスポートにも使用できますし、オブジェクトのグループのエクスポートにも使用できます.以下の例は、グループ導出文でdefault:

export default {
 Employee,
 getEmployee
 }; 

導入モジュール既存モジュールがキーワードimportを使用して他のモジュールに導入できることを示している.モジュールは任意の数のモジュールに導入できます.導入モジュールの異なる方法を以下に示す.オブジェクトの導入がない場合は、モジュールが実行すべき論理を含んでいて、オブジェクトをエクスポートしません.このようなオブジェクトは他のモジュールに導入されてもいいです.以下の例に示すように、

import './module1.js';

＊標準オブジェクトの導入＊Default導出方式を用いてオブジェクトを導出し、このオブジェクトはimport宣言で直接ある参照に割り当てられ、以下の例では「d」となる.

import d from './module1.js'; 

＊命名の対象＊を導入すると、上述したように、一つのモジュールで多くの名前付きオブジェクトを導出することができます.これらの名前付きオブジェクトを別のモジュールに導入するには、導入宣言にこれらのオブジェクトを一覧表示する必要があります.一例を挙げると、

import {Employee, getEmployee} from './module1.js'; 

はもちろん、同じ宣言で標準オブジェクトと命名オブジェクトを導入することもできる.この場合、デフォルトのオブジェクトは別名を定義しなければなりません.

import {default as d, Employee} from './module1.js'; 

＊＊すべてのオブジェクトを導入して*以上の場合、import宣言に挙げたオブジェクトだけが導入されて使用されますが、他のオブジェクトは導入モジュールでは使用できません.もちろん、これはユーザにどのオブジェクトが導出され、利用されるかを知る必要がある.モジュールが大量のオブジェクトを導出する場合、他のモジュールがすべての導出対象を導入するには、次のような声明を使用しなければならない.

import * as allFromModule1 from './module1.js'; 

allFroomModule 1の別名は、module 1から導出されたすべてのオブジェクトを指すことになる.インポートモジュールでは、属性としてアクセスできます.プログラム可能な形式の導入は、いくつかの条件や他のイベントに基づいて必要なモジュールをロードしたい場合、ロードモジュールのプログラム可能なAPIを使用して実現することができる.System.importメソッドを使用して、プログラムに従ってロードモジュールを設定することができます.これは非同期的な方法であり、Promiseに戻る.この方法のシンタックスの例は以下の通りである.
モジュールのロードが成功し、出力されたモジュールをコールバック関数に転送すると、Promiseが通過します.モジュール名が間違っていたり、ネットワークの遅延などでモジュールのロードが失敗した場合、Promiseは失敗します.結論のいずれかの大きな応用には、モジュール化が必要です.ES 6モジュールは、JavaScriptのためにこの特性を提供し、これらのモジュールは多くの選択を提供し、オブジェクトを導出し、導入する.この特性がブラウザによってサポートされる日を楽しみにしています.その時には第三者ライブラリを読み込まずにJavaScriptモジュールを作成、ロードすることができます.現在流行しているクライアントMVCフレームAnglar.jsは、その2.0バージョン(まだ開発中)でES 6のモジュール化を使用しています.モジュールシステムの使用を開始して、コードがより組織的で可読性があるようにします.