javascript - 事件监听器是否需要位于 IIFE 内部？

Question

这个问题已经有答案了:

Benefit of Immediately-invoked function expression (IIFE) over a normal function (1 个回答)

已关闭 3 年前。

我经常看到很多事件监听器代码都包裹在IIFE (function(e){}()) 里面我觉得没有必要将事件监听器保留在 IIFE 中。例如:

没有 IIFE

jQuery(window).on("load", function(){
    console.log("inside plain load");
});

使用 IIFE

(function(){
    jQuery(window).on("load", function(){
        console.log("inside wrapped load");
    });
}())

如果我们将上述代码一起包含在一个 js 文件中，则在加载事件时它们仅根据编写的顺序执行。

我知道 IIFE 会调用自身，但是在其中设置事件监听器有什么用呢？无论如何，只有当事件发生时它才会触发。

• 是否需要将事件监听器封装在 IIFE 中？
• IIFE 内的事件监听器真的是一个好的做法吗？

Answer 1

对于你的例子来说没有区别。

使用 IIFE 的主要原因是为了防止全局范围内的变量泄漏。

(function(){
    let notLeakedVariable = 'something'
    jQuery(window).on("load", function(){
        console.log("inside wrapped load");
        console.log(notLeakedVariable)
    });
}())

如果没有 IIFE，您将在全局范围内泄漏变量。

通过包装监听器，您甚至可以对多个监听器进行分组，并且它们将通过闭包共享相同的范围。

(function(){
    let sharedVariable = 'something'
    jQuery(window).on("load", function(){
        console.log("inside wrapped load");
        // sharedVariable is accessible 
    });

    jQuery(selector).on("click", function(){
        // sharedVariable is accessible 
    });
}())