javascript - 两种声明 Javascript 命名空间的方式的区别

Question

我通常在我的代码中使用匿名函数方法:

    (function($,NS){

    window[NS] = $.extend((window[NS] || {}), {

        global : 31,

        init : function(){
            var $d = $(document);

            $.on('click', 'a', $.proxy(this.clickHandler, this));
        },

        clickHandler : function(e){
            console.log('etc');
        }

    });

}(jQuery, "AAABBBCCC"));

但是，我最近偶然发现了一种将给定命名空间添加到窗口对象并保护全局命名空间的更简单的方法:

var AAABBBCCC = window.AAABBBCCC || {

    global : 31,

    init : function(){
        var $d = $(document);

        $.on('click', 'a', $.proxy(this.clickHandler, this));
    },

    clickHandler : function(e){
        console.log('etc');
    }

};

我测试了这两种方法，看起来它们都将 AAABBBCCC 对象添加到窗口对象。我看不出有什么不同。

能否请您向我解释一下这两种方法之间的区别，以及它们各自可能的优点/缺点？

Answer 1

在第一个示例中，您使用的是 JavaScript 函数作用域。

例如，它允许您以不同的名称重新声明某些变量 - 例如，在您的代码中，您将 jQuery 声明为 $ - 这样您可以确定名为 $ 的变量实际上是一个 jQuery 对象，而不是其他库(例如 MooTools、Ext.js 等)声明的变量。因此，显式函数作用域的第一个优点是避免变量名冲突。

但还有更多:在第一种情况下，您可以声明只能在“命名空间”函数的上下文中看到的“私有(private)”变量。例如。考虑这个例子:

(function ($) {
    var jQuery = 'hello world';
    var privateVar = 42;
    console.log(jQuery); // hello  world
    console.log($); // jQuery object
})(jQuery);

console.log(jQuery); // jQuery object

第一个 console.log 调用将输出“hello world”字符串，而第二个也是最后一个调用将输出一个原始的 jQuery 对象；所以，基本上，如您所见，您可以在独立范围内使用任何您喜欢的名称，而不会弄乱全局。

并考虑您在独立函数中声明的第二个变量:privateVar - 如果您尝试从函数范围之外获取它的值，您将得到一个 undefined 结果 - 因为该变量仅存在于您的私有(private)“命名空间”的上下文中。

现在尝试不使用包装函数的相同示例:

jQuery.find('body').css('background', 'blue');

var jQuery = 'hello world';
console.log(jQuery); // hello world

jQuery.find('body').css('background', 'red'); // an error occurred here

在这里，虽然第一次调用 jQuery 会将页面主体的背景更改为蓝色，但第二次调用确实会抛出一个错误 - 并且所有后续对 jQuery 的调用都不会工作，只是因为您已经覆盖了全局 jQuery 变量使用您的新值(在本例中为“hello world”字符串)。

有关 JavaScript 范围的更多详细信息，请参阅此问题:What is the scope of variables in JavaScript?

总结一下:如果你不需要私有(private)“命名空间”变量和全局名称的重新定义(比如jQuery到$)，你可以坚持第二个，更直接的命名空间方式。

但隔离内部状态几乎总是更好，因此我建议在一般情况下使用函数范围。