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

Question

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

问题是，其中一些文件中包含函数 xyz() {}。因此，用 if (false) { function xyz() {} } 包装它们会导致不好的事情发生。

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

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

问题就变成 Chrome 会看到 foo() 并将其放置在全局范围 即使 includeFile 为 false。

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

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

我希望我可以嵌套函数并将 window 作为作用域传递，但是 在 jsFiddle 上尝试过，但似乎不起作用。

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

foo();

有一些类似 问题。但是，没有人解决与我相同的情况。谢谢。

Answer 1

您是否考虑过使用像 require.js 这样的库？有几个库可以以更优雅的方式为您完成此操作。

如果您不需要依赖项加载库，但正在使用 jQuery 或某些类似的库，则可以使用 AJAX 请求有条件地加载脚本（在 jQuery 中，您可以使用 script dataType ）。这比简单的 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 作为参数传递给匿名函数，但如果您要多次引用它，这并不是一个坏主意（这会加快引用速度并允许用于代码压缩期间的变量名修改）。