JavaScript IIFE [英] JavaScript IIFE

问题描述

我承认我对 JavaScript 很陌生，但每次我认为我得到它时，一些奇怪的曲线球让我立刻离开，这无济于事.

I'll admit I'm pretty green when it comes to JavaScript and it doesn't help that every time I think I'm getting it some weird curve ball throws me right off.

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

I've got a js file something like this:

(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));

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

What really confuses me is the proper way to expect to be able to call things. I guess I really don't understand the scope of things yet and I'm struggling to be honest.

如果我想从页面调用 myFunction ，它是否必须看起来像这样?

Is it expected that if I want to call myFunction from the page it would HAVE to look like this?

onclick="myiife.myFunction(1)"

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

I've read stuff on scope but I'm obviously still missing something very fundamental in my understanding of it all.

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

From the examples I've seen I don't see others that seem to have to prefix function names with the iife name in order to execute things from the page.

任何好的推荐阅读也将不胜感激.

Any good recommended reading would be appreciated as well.

推荐答案

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

The global scope in Javascript (in a browser at least) is window. So what you've done is you've attached myiife to window and myiffe has a function called myFunction. So if you want to call it from the global scope (i.e. window) then, of course, you need to specify myiffe.myFunction().

你可能见过其他人做的事情是这样的:

What you may have seen other people do is something like this:

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

他们有一个 IIFE 返回一些东西(在这种情况下是一个函数，在许多其他情况下人们会返回一个对象).在这种情况下，由于 myFunction 是一个全局变量，他们可以只用 myFunction() 调用它.他们通过 IIFE 实现的基本上是将 counter 变量设为私有.只有 IIFE 内部的东西才能访问它.

Where they have an IIFE return something (in this case a function, in many other case people will return an object). In this case, since myFunction is a global variable, they can call it with just myFunction(). What they have achieved with the IIFE is to basically make the counter variable private. Only things inside the IIFE have access to it.

当然，如果你不在一个IIFE里面定义myFunction，那么它就只是一个全局范围内的函数，可以直接从全局范围内调用.

Of course, if you don't define myFunction inside of an IIFE, then it will just be a function in the global scope and can be called directly from the global scope.

 function myFunction() {
     // do something
 }

 myFunction();

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

But to your question on using this in an event handler - better practice would be to not inline your event handler in your HTML in the first place and instead bind it in code. This gives you more flexibility, cleaner separation and more maintainable code.

这篇关于JavaScript IIFE的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！