Javascript DOMContentLoaded事件感知内部的自调用函数？

由于我希望我的JS只在加载DOMContentLoaded后运行，所以我这样做：

document.addEventListener('DOMContentLoaded', function() {
    //
});

(function() {
    //
})();

document.addEventListener('DOMContentLoaded', function() {
    // IIFE 1
    (function() {

    })();

   // IIFE 2
   (function() {

   })();

   ...

});

由于我想限制作用域级别，并且通常将代码封装到匿名函数中是一种很好的做法，所以我这样做：

document.addEventListener('DOMContentLoaded', function() {
    //
});

(function() {
    //
})();

document.addEventListener('DOMContentLoaded', function() {
    // IIFE 1
    (function() {

    })();

   // IIFE 2
   (function() {

   })();

   ...

});

那么，这样写代码有意义吗

document.addEventListener('DOMContentLoaded', function() {
    (function() {
        //
    })();
});

---

立即调用的函数表达式的要点是提供名称空间，以避免污染全局范围。由于

document

已经是一个全局变量，因此像您那样将其放在外部是有意义的，这将允许您在相同的

DOMContentLoaded

回调中写入更多IIFE，如下所示：

document.addEventListener('DOMContentLoaded', function() {
    //
});

(function() {
    //
})();

document.addEventListener('DOMContentLoaded', function() {
    // IIFE 1
    (function() {

    })();

   // IIFE 2
   (function() {

   })();

   ...

});

---

谢谢，但是如果我有3-6个脚本文件，它们连接到一个页面，每个脚本文件由DOMContentLoaded回调和回调中的一个iLife组成呢？@fujio如果您将脚本文件保留在

body

的末尾，则不需要

DOMContentLoaded

侦听器。每个文件都将所有代码包装在一个IIFE中。这取决于用例，但ES6块作用域变量声明（

const

和

let

）显著减少了函数内部对IIFE的需求。不，这真的没有意义。它只是不必要地引入了嵌套范围和更多缩进。对于哪些事情，您特别希望“限制作用域级别”以及如何“限制作用域级别”？不，通常“将代码封装到匿名函数中不是一个好的做法”。将需要它的代码指定为自己的范围是一种很好的做法。