两种声明 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"));

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

var AAABBBCCC = window.AAABBBCCC || {

    global : 31,

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

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

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

};

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

能否请您向我解释一下这两种方法之间的区别，以及每种方法可能 advantages/disadvantages？

Answer 1

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

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

但还有更多：在第一种情况下，您可以声明 "private" 变量，这些变量只能在 "namespace" 函数的上下文中看到。例如。考虑这个例子：

(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结果 - 因为该变量仅存在于您的私有 "namespace".

的上下文中

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

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?

总结一下：如果你不需要私有"namespace"变量和全局名称的重新定义（比如jQuery到$），你可以坚持一秒钟，更多命名空间的直接方式。

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

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

Difference between two ways of declaring Javascript namespaces

javascript

jquery

javascript-namespaces