¿Cómo puedo dividir una aplicación de JavaScript en varios archivos?

Question

Creé una aplicación javascript con todo el código en un archivo. La aplicación ha crecido bastante y creo que es hora de dividirla en varios archivos, pero me está costando trabajo encontrar la manera de hacerlo. Creo que el problema radica en cómo me he decidido construir la aplicación, que utiliza la siguiente plantilla:

var myApp = function(){ 

    //there are several global variables that all of the modules use; 
    var global1, global2, module1, module2; 

    global1 = { 
     prop1:1 
    }; 

    //There are also several functions that are shared between modules 
    function globalFunction(){ 

    } 

    var ModuleOne = function(){ 

     function doSomething(){ 
      //using the global function 
      globalFunction(); 
     } 

     return{ 
      doSomething:doSomething 
     } 
    }; 

    var ModuleTwo = function(){ 

     function doSomething(){ 
      //module 2 also needs the global function 
      globalFunction(); 

      //Use the functionality in module 1 
      //I can refactor this part to be loosely coupled/event driven 
      module1.doSomething(); 
     } 
    }; 

    module1 = new ModuleOne(); 
    module2 = new ModuleTwo(); 
}; 

Incluso si todos los módulos fueron acoplamiento flexible y orientada a eventos, todavía no saben cómo lo haría dividir esto en varios archivos dada la dependencia de cada módulo en las funciones/variables compartidas. ¿Alguien tiene sugerencias?

Answer 1

Tome una mirada en el patrón de diseño en este artículo: http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth - se puede dividir su definición del módulo a través de múltiples archivos de una manera permite compartir propiedades comunes pero también permite crear variables o métodos que son privados solo para un archivo en particular.

La idea básica es que los archivos JS individuales se suman al mismo módulo con un código como éste:

var MODULE = (function (my) { 
    var privateToThisFile = "something"; 

    // add capabilities... 

    my.publicProperty = "something"; 

    return my; 
}(MODULE || {})); 

donde en cada archivo JS si MODULE ya está definido (desde otro archivo JS) se añaden a ella de lo contrario lo creas. Puede configurarlo para que (la mayoría) no importe en qué orden están incluidos los diversos archivos.

El artículo detalla varias variaciones y, por supuesto, probablemente obtendrá sus propios ajustes ...

Answer 2

Regístrese para require.js. http://requirejs.org/

Ejemplo:

require(["dir/file"], function() { 
    // Called when file.js loads 
}); 

Answer 3

Usted puede poner las funciones compartidas y módulos compartidos en el objeto myApp para que no contaminan el espacio de nombres global, pero se puede acceder en cualquier lugar sin estar dentro del mismo cierre.

myApp.moduleOne = function() {...} 
myApp.moduleTwo = function() {...} 
myApp.globalFunction = function() {...} 

A continuación, se pueden definir en cualquier archivo y utilizarlos en cualquier archivo.

También podría simplemente dividir el archivo en varios archivos, pero debe incluirlos en un orden específico que preserve su cierre. Si está dividiendo los archivos por razones de edición práctica, pero los recombina y los minimiza para la implementación real, entonces esto no le costaría nada en términos de cómo escribe el código o cómo se implementa, pero le daría muchos archivos más pequeños. para la conveniencia de edición.

Answer 4

Mi solución favorita para esto es usar el scripting del lado del servidor para incluir los otros archivos dentro de mi archivo "principal". Por ejemplo, el uso de Template Toolkit de Perl:

var myApp = function(){ 
    [% INCLUDE lib/module1.js %] 
    [% INCLUDE lib/module2.js %] 
    [% INCLUDE lib/module3.js %] 
} 

o PHP:

var myApp = function(){ 
    <?php 
    include 'lib/module1.js'; 
    include 'lib/module2.js'; 
    ?> 
} 

Answer 5

para no aumentar la confusión, pero viniendo de un fondo de C++, he intentado construir algo que se asemeje a algo así como un espacio de nombres de C++ de la manera que se describe a continuación. funciona, pero me gustaría saber si este es un patrón aceptable para el OP.

-------------------------------- archivo principal.js: ----------------

var namespacename = function(){} 

namespacename.mainvalue = 5; 

namespacename.maintest = function() { 
    var cm = new namespacename.game(); 
    cm.callme(); 
} 

------------------------- ------- file game.js: ----------------

namespacename.gamevalue = 15; 

namespacename.game = function(){ 
    this.callme = function(){ 
     console.log("callme"); 
    } 
} 

namespacename.gametest = function() { 
    console.log("gametest:gamevalue:" + this.gamevalue); 
    console.log("gametest:mainvalue:" + this.mainvalue); 
} 

--------------- ----------------- file index.html: --------------

<html> 
    <head> 
     <title>testbed</title> 
    </head> 

    <body onload="init();"> 
    </body> 

    <script type="text/javascript" src="main.js"></script> 
    <script type="text/javascript" src="game.js"></script> 

    <script type="text/javascript"> 

     init = function() 
     { 
      namespacename.maintest(); 
      namespacename.gametest(); 

      console.log("html main:" + namespacename.mainvalue); 
      console.log("html game:" + namespacename.gamevalue); 
     } 

    </script> 
</html>