javascript - 我应该使用 IIFE 还是 window onload 来初始化？

Question

以下两个代码片段都有效:

在js文件中使用IIFE:

(function initialize() {
  txtInput = document.getElementById('txtInput');
  txtResult = document.getElementById('txtResult');

  txtInput.value = "0";
  txtResult.value = "0";

}());

在 html 文件中的窗口加载事件上调用 initialize():

window.addEventListener('load', initialize, false);

是一种比另一种更好的方法吗？在性能方面还是其他方面？就目前而言，我更倾向于向窗口对象添加事件监听器，因为它更具可读性。

Answer 1

这取决于您希望代码何时运行。如果您希望代码尽快执行，您可以使用 IIFE，但如果您不使用 IIFE 来保护您的变量和/或不污染全局范围，那么使用 IIFE 真的毫无意义。

(function initialize() {
    // do somthing
}());

或

// do somthing

将在同一时间点执行。

如果您想延迟执行，Web 开发人员通常使用三个时间点。 <script> s 在底部，DOMContentLoad 和 window.onload。

• <script>底部的 s 将在从服务器获取后执行。
• DOMContentLoaded基本上尽快执行 </html>已被 HTML 解析器读取。
• 非常简单window.onload在所有 CSS，<img> 之后执行es 和 <script>已加载。

请注意，在现实中，像 async 这样的属性和 defer在 <script> s，这个比较复杂，。这就是为什么有大量资源加载器可用的原因。