“泄漏”是什么意思？进入全球范围？

Question

不久前，我提供了一个 JavaScript 设计模式（模块模式 - 见下文），这是我从 John Resig 示例中获得的 某人问题的解决方案的一部分，我收到了以下评论：

“……这个模式有点结束了 设计的但不是那么好。仍然 泄漏到全球范围。和你的 不向异步加载器开放。 但这比临时的要好 编码！”

所以...

如果“泄漏”到全局范围意味着“您的对象被附加到浏览器窗口（对象）”...那么所有内容都已经被附加（全局）：

这个“泄漏”进入全局范围：

window.jQuery

…只需调用：window.jQuery 即可解析为 function()；

这个“泄漏”到全局范围：

function HelloWorld() { alert(‘Howdy’); }

...只需调用：window.HelloWorld()，您就会得到“Howdy”。

此“泄漏”到全局范围：

var myVariable = 10;

...只需调用：window.myVariable，您将得到 10

如果评论者是正确的，则上述所有内容都“泄漏”进入全球范围。因此，就我个人而言，我认为没有办法不“泄漏”到全局范围，因为即使您的表单控件也存在于其中（也）。

因此，这是我的问题......

• “泄漏”是什么意思 全球范围？
• 为什么这么糟糕？
• 你如何避免它？
• 当想要创建持久化的时候 自定义对象，为什么是Module 图案（下）不好？
• 设计模式让你封装 复杂的逻辑，是封装 突然变坏只是因为我们 用 JavaScript 编写？
• 或者……这个评论者根本就是错的吗？

这是我上面提到的模块模式：

<script type="text/javascript">
    var myNamespace = (function($) {
        var publicInstances = {};

        // ***********************
        // myObject
        publicInstances.myObject = myObject;
        function myObject() {

            /// <summary>A pointer to this</summary>
            var self = this;

            this.someProperty = new String();

            this.initialize = function() {
                /// your code here
            }
            this.someMethod = function() {
                /// your code here
            }

            self.initialize();
        }

        return publicInstances;
    })(jQuery);


    jQuery(document).ready(function() {
        // Use would look like
        var myInstance = new myNamespace.myObject();
    });
</script>

---

UPDATED:
I’m satisfied with the answers below and want to thank everyone for taking the time to comment.

回顾以下答案：
当局部作用域中使用的某些东西无意中可供全局作用域使用时（例如，窗口对象），就会发生“泄漏”到全局作用域中。这很糟糕，因为它会打开页面，导致潜在的命名冲突，从而可能导致变量解析为意外的值或类型。

故意将变量设置为全局变量不被视为“泄漏”。然而，需要正确地为对象命名空间，以减少所述命名冲突的可能性。

您无法避免全局范围的变量，但您可以通过使用 RequireJS 或 Curl。

Answer 1

“泄漏”到全局范围是指本地范围中使用的某些内容无意中可供全局范围使用。这意味着分配给当前范围内尚未定义的变量：

function myFunction() {
    a=1;
}

myFunction();
alert(a);
//-> 1

这很糟糕，因为可能存在命名冲突，导致变量具有与预期不同的值/类型。当您忘记对 for 语句中使用的变量使用 var 关键字时，还可能导致旧版 Internet Explorer 中出现错误。

我不会将故意将变量设置为全局变量归类为“泄漏”，因为这更像是您将其“倒入”全局范围。然而，这仍然经常被一些人认为是不好的做法（尽管我认为这有点夸张），因为与 window 对象的当前属性或其他脚本和库设置的变量仍然存在潜在的命名冲突。

Answer 2

[[短篇故事]]

不要创建全局变量并使用异步模块加载器，例如 requirejs 或 curl

[[长篇故事]]

该评论的结构很差。

模块系统没有任何问题。我根本就抱怨使用全局变量。 （我仍然认为完整的通用模块模式是臃肿的）。

是否应该避免所有全局变量是一个不同的问题，我认为这是风格问题。您可以使用异步加载器来传递模块，也可以使用 window 来传递模块。

• “泄漏”到全球范围是什么意思？

我的意思是你创建全局变量。最小化全局变量的使用是一种模式。在函数式编程中，全局变量可以为零，但这与使用全局模块是不同的模式。

• 为什么这么糟糕？

全局存在任何状态都可能导致该状态被破坏。

• 你如何避免它？

你不能。不过，您可以最大限度地减少全局变量的数量。为了完全避免全局状态，您可以使用异步加载器。它们为您定义了一些随后可以使用的全局变量。

• 当想要创建持久的自定义对象时，为什么模块模式（如下）不好？

模块模式没有任何问题。问题是全局存储您的模块。问题在于全局命名空间。

• 设计模式可以让你封装复杂的逻辑，仅仅因为我们用 JavaScript 编写，封装就突然变得很糟糕吗？

现在我已经弄清楚了评论的意图，这个问题并不真正相关

• ，或者......这个评论者根本就是错误的吗？

该评论充其量是措辞不佳。我反对全局名称空间而不是模块，但没有正确说明这一点。

另一种方法是使用异步加载器并定义模块。这些可以缩小到两个全局变量。 定义和require。

require = function(moduleName,callback)

这将获取一个模块，然后将其返回给您。

define = function(obj)

这定义了一个模块。

这里的概念是多文件代码如下：

// main.js
require([
  "foo.js",
  "bar.js",
  ...,
], function(foo, bar, ...) {
   // do stuff
}); 

//foo.js

(function() {
    var namespace = modulePatternCode;
    ...
    define(namespace):
})();

//bar.js 

(function() {
    var namespace = modulePatternCode;
    ...
    define(namespace):
})();

Answer 3

您的模块仅“泄漏”它的名称空间持有者，因此这是相当可以接受的。

Answer 4

使用 RequireJS 的加载器示例：

在 utils.js 中定义实用程序模块：

define(function () {
    return {
        each: function (iterable, callback) {
            // ...
        },
        map: function (iterable, mapper) {
            // ...
        }
    };
});

在另一个模块（例如 math.js）中使用上述模块：

define([ "utils" ], function (utils) {
    return {
        sum: function (numbers) {
            var sum = 0;

            utils.each(numbers, function (n) {
                sum += n;
            });

            return sum;
        },
        average: function (numbers) {
            return this.sum(numbers) / numbers.length;
        }
    };
});

您可以在另一个文件中使用 math.js，例如 main.js：

console.log("About to add 1-3");

require([ "math" ], function (math) {
    console.log(math.sum([ 1, 2, 3 ]));
});

您仍然可以拥有命名空间，并仍然让它们在模块内保持温暖和舒适：

namespace.js：

define([ "foo", "bar", "moo" ] function (foo, bar, moo) {
    return {
        foo: foo,
        bar: bar,
        moo: moo
    };
});

然后其余模块可以在定义期间使用此命名空间：

define([ "namespace" ], function (namespace) {
    namespace.foo(42);
});

或者在运行时，在其他一些模块中：

define(function () {
    return {
        initialize: function () {
            require([ "namespace" ], function (namespace) {
                namespace.foo(42);
            });
        }
    };
});

在用法中上面，除了 define 和 require 之外，没有其他内容是全局的。当然，这些只是说明性示例，因为在 RequireJS 中定义/使用模块有许多不同的风格。