使用对象和自执行匿名函数的 jQuery 命名空间

Question

我正在考虑使用对象和自执行匿名函数创建命名空间。哪一个被认为是更好的选择？

使用对象，给出唯一名称“myAppName”是否足以防止冲突？

var myAppName = { 
    val1: "abc", 
    val2: "xyz",
    myFunc1: function() {
      return this.val2;  
    }
}

console.log(myAppName.val1);  // abc
console.log(myAppName.myFunc1());  // xyz

使用自执行匿名函数:

(function () {
val1 = "abc";
    var val2 = "xyz";

    myFunc1 = function() {
        return val1;   
    }

    var myFunc2 = function() {
        return val2;
    }
})();

console.log(val1);  // abc
console.log(myFunc1());  // abc
console.log(myFunc2());  // xyz

在上面的自执行函数代码中，它们似乎都执行了。变量名和函数名前使用var和不使用var有什么意义吗？我不太明白。有没有办法将变量和函数设为私有(private)和公共(public)？或者自执行函数内的所有内容都是私有(private)的？

如果我在自执行函数之前使用“var”，会发生什么情况，如下所示？

var myAppName = (function () {
val1 = "abc";
    var val2 = "xyz";

    myFunc1 = function() {
        return val1;   
    }

    var myFunc2 = function() {
        return val2;
    }
})();

Answer 1

我的第一个答案试图解决您最初的问题并展示如何设置命名空间。我没有添加到该答案，而是决定添加第二个答案来解决您对我的第一个答案的评论中的问题。

全局变量实际上是window对象的属性。如果您在函数外部使用 var，则您正在定义一个全局变量。如果您在函数内使用var，则您正在定义一个局部变量。如果引用变量 someValue 而不用 var 声明它，则与引用 window.someValue 相同。

以下代码显示了设置全局变量的不同方法以及定义局部变量的一种方法。

window.global1 = 'abc';
global2 = 'def';
var global3 = "ghi";

(function() {
    window.global4 = 'jkl';
    global5 = 'mno';
    var local1 = 'xyz';
})();

console.log(global1); // 'abc'
console.log(global2); // 'def'
console.log(global3); // 'ghi'
console.log(global4); // 'jkl'
console.log(global5); // 'mno'
console.log(local1);  // ReferenceError: local1 is not defined

一般来说，您希望限制设置全局变量(至少在创建 JavaScript 库时)。命名空间基本上只是一个全局变量。当您将其他所有内容放置在该命名空间下时，您仅添加了一个全局变量。

我认为避免设置上面的 global2 和 global5 等全局变量也是一种最佳实践。相反，您应该使用函数的 var oustide(例如 global3)或在 window 对象上设置属性(例如 global1 和 global4)。

借用我的其他答案中的代码示例，我们可以创建一个像这样的命名空间:

var myApp = (function() {
    var privateValue = 'abc'; // Don't forget "var" here.

    function privateFunction() {
        return privateValue;
    }

    return {
        publicValue: 'xyz',

        publicFunction: function() {
            return privateFunction();
        }
    }
})();

我们可以通过执行以下操作来实现相同的目标，但我认为这种风格很糟糕:

(function() {
    var privateValue = 'abc'; // Don't forget "var" here.

    function privateFunction() {
        return privateValue;
    }

    myApp = {
        publicValue: 'xyz',

        publicFunction: function() {
            return privateFunction();
        }
    }
})();

在这两种情况下，我们都设置了 myApp 全局变量，但我认为前者比后者更清晰。

需要明确的是，在这两种情况下，我们都会将公共(public)变量寻址为 myApp.publicValue 并使用 myApp.publicFunction() 调用公共(public)函数，并且在外部我们无法引用 privateValue 或 privateFunction 的匿名函数。