JavaScriptモジュール化開発——AMD仕様

26122 ワード

ここではAMD仕様を紹介します.(ここのAMDとcpuのAMDは同じことではないです.)
前の文章の知識によれば、モジュールシステムには少なくとも次のような機能が必要であることが分かります.
パッケージを作成できるモジュール他のモジュールに対する依存性を定義することができる.
機能をエクスポートできます.他のモジュールによってが使用されます.
AMDは「Aynchronous Module Definition」の略語で、「非同期モジュール定義」という意味です.名前からも分かるように、モジュールは非同期的にロードされています.モジュールのロードは後続のステートメントの実行に影響しません.すべてのモジュールに依存するステートメントは、このモジュールのロードが完了するまで、一つのコールバック関数に入れられます.
AMD規格のAPIはとても簡単です.define(id?, dependencies?, factory);仕様は一つのモジュールを定義するためにdefine関数を定義します.これは三つのパラメータを含み、前の二つのパラメータはいずれもオプションです.
最初のパラメータID:string文字列であり、モジュールの識別(すなわちモジュールの経路、IDを通して、どの位置から依存モジュールをロードするかを知ることができる)を表しています.
第二のパラメータdependencies:配列であり、メンバーはモジュールに依存するid である.
第三のパラメータfactoryは、依存するモジュールのロードに成功した後、このコールバック関数を実行します.パラメータはすべての依存モジュールの参照です.コールバック関数に戻り値があれば、を導き出すことができます.
完全なモジュール定義は、下のコードのようなモジュール名、モジュールの依存性とコールバック関数を含む.
define("adder", ["math"], function (math) {
    return {
        addTen : function (x) {
            return math.add(x, 10);
        }
    };
});
このモジュールが依存していない場合、デフォルトの依存度は["require", "exports", "module"]であり、このときモジュールは次のように書き換えられます.
define("adder", function (require, exports) {
    exports.addTen = function (x) {
        return x + 10;
    };
});
最初のパラメータを省略すると、匿名モジュールが定義されます.コードを参照してください.
define(["math"], function (math) {
    return {
        addTen : function (x) {
            return math.add(x, 10);
        }
    };
});
実際には、より多くの匿名モジュール定義方式が使用されており、モジュールの識別とソースコードはもはや関連していないので、開発者はこのモジュールを任意の位置に置いてもよく、コードを修正する必要はない.一般的にはツールを使ってモジュールを一つのファイルに梱包する時だけ、最初のパラメータを宣言するので、モジュールに名前を付けないようにします.
モジュールを書く時、依存性がないかもしれません.あるいは後で負荷依存が必要です.つまり、最初と二番目のパラメータは省略できます.下のコードはこのような使い方を示しています.これもCommunJSの書き方です.互換性があります.
define(function (require, exports, module) {

    ……

    var a = require('a'),
        b = require('b');

    exports.action = function () {
        ……
    };
});
注意上記のコールバック関数のrequireの使用は自動的に動的にロードされます.
今まで、下のこれらの倉庫はAMD規格を実現しました.
RequireJS curl lsjs ドジョウ 1.7+また、多くのjsライブラリはAMD仕様をサポートしており、自分はモジュールとして存在しています.例えば、jQuery、MooToolsなど、AMD仕様は基本的に非常に普及しています.
author: feeldesignstudio.com 
http://jnoodle.github.io/2013/09/javascript-module-pattern-amdhttp://www.feeldesignstudio.com/2013/09/javascript-module-pattern-amd