web-dev-qa-db-ja.com

RequireJS：単一の「クラス」を含むモジュールを定義する方法は？

独自のJavaScriptファイルに実装されたJavaScriptの「クラス」がいくつかあります。開発ではそれらのファイルは個別にロードされ、本番ではそれらは連結されますが、どちらの場合もロード順序を手動で定義し、BがAを使用する場合はBがAの後に来るようにします。私は RequireJSCommonJS Modules/AsynchronousDefinition の実装として、この問題を自動的に解決します。

これを行うには、それぞれが1つのクラスをエクスポートするモジュールを定義するよりも良い方法がありますか？そうでない場合、モジュールがエクスポートするものにどのように名前を付けますか？次の例のように、クラス「従業員」をエクスポートするモジュール「従業員」は、 [〜＃〜] dry [〜＃〜] に十分ではありません。

define("employee", ["exports"], function(exports) {
    exports.Employee = function(first, last) {
        this.first = first;
        this.last = last;
    };
});

define("main", ["employee"], function (employee) {
    var john = new employee.Employee("John", "Smith");
});
javascriptcommonjsrequirejs
67
avernet

AMD提案 を使用すると、エクスポートされたオブジェクトの値を返すだけで済みます。ただし、これはAMDの提案の機能であり、単なるAPIの提案であり、モジュールを通常のCommonJSモジュールに変換し直すのが難しくなります。これで問題ありませんが、知っておくと便利な情報です。

したがって、次のことができます。

大文字の名前で始まるコンストラクター関数をエクスポートするモジュールを好むため、このモジュールの最適化されていないバージョンもEmployee.jsにあります。

define("Employee", function () {
    //You can name this function here,
    //which can help in debuggers but
    //has no impact on the module name.
    return function Employee(first, last) {
        this.first = first; 
        this.last = last;
    };
});

別のモジュールで、次のようにEmployeeモジュールを使用できます。

define("main", ["Employee"], function (Employee) {
    var john = new Employee("John", "Smith");
});
111
jrburke

Jrburkeの答えに加えて、コンストラクタ関数を直接返す必要がないことに注意してください。最も有用なクラスの場合、プロトタイプを介してメソッドを追加することもできます。これは次のように実行できます。

define('Employee', function() {
    // Start with the constructor
    function Employee(firstName, lastName) {
        this.firstName = firstName;
        this.lastName = lastName;
    }

    // Now add methods
    Employee.prototype.fullName = function() {
        return this.firstName + ' ' + this.lastName;
    };

    // etc.

    // And now return the constructor function
    return Employee;
});

実際、これは requirejs.orgのこの例 に示されているパターンとまったく同じです。

102
Mark Whitaker