使用 JavaScript 命名空间是否存在任何危险？

Question

创建 JavaScript 命名空间时是否应该注意任何危险/警告？

我们的项目相当庞大，我们正在运行大量 JavaScript 文件（超过 20 个，预计还会更多）。如果不使用命名空间，就不可能实现任何代码可维护性，因此我们像这样实现它们：

var namespace1 = {

  doSomething: function() {
    ...
  },

  doSomethingElse: function() {
    ...
  }

}

然后为了创建层次结构，我们像这样链接它们：

var globalNamespace = {
  functions1: namespace1,
  functions2: namespace2,
  ...

}

这工作正常，但本质上是一个“技巧”，使 JS 表现得像它确实有命名空间。尽管这种方法被广泛使用，但大多数文献似乎都关注如何做到这一点，而不是是否存在任何可能的缺点。随着我们编写越来越多的 JS 代码，它很快就会成为我们系统工作方式中不可或缺的一部分。因此，它的无缝运行非常重要。

在任何情况下，这种“诱导”的命名空间系统是否会导致您出错，或者需要特别注意？我们可以放心地期望所有浏览器都有相同的行为吗？

Answer 1

在示例中定义命名空间的方式似乎是在每个命名空间之外创建全局变量，因此最终会得到这样的结果。

window.namespace1
window.namespace2
window.globalNamespace
window.globalNamespace.namespace1
window.globalNamespace.namespace2

因此，如果您有任何破坏 window.namespace1 的内容，它也会破坏 window.globalNamespace。 namespace1

编辑：

这是我们解决这个问题的方法：

namespacing = {
    init: function(namespace) {
        var spaces = []; 
        namespace.split('.').each(function(space) {
            var curSpace = window,
                i;  

            spaces.push(space);
            for (i = 0; i < spaces.length; i++) {
                if (typeof curSpace[spaces[i]] === 'undefined') {
                    curSpace[spaces[i]] = {}; 
                }   
                curSpace = curSpace[spaces[i]];
            }   
        });
    }
};

然后像这样使用它：

namespacing.init('globalNamespace.namespace1');

globalNamespace.namespace1.doSomething = function() { ... };

这样您就不必引入新的全局变量，并且可以放心地添加到现有命名空间，而不会破坏其他对象 它。

Answer 2

由于您基本上是将函数添加到对象并将这些对象添加到其他对象中，因此我希望每个浏览器都以相同的方式处理此问题。

但如果你想要模块化，为什么不使用像 require.js 这样的（相对）简单的框架呢？这将允许您和您的团队以模块化方式编写代码，并允许团队在需要时“导入”这些模块：

require(["helper/util"], function() {
  //This function is called when scripts/helper/util.js is loaded.
});

Require.js 将处理依赖关系，并且还将防止污染全局命名空间。

Answer 3

我们在工作中使用类似的系统，它的工作效果很好。我不认为有任何缺点；它只是对象和属性。出于同样的原因，跨浏览器兼容性应该很好。您最终可能需要编写一些长名称来解析为特定函数，例如 Foo.Bar.Test.Namespace2.Function，但即便如此，也可以通过预先将其分配给变量来解决。

Answer 4

这就是我建议这样做的方式，这样除了“基本”命名空间之外，您就完全脱离了全局范围。我们在我工作的地方也做了类似的事情。假设您在 Acme co 工作，并希望 ACME 作为您的基本命名空间。

在每个文件的顶部，您将包括：

if (!window.ACME) { window.ACME = {} }

然后您只需根据该文件定义您想要的任何内容即可。

ACME.Foo = {
  bar: function () { console.log("baz"); }
}

如果您想要更深层次的命名空间，只需对每个级别执行相同的操作即可。

if (!window.ACME) { window.ACME = {} }
if (!ACME.Foo) { ACME.Foo = {} }

这样，每个文件都可以独立测试，并且它们将自动设置命名空间基础结构，但是当您将它们编译在一起或同时测试多个文件时，它们不会继续覆盖已经定义的内容。