JavaScript IIFE

Question

我承认我在 JavaScript 方面还很幼稚，而且每次我认为我得到它的时候，一些奇怪的曲线球都会让我立刻发疯，这并没有帮助。

我有一个类似这样的 js 文件：

(function (myiife, $) {

    var myArrayOfThings = [];    

    myiife.myFunction = function (id) {
        var cachedThing = myiife.getFromArray(id);
        if (cachedThing === null) {
            // get from server
        } else {
            // do something with cached item
        }
    };

    myiife.getFromArray = function (idToFind) {
        for (var i = 0, len = myArrayOfThings; i < len; i++) {
            if (myArrayOfThings[i].Id=== idToFind) {
                return myArrayOfThings[i]; // Return as soon as the object is found
            }
        }
        return null;
    };

}(window.myiife= window.myiife|| {}, jQuery));

真正让我困惑的是期望能够调用事物的正确方法。我想我真的不明白事情的范围，我很难说实话。

如果我想从页面调用 myFunction，它是否应该看起来像这样？

onclick="myiife.myFunction(1)"

我已经阅读了有关范围的内容，但显然我仍然缺少对这一切的理解非常基本的东西。

从我看到的示例中，我没有看到其他似乎必须在函数名称前加上 iife 名称才能从页面执行操作的示例。

任何好的推荐读物也将不胜感激。

Answer 1

Javascript 中的全局范围（至少在浏览器中）是window。所以你所做的就是将myiife 附加到窗口并且myiffe 有一个名为myFunction 的函数。因此，如果您想从全局范围（即window）调用它，那么您当然需要指定myiffe.myFunction()。

你可能看到其他人做的事情是这样的：

var myFunction = (function() {
    var counter = 0;
    return function() {
        counter++;
        console.log(counter);
    };
})()

他们有 IIFE 的地方会返回一些东西（在这种情况下是一个函数，在许多其他情况下人们会返回一个对象）。在这种情况下，由于myFunction 是一个全局变量，他们可以只用myFunction() 调用它。他们通过 IIFE 取得的成果基本上是使 counter 变量私有。只有 IIFE 内的东西可以访问它。

当然，如果你没有在 IIFE 内部定义myFunction，那么它只是一个全局范围内的函数，可以直接从全局范围内调用。

 function myFunction() {
     // do something
 }

 myFunction();

但是对于您在事件处理程序中使用它的问题 - 更好的做法是首先不要将事件处理程序内联到您的 HTML 中，而是将其绑定到代码中。这为您提供了更大的灵活性、更清晰的分离和更易于维护的代码。