RequireJS und JS Modul Muster

Question

Ich arbeite derzeit an einer Javascript-Anwendung, die mehrere Javascript-Datei mit einem "Modul-Muster" verwendet. Wie so:

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

app.moduleName = function() { 

    // private property 
    var someProp = null; 

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

Der Grund, warum im dies mit meinem Code zu strukturieren. Ich kann eine Methode oder Eigenschaft aufrufen, indem ich beispielsweise app.moduleName.init() aufruft.

Ein Nachteil davon ist, dass ich viele <script src="app.moduleName.js"> .. etc in meinem HTML enthalten muss.

Um dieses Problem zu lösen, stieß ich auf RequireJS, ich lese die Dokumentation. Aber ich bin mir nicht ganz sicher, wie ich das in meiner bestehenden Struktur zusammenfassen soll, ohne den bestehenden Javascript-Dateien einen Haufen Code hinzuzufügen.

Hat jemand einen Vorschlag, wie dies zu erreichen ist?

Answer 1

Sie können Ihren Modulbaum wie folgt mit require.js aufbauen.

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

jedoch mit require.js können Sie Ihre Anwendung ohne ein globales Modul Baum wie folgt aufbauen ... auch wenn Sie leicht können. Sie können auf alle Teile Ihres Moduls zugreifen, wenn Sie sie benötigen. Was auch immer Sie im Definition/Require Callback zurückgeben, wird von require.js als Referenz gespeichert. Das ist etwas wichtiges zu wissen. So ist es möglich, ein Skript zweimal in Ihre Anwendung aufzunehmen und dasselbe Objekt oder dieselbe Instanz zu verwenden. Wenn Sie zum Beispiel sind ein Modul wie diese

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

Der Wert SomeClass.myValue wird das gleiche in allen einschließlich Module sein ...