嵌套函数可以放在 Javascript 的全局范围内吗？

Question

我有一种情况，我试图将几个 Javascript 文件合并为一个，并有条件地应用它们。我不想修改实际文件。有没有办法可以包装这些文件并按需调用它们？

问题是，其中一些文件中包含函数 xyz() {}。所以，用 if (false) { function xyz() {} } 包装它们会导致坏事发生。

例如，如果这是我的代码...

if (includeFile) {
    /* The file */
    function foo() {}
    /* The file */
}

问题在于 Chrome 会看到 foo() 并将其放在全局范围内 even if includeFile is false。

简单的解决方案是将其修改为 var foo = function() {} 但我无法修改这些文件。

我也普遍担心在这些函数上运行 eval()，因为它们相当大。 （想想 jQuery 包装在一个函数中。如果这不是问题，那么也许 eval 就是答案？）

我希望我可以嵌套函数并将窗口作为范围传递，但是tried it on jsFiddle and it didn't seem to work。

(function() {
    function foo() {
        alert('it works');
    }
}).apply(window, []);

foo();

有几个similarquestions。但是，没有人解决与我相同的情况。谢谢。

Answer 1

您是否考虑过使用像 require.js 这样的库？有几个库可以以更优雅的方式为您做到这一点。

如果您不想要依赖加载库，但您使用的是 jQuery 或其他类似库，则可以使用 AJAX 请求有条件地加载脚本（在 jQuery 中，您将使用 script 数据类型）。这比简单的eval() 好得多，但是当您尝试管理一系列依赖项时，它的健壮性会降低。

如果您想简单地连接所有内容，这里的另一个选项是将每个文件包装在一个匿名函数中，然后将必要的元素分配给 window 对象，将它们放在全局范围内：

(function(window) {

    /* file 1 here */
    function xyz() {
        // etc ...
    }
    /* end file 1 */

    // now selectively choose what you want to be
    // in the global scope
    window.xyz = xyz;

}(window));

xyz();

但是，这需要您做更多的工作来确定您希望在全球范围内可用的内容。请注意，有必要将 window 作为参数传递给匿名函数，但如果您要多次引用它并不是一个坏主意（这会加快引用速度并允许变量名修改在代码压缩期间）。