¿Cómo puedo dividir una aplicación de JavaScript en múltiples files?

Creé una aplicación de JavaScript con todo el código en un file. La aplicación ha crecido bastante y creo que es hora de dividirla en varios files, pero me está costando trabajo encontrar la manera de hacerlo. Creo que el problema radica en cómo he decidido build 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 shanetworking 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 modules estuvieran vagamente acoplados y guiados por events, todavía no sé cómo dividir esto en múltiples files dada la dependencia de cada module de las funciones / variables compartidas. ¿Alguien tiene sugerencias?

5 Solutions collect form web for “¿Cómo puedo dividir una aplicación de JavaScript en múltiples files?”

Eche un vistazo al patrón de layout en este artículo: http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth : puede dividir la definición de su module en varios files de una manera que permita las properties se comparten pero también le permite crear variables o methods que son privados solo para un file en particular.

La idea básica es que los files JS individuales se agregan al mismo module con un código como este:

 var MODULE = (function (my) { var privateToThisFile = "something"; // add capabilities... my.publicProperty = "something"; return my; }(MODULE || {})); 

Donde en cada file JS si MODULE ya está definido (desde otro file JS) lo agrega, de lo contrario lo crea. Puede configurarlo para que (sobre todo) no importe en qué order se incluyen los diversos files.

El artículo detalla varias variaciones y, por supuesto, es probable que propongas tus propios ajustes …

para no boost la confusión, pero viniendo de un background de C ++, he intentado build 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.

——————————– file main.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> 

Puede poner las funciones compartidas y los modules compartidos en el object myApp para que no contaminen el espacio de nombres global, pero se puede acceder a ellos en cualquier lugar sin estar dentro del mismo cierre.

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

Luego, puede definirlos en cualquier file y usarlos en cualquier file.

También puede dividir el file en varios files, pero debe includelos en un order específico que preserve su cierre. Si está dividiendo los files 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 files más pequeños. para la conveniencia de edición.

Dale a require.js una oportunidad. http://requirejs.org/

Ejemplo:

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

Mi solución favorita para esto es utilizar el scripting del lado del server para include los otros files dentro de mi file "principal". Por ejemplo, usando el Toolkit de templates 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'; ?> } 
  • Ejemplos de patrones de layout orientados a objects prácticos de JavaScript
  • Javascript: ¿debería estar ocultando mis implementaciones?
  • Beneficios de inheritance prototípica sobre clásica?
  • OOP en javascript
  • Constructores de JavaScript
  • ¿Extendiendo Number.prototype en javascript y el object Math?
  • ¿Cómo anular la variable privada en javascript?
  • ¿Los methods de objects son más rápidos que las funciones globales?
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.