Question

在我目前的工作地点，我们有一套关于JavaScript的方法，并且想知道是否有人可以帮助阐明以下存储变量和缓存jQuery对象的方法。

(function($) {

    var APP = {};

    $(function() {

        APP.header = $("#header");
        APP.footer = $("#footer");

    });

})(jQuery);

首先，设置看似全局变量然后将jQuery对象附加到变量的重点是什么？它是否保持清洁，它是否使您的应用程序执行速度更快，或者更容易设置变量而无需去：

var header = $("#header");
var footer = $("#footer");

我理解其他所有事情，但总是想知道为什么这在我们所有的项目JS文件中都很常见？我认为这里有一个名字，我想更好地理解它，特别是如果有一些警告我应该提出我的经理这样做。

Answer 1

这些结构的名称为closure和namespace。闭包是一个维护对其范围之外的变量的引用的函数。

请注意，您现在可以稍后访问APP变量并将其正确更新：

(function($) {
    var APP = {};

    $(function() {
        APP.header = $("#header");
        APP.footer = $("#footer");
    });

    // "APP.header" and "APP.footer" are defined later in the code
})(jQuery);

如果您使用了局部变量，则无法获得效果：

(function($) {
    $(function() {
        var header = $("#header");
        var footer = $("#footer");
    });

    // "header" and "footer" are long gone local variables
})(jQuery);

请注意，您可以使用全局变量（技术上属于window）：

(function($) {
    $(function() {
        header = $("#header");
        footer = $("#footer");
    });

    // "header" and "footer" are accessible global variables
})(jQuery);

但由于多种原因（特别是可能的碰撞和意外定义的变量），这是不好的做法。因此，您可以设置所谓的命名空间 - 像APP这样的变量来保存您需要“类似于全局”的数据。

至于你的情况下这个闭包的具体效用，请注意它被$()包围。这是一种jQuery方式，说“在DOM加载完成后运行此functoin”。在尝试访问$('#header')和$('#footer')之前，必须先完成DOM加载，以确保DOM中实际存在这些项。但由于这是一个回调函数，它将在稍后执行，这就是为什么当它最终被调用时需要一个闭包来维护对APP的引用。

Answer 2

它叫做命名空间。

这样可以保持DOM清洁，其他插件/脚本不会干扰。如果你要创建一个名为header或footer的全局var，另一个插件可能想要使用那个全局var，从而破坏你的代码。

Answer 3

APP似乎是您的公司用来拥有应用程序范围一致表示法而不会混淆全局命名空间的命名空间。

使用变量来存储对Dom-Elements的访问速度比通过jQuery Construct $("...")每次需要访问它们更快<{1}}

Answer 4

除了我的评论之外，对“全球变种”的一些“警告”

本地变量从内存中释放，而全局变量与应用程序的生命周期开放
如果代码在函数内或在另一个范围内并引用该变量，则引擎必须放慢速度以退回到它的全局范围，从而导致“滞后”
鲜为人知的事实，全局范围与窗口对象共享!!!这意味着发动机找到它们甚至更长，因此另一个负减速点

您在本JavaScript代码中使用的方法是什么？

4 个答案: