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

Question

上次我使用 JS 构建大型应用程序时使用了 require.js - 这很好，但开销很大，特别是如果您不想异步加载文件，所以这次我不带它去。

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

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

Answer 1

有许多常见且易于使用的 JavaScript 工具可通过实现 CommonJS（require.js 使用的规范）或 ES2015 module specification, including (as Benjamin suggested) Webpack, Browserify, and Rollup 来管理应用程序范围的依赖关系.

Answer 2

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

Top/Application 文件

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 对象上公开一个项目，你的模块将可以通过 window.SomeApplication.SomeSubNamespace.SomeModule.

访问

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

How do I keep functions out of the global namespace when using multiple files?

javascript

namespaces

gruntjs