Question

上次我使用JS构建了一个大型应用程序我使用了require.js - 这很棒，但可能是一个很大的开销，特别是如果你不想异步加载文件，所以这次我要去没有它。

这次我用纯粹的JS写作，用Grunt连接和缩小所有内容（我在这里是一个Grunt n00b）。因为我将所有函数保存在单独的文件中，所以如果我使用单个文件，我无法将所有内容都包装在一个闭包中。将所有函数保留在全局命名空间之外的最佳解决方案是什么？

我不确定我是否需要完整的依赖关系管理解决方案，但如果它轻巧简单，我会考虑一个。

Answer 1

如果你想在没有任何依赖管理工具的情况下这样做，你可以使用Revealing Module Pattern和命名空间，简化示例：

热门/申请文件

window.SomeApplication = (function () {
    // Add functions you want to expose to this
    this.require= function (path) { // Creates namespace if not already existing, otherwise returns reference to lowest level object in path
        var current = window,
                i;

        path = path.split('.');
        for (i = 0; i < path.length; ++i) {
            if (!current[path[i]]) {
                current[path[i]] = {};
            }
            current = current[path[i]];
        }

        return current;
    };

    return this;
})();

其他一些文件

SomeApplication.require('SomeApplication.SomeSubNamespace').SomeModule = (function () {
    // Module code

    return this;
})();

然后使用你的grunt concat并首先指定顶级文件。这样，您只会在窗口对象上显示一个项目，并且可以通过window.SomeApplication.SomeSubNamespace.SomeModule访问您的模块。

Answer 2

有许多常用且易于使用的JavaScript工具，用于通过实现CommonJS（require.js使用的规范）或ES2015 module specification来管理应用程序范围的依赖关系，包括（如Benjamin所建议的）{ {3}}，Webpack和Browserify。

使用多个文件时，如何将函数保留在全局命名空间之外？

2 个答案: