如何将同一个闭包下的对象分隔到不同的文件中

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.

Answer 2

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

One way to achieve this exact behavior is to create a single Javascript file by concatenating 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 reference lexical variables.

Footer.js-partial

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

})();

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

A superior alternative

That said, this technique is ripe for confusion and I don't recommend it. Closures are generally meant for closing over local variables, not program-wide variables. If you use a lexical variables declared 1000 lines ago, you will spend some amount of time tracking down where all your variables were declared when running your program. Instead you should probably enclose private, 'global' data in the globalObject . For example, store mainObjectList in globalObject.mainObjectList and reference that in module files.

I recommend a solution like that described by nemophrost. Each file should be valid javascript on its own.

Answer 3

You could use command-line PHP to serve as a preprocessor to combine your files. For example, main.js.php could look like this:

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

and then run the command php main.js.php > combined.js when you want to produce an output file usable for minification and deployment.

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

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

Answer 4

The way I deal with this problem to check to see if the global object exists and if not create it. This way the order isn't 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 */ };