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

Question

我为我的客户提供了以下结构；

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;
})();

我可以对我的客户说 myObject.init(5); 并创建一个新的结构。 我的问题是我在 init 函数闭包中有很多实用程序对象（logger、utilityObject1、utilityObject2..）。我的总文件超过 1000 行，因此我想将所有实用程序对象分成不同的文件，以获得更好的项目。例如，我可以将 logger、utilityObject1、utilityObject2 分离到它们自己的文件中。问题是由于对象处于关闭状态，我不能将它们添加到单独文件中的主对象中。于是我想到了下面的注入方法。

//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 {};});

这样我就可以分离我的文件进行开发。但在生产中我可以将文件连接成一个文件。但我对这个设计有一些问题。我刚刚在 myObject 中添加了一个可访问的jectLogger 函数。我的记录器现在不能在闭包中使用其他局部变量（我现在必须将它们传递给创建者对象）。我的问题是有没有其他方法可以将此类代码分离到文件中。 （也许是外部实用程序。）

Answer 1

我喜欢使用google的闭包编译器http://code.google.com/closure/compiler/

如果你不想使用类似的东西，你可以尝试这样的事情：（确保你首先加载 globalObject.js 来定义变量）。

//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();

然后您可以通过执行以下操作来覆盖该函数：

//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

据我了解，您希望拥有一些所有模块都关闭的词法变量，但您希望将各个模块的代码保留在不同的文件中。

实现这种精确行为的一种方法是通过将模块定义连接在一起来创建单个 Javascript 文件：

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]);
  }
}

等。

根据需要添加其他模块文件。它们可以引用词汇变量。

Footer.js-部分

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

})();

最后，您需要一个脚本将所有这些文件连接到一个 js 文件中。没有其他方法可以在纯 Javascript 中获得真正的词法变量访问。

更好的替代方案

也就是说，这种技术很容易造成混乱，我不推荐它。闭包通常用于关闭局部变量，而不是程序范围的变量。如果您使用 1000 行前声明的词法变量，您将花费一些时间来跟踪运行程序时声明所有变量的位置。相反，您可能应该将私有的“全局”数据包含在 globalObject 中。例如，将 mainObjectList 存储在 globalObject.mainObjectList 中，并在模块文件中引用它。

我推荐像 nemophrost 描述的解决方案。每个文件本身都应该是有效的 javascript。

Answer 3

您可以使用命令行 PHP 作为预处理器来合并文件。例如，main.js.php 可能如下所示：

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

然后运行命令 php main.js.php > merged.js 当您想要生成可用于缩小和部署的输出文件时。

这样做的优点是您可以将 main.js.php 加载到服务器上来测试新版本的代码而无需重新编译。您只需在 main.js.php 的开头添加一行即可让 PHP 发送正确的 MIME 类型：

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

Answer 4

我处理这个问题的方法是检查全局对象是否存在，如果不存在则创建它。这样顺序就不重要了。

// 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 */ };