RequireJS i JS Module Pattern

Question

Obecnie pracuję nad aplikacją Javascript, która używa wielu plików javascript z "wzorcem modułów". tak:

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

app.moduleName = function() { 

    // private property 
    var someProp = null; 

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

Powodem im przy tym jest structurize mój kod. Mogę wywołać metodę lub właściwość, po prostu wywołując na przykład app.moduleName.init().

Jedną z wad tego rozwiązania jest to, że muszę umieścić w moim kodzie wiele numerów <script src="app.moduleName.js"> .. itd.

Aby rozwiązać ten problem, natrafiłem na RequireJS, przeczytałem dokumentację. Ale nie jestem całkiem pewien, jak scalić to w mojej istniejącej strukturze, bez dodawania wiązki kodu do istniejących plików javascript.

Czy ktoś ma jakieś sugestie, jak to osiągnąć?

Answer 1

Możesz zbudować swoje drzewo modułów w ten sposób z 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; 
     } 
    } 
}); 

Jednak z require.js można zbudować aplikację bez drzewa globalnego modułu w ten sposób ... nawet jeśli łatwo. Możesz uzyskać dostęp do wszystkich części modułu indywidualnie, po prostu wymagając ich. Cokolwiek zwrócisz w wywołaniu define/require, będzie przechowywane jako referencja przez require.js. To ważne, aby wiedzieć. Więc możliwe jest dołączenie skryptu dwukrotnie do twojej aplikacji i posiadanie tego samego obiektu lub instancji. Na przykład, jeśli obejmują moduł jak ten

// 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 
      } 
     }; 
    } 
); 

Wartość SomeClass.myValue będą takie same we wszystkich modułach w tym ...