RequireJSとJSモジュールのパターン

Question

現在、私は "モジュールパターン"を持つ複数のjavascriptファイルを使用しているJavascriptアプリケーションで作業しています。 そのように：

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

app.moduleName = function() { 

    // private property 
    var someProp = null; 

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

これを使用してイムは、私のコードをstructurizeするためです。たとえば、app.moduleName.init（）を呼び出すだけで、メソッドやプロパティを呼び出すことができます。

私のHTMLには<script src="app.moduleName.js">などがたくさん含まれていなければならないという欠点があります。

この問題を解決するために、私はRequireJSに出くわしました。ドキュメントを読みました。しかし、私は既存のjavascriptファイルにたくさんのコードを追加することなく、これを私の既存の構造体でどのようにマージするかについてはあまりよく分かりません。

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

Answer 1

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の値は

...全てを含むモジュールで同じになります