自执行匿名函数和闭包

Self-executing anonymous functions and closures

本文关键字：闭包 函数 执行      更新时间：2023-09-26

信息

我正在尝试建立一个网站，在那里我可以包括某些文件，并使用不同的方法附加到我的全局变量，这些方法只会很容易地添加到对象中。这意味着我只需要包括文件，这个页面现在就可以访问hutter对象中的所有内容。

堆芯挡板.js

var hutber = {};
(function ($) {
    "use strict"; //For good development standards :)
    hutber.init = function(){
    };
    hutber.init();
})(jQuery);

额外位hubber.form.js

(function ($) {
    "use strict"; //For good development standards :)
    hutber.form = {
    }
});

问题

我知道hutber将无法访问hutber.form，因为它在闭包中。那么，如果不将这些从自执行函数中删除，我如何才能使hutber访问hutber.form？还是这完全是错误的做法？

不，它将可以访问hutber.form，因为hutber是全局的，但问题是时间。

如果init((在执行hutber.form函数之前运行，它将不存在。init不能运行到所有"加载项"都已加载。

附带说明：您的第二个不会运行，因为它没有(jQuery);。

(function ($) {
    "use strict"; //For good development standards :)
    hutber.form = {
    }
});  <-- missing  (jQuery); so it is not going to do anything

运行一个小演示，看看会发生什么。

var myObj = {};
(function(){
    myObj.init = function(){
        alert("init");
        try{ //will fail since bar has not loaded yet
        myObj.bar();
        } catch(e){ alert("failed calling bar"); }
    };
    //call init before bar is loaded
    myObj.init();
})();

(function(){
    myObj.bar = function(){
        alert("bar");
    };
})();
//call init after bar has been loaded
myObj.init();

jsFiddle的上述代码

当你运行这个程序时，你会看到init在第一次被调用时会失败，因为bar并没有被加载。这是添加该方法后的第二次。因此，如果init依赖于加载的"模块"，则需要知道它们何时加载，以便调用init方法。

我想你想要这个：

<script src="hutber.js"></script>
<script src="hutber.form.js"></script>
<script> hutber.init(); </script>

鉴于您如何将hutber定义为全局变量，"form"属性肯定可以在任何立即调用的函数表达式中访问。

您可能有错误的看法。

并不是说立即调用的函数是构建功能的错误方式。。。

然而，我想说的是，你有一个全局可用的对象，你直接从你的函数中引用它。。。

在分配了hutber.form = {};之后，全局范围内的所有事物都可以完全访问hutber.form，因为hutber是全局可访问的。

这真的不会有什么不同，如果你去像：

//form.js
hutber = hutber || {};
hutber.form = { /* ... */ };

在公共访问hutber.form。

闭包涵盖了您没有返回的内容，以及您没有分配给外部范围中的对象/数组/变量的内容。

因此，如果闭包中有var mySecretIdentity = "Jerry O'Connell";，那么只有hutber.form中的方法才能访问mySecretItentity。。。

但同样，你也可以通过做一些类似的事情来实现：

// form.js
hutber = hutber || {};
hutber.form = (function () {
    var mySecretIdentity = "Jerry O'Connell";
    return {
        submit : function () {},
        clear  : function () {},
        validate : function () {}
    };
}());

现在，任何私有的东西都只能由写在闭包内部的函数直接访问。

因此，再次归结为："你想解决什么问题？">

正如@Sime Vidas所提到的，<script>标记顺序很重要。

执行以下顺序：

<script src="hutber.js"></script>
<script src="hutber.form.js"></script>

我在jsFiddle中修改了脚本。你会注意到，我喜欢使用window.variable来显式显示全局变量。如果你想要的话，我会立即启动核心hutter.js文件中的init函数。

//core hutber.js 
window.hutber = {}; // Explicit Global Variable
(function ($) {
    "use strict"; //For good development standards :)
    window.hutber.init = function(){
      alert('init fired');  
    };
    window.hutber.init(); // You can fire this anywhere since you set it on a global variable...
})(jQuery);
//Extra bits hutber.form.js
(function ($) {
    "use strict"; //For good development standards :)
    window.hutber.form = {prop: "hello im a form"}
    alert('window.hutber.form is now' + window.hutber.form.prop);
})(jQuery);
相关文章：