9

私は現在、「モジュールパターン」で複数のjavascriptファイルを使用しているJavascriptアプリケーションに取り組んでいます。そのようです：

var app = app || {};
app.moduleName = app.moduleName || {};

app.moduleName = function () {

    // private property
    var someProp = null;

    return {
        // public method
        init: function () {
            return "foo";
        }
    };
}();

これを使用する理由は、コードを構造化するためです。たとえば、 app.moduleName.init() を呼び出すだけで、メソッドまたはプロパティを呼び出すことができます。

これの欠点の 1 つは<script src="app.moduleName.js">、HTML に多くの .. などを含める必要があることです。

この問題を解決するために、RequireJS に出会い、ドキュメントを読みました。しかし、既存の JavaScript ファイルに大量のコードを追加せずに、これを既存の構造にマージする方法がよくわかりません。

誰かがこれを達成する方法を提案していますか?

4

1 に答える 1

10

このように、require.js を使用してモジュール ツリーを構築できます。

// in main.js
require.config({/*...*/});
require(
    ['app'],
    function (app) {
        // build up a globally accessible module tree
        window.app = app;
        var foo = window.app.moduleName.init(); // returns "foo"
    }
);

// in app.js
define(
    ['moduleName'],
    function(moduleName){
        return {
            moduleName: moduleName;
        }
    }
);

// in moduleName.js
define(function(){
    // private property
    var someProp = "foo";
    return {
         // public method
        init: function () {
            return someProp;
        }
    }
});

ただし、require.js を使用すると、このようなグローバル モジュール ツリーがなくてもアプリを構築できます。たとえ簡単に構築できたとしてもです。それらを要求するだけで、モジュールのすべての部分に個別にアクセスできます。define/require コールバックで返すものは何でも、require.js によって参照として保存されます。それは知っておくべき重要なことです。そのため、アプリケーションにスクリプトを 2 回含めて、同じオブジェクトまたはインスタンスを持つことができます。たとえば、このようなモジュールを含める場合

// in SomeClass.js
define(function () {
    function SomeClass() {
        this.myValue = true;
    }
    return new SomeClass();
});

// app.js
define(
    ['SomeClass', 'someComponent'],
    function (SomeClass, someComponent) {
        return {
            init: function () {
                SomeClass.myValue = false;
                someComponent.returnClassValue(); // logs false
            }
        };
    }
);

// someComponent.js 
define(
    ['SomeClass'],
    function (SomeClass) {
        return {
            returnClassValue: function () {
                console.log(SomeClass.myValue); // false
            }
        };
    }
);

SomeClass.myValue の値は、モジュールを含むすべてで同じになります...

于 2012-10-25T11:20:34.990 に答える