How can I split objects under the same closure into different files

Question

I have the following structure for my client;

var myObject = (function(){ var mainObjectList = []; var globalObject = { init:function(mainObjectId){ var logger = {}; var utilityObject1 = {}; var utilityObject2 = {}; var mainObject = {}; mainObjectList.push(mainObject); },//init someOtherMethods:function(){} };//globalObject return globalObject; })(); 

with my client I can say myObject.init (5); and create a new structure. My problem is that I have many utility objects inside the closure of the initialization function (logger, utilityObject1, utilityObject2 ..). My shared file has exceeded 1000 lines, so I want to split all the utility objects into different files in order to have a better project. for example, I could split the logger, utilityObject1, utilityObject2 into my own files. the problem is that the objects are closed. I cannot just add them to the main object in separate files. so I thought about the next injection method.

 //start of file1 var myObject = (function(){ var mainObjectList = []; var globalObject = { init:function(mainObjectId){ var logger; var utilityObject1 = {}; var utilityObject2 = {}; var mainObject = {}; mainObjectList.push(mainObject); },//init someOtherMethods:function(){}, injectLogger:function(creator){ this.logger = creator(); } };//globalObject return globalObject; })(); //start of file2 myObject.injectLogger(function(){return {};}); 

That way I can separate the files for development. but in production I can combine files to have one file. But I have some problems with this design. I just added an accessible injectLogger function to myObject. and my registrar can no longer use other local variables (now I have to pass them to the creator object). My question is, is there any other way to split this kind of code into files. (possibly an external utility.)

Answer 1

I like to use the google compiler http://code.google.com/closure/compiler/

If you don't want to use something like this, you can try things like this: (Make sure you first load globalObject.js to define the variable).

 //globalObject.js var globalObject = function() { } //init.js globalObject.prototype.init = function() { this.utilityFunction(); //do something with utilityObject1 this.utilityFunction(this.utilityObject1); } //utilityFunction.js globalObject.prototype.utilityFunction= function() {} //utilityObject1.js globalObject.prototype.utilityObject1 = {}; //main.js var myObject = new globalObject(); myObject.init(); 

Then you can overwrite the function by doing something like this:

 //main.js var myObject = new globalObject(); myObject.utilityFunction = function() { //new function } myObject.init(); // This will then use the new utilityFunction method you just set. 

Answer 2

As I understand it, you want to have lexical variables that all of your modules close, but you want to save the code for different modules in different files.

One way to achieve this precise behavior is to create one Javascript file by combining the module definitions together:

Header.js-partial

 var myObject = (function(){ var mainObjectList = []; var globalObject = { init:function(mainObjectId){ 

Logger.js:

 function Logger() { this.enabled = true; } Logger.prototype.log = function() { if (window.console && window.console.log) { return window.console.log.apply(window.console.log, arguments]); } } 

etc..

Add other module files as desired. They can refer to lexical variables.

Footer.js-partial

  }// end init }; // end globalObject return globalObject; 

}) ();

In the end you will need a script that will merge all these files together into a single js file. There is no other way to access a lexical variable in pure Javascript.

Great alternative

However, this technique is ripe for confusion, and I do not recommend it. Closing is usually intended to close on top of local variables, not program variables. If you use lexical variables declared 1000 lines back, you will spend some amount of time tracking where all your variables were declared at the start of your program. Instead, you should probably globalObject private "global" data in a globalObject . For example, save mainObjectList in globalObject.mainObjectList and specify that in the module files.

I recommend a solution similar to that described by nemophrost. Each file must be valid javascript on its own.

Answer 3

You can use the PHP command line to serve as a preprocessor to merge your files. For example, main.js.php might look like this:

 (function() { <?php require('foo.js.php');?> })(); 

and then run the php main.js.php > combined.js command php main.js.php > combined.js when you want to create an output file that you can use to minimize and deploy.

This has the advantage that you can upload main.js.php to the server to test the new version of the code without recompiling . You can simply put a line at the very beginning of main.js.php to force PHP to send the correct MIME type:

 <?php header('Content-type: text/javascript');?> 

Answer 4

How do I deal with this problem to check if a global object exists and if it is not created. So the order is not important.

 // file 1 var Global_Obj = Global_Obj || {}; // creates empty global object Global_Obj.An_Obj = { /* stuff */ }; // file 2 var Global_Obj = Global_Obj || {}; // uses created global object Global_Obj.Another_Obj = { /* stuff */ };