フロントエンドのモジュール性を理解する (CommonJs、A​​MD、CMD)

怪我咯
リリース: 2017-04-05 13:50:15
オリジナル
4075 人が閲覧しました

フロントエンド モジュールの仕様には、CommonJs、A​​MD、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

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(&#39;math&#39;).add;
exports.increment = function(val) {
    return add(val, 1);
};

index.js
var increment = require(&#39;increment&#39;).increment;
var a = increment(1); //2
ログイン後にコピー

CommonJS仕様によると:

  • 単一のファイルがモジュールです。各モジュールには個別のスコープがあります。つまり、モジュール内で定義された変数は、グローバル オブジェクトの属性として定義されない限り、他のモジュールから読み取ることができません。

  • モジュール変数をエクスポートする最良の方法は、 module.exports オブジェクトを使用することです。

  • require メソッドを使用してモジュールをロードします。このメソッドは、ファイルを読み取って実行し、ファイル内の module.exports オブジェクトを返します

上記のコードを注意深く見ると、require が同期していることがわかります。モジュール システムは、モジュール ファイルの内容を同期的に読み取り、コンパイルして実行し、モジュール インターフェース を取得する必要があります。

しかし、これにはブラウザ側に多くの問題があります。

ブラウザ側で JavaScript をロードする最も簡単な方法は、ドキュメントに

人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート