モジュラーは、JSを理解します

モジュラー拡張は言語が、それはコードを分割するために、開発者や組織を助けることができる唯一の方法です。

モジュールモード

モジュラー仕様を形成する前に、JSモジュールの開発者は、汚染JSグローバルスコープの問題を解決するためのデザインパターンを使用します。モジュールモードは、もともと伝統的なソフトウェアエンジニアリングとしてパッケージプライベートとパブリックのクラスAを提供する方法を定義しました。JavaScriptでは、Module1のモードが使用され匿名函数自调用 (闭包)たカスタム動作によって公開されたパブリックおよびプライベートメンバーのメンバーを区別するために、カプセル化します。

MyModuleというが=（LET 関数{（ウィンドウ）
    moduleNameのは、聞かせて = 'モジュール'   // プライベート
    // パブリック
    関数{setModuleName（名）
      moduleNameの = 名前
    }
    // パブリック
    関数はgetModuleName（）{
       戻りmoduleNameのを
    }
    リターン {setModuleName、はgetModuleName}   // 露光動作 
  }）（ウィンドウ）

上記の例では、それはクロージャの特性によって新しいスコープを開き、書かれたモジュールモードでグローバルスコープ名前の競合やセキュリティの問題を軽減します。しかし、開発者がコードを整理し、分割するためにそれを使用することができませんので、礎石としてモジュラー仕様を生じさせます。

のモジュラー規制

1. CommonJS

主ノードの開発に使用されるCommonJSは、各モジュールはファイルではなく、ファイルは独自のスコープを持っています。することによりmodule.exports、公共のメンバーへの暴露。例えば：

// ファイル名：x.js 
のletのX = 1。;
 機能（追加の）{
  X + = 1 ;
  リターンのx;
}
module.exports.x = X。
module.exports.add =追加します。

さらに、依存関係が必要CommonJSモジュール（）を導入することにより、組み込み関数はノードモジュール、カスタムモジュールと他のサードパーティモジュールNPMを導入することができる必要とします。

// ファイル名：main.js 
XMが必要です（」./ x.jsを=ましょう）。
console.log（xm.x）。  // 1 
にconsole.log（xm.add（））。  // 2 
にconsole.log（xm.x）。   // 1

私たちは、上記のコードから参照ロードされている同期機能を必要とすることができx.js、そして返されたmodule.exportsリテラルの出力値のコピーを。いくつかは求めることができるmodule.exports.x = x;あなたは、どのように脂肪のものの割り当てをしませんか？私たちは、モジュールモードがモジュラー仕様、CommonJSモジュールもモードのパッケージの礎石である、と言います。私たちは、上記の効果を達成するために、コードモジュールのモデルを使用することができます。

xModuleは=（LET 関数（）{
  Xましょう = 1 ;
  機能の追加（）{
    X + = 1 ;
    リターンのx;
  }
  リターン{X、追加}。
}）（）;
XMましょう = xModule。
console.log（xm.x）。  // 1 
にconsole.log（xm.add（））。  // 2 
にconsole.log（xm.x）。   // 1

CommonJS原則モジュールのモデルシミュレーションすることで、我々はよくCommonJSの特徴を説明することができます。CommonJSの呼び出しからの戻り値を介して、無名関数の割り当てを取得し、その機能のロード・モジュールが同期している必要がする必要があるため。同期モジュールは、HTTP CommonJSを介してロードされているのでしかし、CommonJSモジュールのローディング機構は、非常に時間がかかり、クライアント上で使用CommonJSを制限します。

2. AMDとCMD

2.1 AMD

// AMD仕様モジュールの定義 
DEFINE（[ 関数（）{
   リターン・モジュール
}）

CommonJSは異なり、AMD仕様の被依赖モジュールが非同期にロードされ、モジュールがrequire.jsモジュール管理ツールライブラリに依存し、実行するコールバック関数として定義されます。もちろん、AMDは、標準化され使用されていない匿名函数自调用パッケージ化する方法を、我々はまだ閉鎖の原理を利用したプライベートメンバーやモジュールのパブリックメンバーを達成することができます：

（[ 'モジュール1'、 'モジュール2']を定義し、関数{（M1、M2）
  Xましょう = 1 ;
  機能の追加（）{
    X + = 1 ;
    リターンのx;
  }
  リターン{追加}。
}）

2.2 CMD

CMDは、昇格プロセスモジュール定義で標準化された出力SeaJSです。AMD尊敬フロント依存し、尊敬CMD近く依存しています。

（DEFINE 関数（必要、輸出、Module1の）{
   //   同期ロードモジュール
  のvar A =（必要'./ A' ）。
  a.doSomething（）;
  // ロードが完了したときに非同期に、コールバックモジュールをロード 
  require.async（[ './ B']、関数{（B）を
    b.doSomething（）;
  }）;
  // 外部露出部材 
  exports.doSomething = 関数（）{}。
}）;
// 使用モジュール 
seajs.use（ 'パス'）;

CMDは、機能のCommonJSを統合し、AMDは、同期および非同期ロード・モジュールをサポートしています。遭遇したメインロジックにロードされたすべての依存モジュールが文を必要とする場合、モジュールの実行順序と書かれた順序がまったく同じであるので、CMDはちょうどそれをダウンロードし、完全な負荷依存モジュールの後に実行されていない、それは、対応するモジュールを実行しますA。したがって、CMDでrequireないHTTP要求手順機能モジュールは、同期ロードされたとき。

ES6モジュール

ES6のモジュラーは標準ではありませんが、JS言語のかなり特徴的。ES6の導入により、AMDとCMDはまた、歴史になります。モジュラー仕様ES6モジュールと比較して、二つの主な特性があります。

モジュラー出力が仕様値のコピーである、ES6モジュールの出力が基準値です。
モジュラーランタイムの仕様がロードされ、ES6は、コンパイル時に出力インタフェースモジュールです。

モジュラー出力仕様は、生成されたスクリプト内で実行されるオブジェクトです。ES6モジュールではなく、オブジェクトは、オブジェクトはマルチES6 Module1の出力は、マルチオブジェクトモデルがロードされます。原則として、モジュラー仕様はから呼び出された匿名関数をカプセル化され、およびES6モジュールは出力を呼び出すためのメンバ関数からの匿名の呼び出しです。違いは、基準とすることができるバベルとCommonJSモジュール。