How can I seperate objects that is under same closure into different files

Question

I have 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 I have a lot of utility objects inside init function closure (logger, utilityObject1, utilityObject2..). My total file exceeded 1000 lines so I want to separate all utility objects into different files to have a better project. for example I could separate logger, utilityObject1 , utilityObject2 to their own files. the problem is since objects are in closure I cannot just add them to main object in separate files. so I thought of following 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 my files for development. but in production I can concatenate files to have one file. But I have some problems with this design. I just added an accessible injectLogger function into myObject. and my logger cannot use other local variables in closure now(I have to pass them to creator object now). My question is is there any other way to separate that kind of code into files. (maybe an external utility.)

Answer 1

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

If you don't want to use something like that, you might try this sort of thing: (Make sure you load globalObject.js first 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();

You could then 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.