Common JS、AMD、UMD、CMD

Common JS(同期のものは、node.jsに適用されます.)

Common JSはnodejs、つまりサーバー側で広く使われているモジュール化の仕組みです.

この仕様の主な内容は、モジュールがmodule.exportを通じて外部の変数またはインターフェースを導出し、require()を通じて他のモジュールの出力を現在のモジュールのスコープに導入しなければならないことである.

モジュールの定義
各モジュールの内部で、module変数は現在のモジュールを表します.そのexport属性は対外的なインターフェースで、モジュールのインターフェースを暴露します.このモジュールを他のファイルにロードすると、実際にmodule.export変数を読み込むことになります.

var x = 5;
var addX = function (value) {
    return value + x;
};
module.exports.x = x;
module.exports.addX = addX;

モジュールをロード

//require        ，      .js
var app = require('./app.js');

インポートファイル

は一般的に主ファイル(入り口ファイル)があります.index.にこの入り口ファイルをロードして、この入り口ファイルに他のファイルをロードします.

は、package.jsonにmainフィールドを配置することによって、入口ファイルを指定することができる.

モジュールキャッシュ
モジュールを初めて読み込むと、Nodeはこのモジュールをキャッシュします.このモジュールを後で読み込むと、そのままキャッシュからモジュールのmodule.exports属性を取り出します.
アドイン機構
CommunJSモジュールのロード機構は、入力されたのは出力された値のコピーです.つまり、一度値を出力すると、モジュール内部の変化はこの値に影響しません.
AMD(非同期ブラウザの設定)

AMD(非同期モジュール定義)は、Common JSモジュールシステムが同期してローディングされているため、現在のブラウザ環境は同期ローディングモジュールの条件を用意していません.

requirejsは、AMD規格に準拠したモジュール化ツールである.

RequireJSの基本思想は、define方法によってコードをモジュールとして定義することである.require方法によりコードのモジュールローディングを実現します.

モジュールの定義

define方法はモジュールを定義するために用いられ、RequireJSはモジュールごとに個別のファイルに入れる必要がある.

は、他のモジュールに依存するかどうかによって、2つの状況に分けて議論することができる.第一の場合は、独立したモジュールを定義すること、すなわち、定義されたモジュールは他のモジュールに依存しないことである.第二の場合は、定義されたモジュールが他のモジュールに依存する非独立モジュールを定義することである.

独立モジュール

define(function(){
    ……
    return {
        //    
    }
})    
//define            ，     。

非独立モジュール

define(['module1','module2'],function(m1,m2){
  ……
  return {
    //    
  }
})

で定義されるモジュールはmodule 1およびmodule 2に依存し、最初のパラメータは依存するモジュールの配列である.

の第二のパラメータは関数であり、依存するモジュールがすべてローディングに成功したときにのみ起動される.この関数のパラメータm 1,m 2は、前の配列の依存モジュールに対応しています.

このモジュールは他のモジュールが起動するためにオブジェクトを返す必要があります.

モジュールをロード
モジュールをロードするためにもrequire()法が使用されているが、非同期であるため、コールバック関数の形式が使用されている.

require(['foo','bar'],function(foo,bar){
  ……
})

上記の方法は、ローディングfooとbarの二つのモジュールを表しています.この二つのモジュールがローディングに成功したら、一つのコールバック関数が実行されます.このコールバック関数は、特定のタスクを完了するために使用されます.

//require       define    。
define(function(require){
    var otherModule = require('otherModule');
})

//require           ，          。
require(
    [ "backbone" ], 
    function ( Backbone ) {
        return Backbone.View.extend({ /* ... */ });
    }, 
    function (err) {
        // ...
    }
);

設定

require.config({
    paths: {
        "backbone": "vendor/backbone",
        "underscore": "vendor/underscore"
    },
    shim: {
        "backbone": {
            deps: [ "underscore" ],
            exports: "Backbone"
        },
        "underscore": {
            exports: "_"
        }
    }
});

使用

ホームページのindex.では、先にscriptタグでrequire.min.jsを導入します.

は、scriptタグを介して、入口ファイルmain.jsを導入します.この入口ファイルは、一般的に構成(require.co nfig)と他のモジュールを導入するために使用されます.