フロントエンドのモジュール性を理解する (CommonJs、AMD、CMD)-jsチュートリアル-php.cn

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

怪我咯

リリース： 2017-04-05 13:50:15

オリジナル

4120 人が閲覧しました

フロントエンドモジュールの仕様には、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(&#39;ok&#39;);
　　　　};
　　　　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仕様によると: