フロントエンド モジュールの仕様には、CommonJs、AMD、CMD の 3 つがあります。
サーバーサイドではCommonJs、ブラウザ環境ではAMDとCMDを使用します。
AMDは、RequireJSのプロモーションプロセス中のモジュール定義の標準化された出力です。
CMDは、SeaJSのプロモーションプロセスにおけるモジュール定義の標準化された出力です。
AMD: 早期実行 (非同期ロード: 依存関係が最初に実行される) + 遅延実行
CMD: 遅延実行 (実行からロード、順番に実行)
関数 記述方法
function f1(){ //... } function f2(){ //... }
module は、特定の関数を実装するファイルです。ファイルに複数の関数を入れると、モジュールが形成されます。必要に応じてこのファイルをロードし、そのファイル内の関数を呼び出します。
しかし、これを行うとグローバル変数が汚染され、他のモジュールの変数名と競合しないという保証はなく、モジュールメンバー間の関係もありません。
オブジェクトの書き方
var module = { star : 0, f1 : function (){ //... }, f2 : function (){ //... } }; module.f1(); module.star = 1;
モジュールはオブジェクトとして記述され、モジュールのメンバーはオブジェクトの中にカプセル化されており、オブジェクトのプロパティを呼び出すことでモジュールのメンバーにアクセスして使用することができます。ただし、モジュールのメンバーも公開されるため、モジュールの内部状態が外部から変更される可能性があります。
関数をすぐに実行する
var module = (function(){ var star = 0; var f1 = function (){ console.log('ok'); }; var f2 = function (){ //... }; return { f1:f1, f2:f2 }; })(); module.f1(); //ok console.log(module.star) //undefined
内部のプライベート変数には外部からアクセスできない
CommonJSはサーバーサイドモジュールの仕様であり、Nodeによって推進され、使用されます。サーバー側のプログラミングは複雑であるため、モジュールなしではオペレーティング システムや他のアプリケーションと対話するのは困難です。使い方は以下の通りです:
math.js exports.add = function() { var sum = 0, i = 0, args = arguments, l = args.length; while (i < l) { sum += args[i++]; } return sum; }; increment.js var add = require('math').add; exports.increment = function(val) { return add(val, 1); }; index.js var increment = require('increment').increment; var a = increment(1); //2
CommonJS仕様によると:
単一のファイルがモジュールです。各モジュールには個別のスコープがあります。つまり、モジュール内で定義された変数は、グローバル オブジェクトの属性として定義されない限り、他のモジュールから読み取ることができません。
モジュール変数をエクスポートする最良の方法は、 module.exports オブジェクトを使用することです。
require メソッドを使用してモジュールをロードします。このメソッドは、ファイルを読み取って実行し、ファイル内の module.exports オブジェクトを返します
上記のコードを注意深く見ると、require が同期していることがわかります。モジュール システムは、モジュール ファイルの内容を同期的に読み取り、コンパイルして実行し、モジュール インターフェース を取得する必要があります。
しかし、これにはブラウザ側に多くの問題があります。
ブラウザ側で JavaScript をロードする最も簡単な方法は、ドキュメントに