我应该使用 IIFE 还是 window onload 来初始化？答案

【问题标题】：Should I use IIFE or window onload to initialize?我应该使用 IIFE 还是 window onload 来初始化？
【发布时间】：2014-04-27 13:09:44
【问题描述】：

以下代码 sn-ps 都有效：

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

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

【问题讨论】：

是 window.addEventListener('load', initialize, false); -> 将在加载的 dom 内容上执行。
并非如此，它会在所有资源加载完毕后调用初始化，使用 3rd 方的东西差异可能很大。
这完全取决于您是否打算在实际添加元素之前或之后运行它。如果您确定它们存在 - 使用 IIFE。
@LShetty 哎呀，修正了错字。

标签： javascript dom-events iife

【解决方案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>s 加载后执行。

请注意，实际上，<script>s 上的 async 和 defer 等属性会更复杂，.这就是为什么有大量可用的资源加载器的原因。

【讨论】：

知道了。我想时间问题比这里的性能更重要。看起来，window.onload 在这方面提供了更多的灵活性。你同意吗？
如果你确实想防止全局范围的污染并推迟执行直到 DOM 被加载怎么办？听起来您既需要使用 IIFE 又需要监听 DOMContentLoad（并将后者包装在前者中，是吗？）。
不，在这种情况下您不需要 IIFE。您只需要绑定到 DOMContentLoad 事件的函数。 JavaScript 具有函数作用域，如果您不想，函数内部的任何内容都不会泄漏。

【解决方案2】：

可能每种方法的结果很重要，而不是性能。第一种方法立即运行，而第二种方法等待 dom 准备好。最终结果是，在您的第一种方法中，您可能最终会得到未定义的 textInput 和 textResult，除非您将脚本放在页面底部。

【讨论】：

不“等同于 jQuery.ready(”，但等同于 $(window).load()
除非 mallgi01 将他的代码移到页面底部！

【解决方案3】：

script 元素（无论是内联还是外部加载）中的 IIFE 就在关闭 body 元素之前当然看起来最聪明。把普通人搞糊涂了。

document.addEventListener('DOMContentLoaded', function() ... 很容易理解。这几乎是简单的英语：事件监听加载的 DOM 内容。所以，噗，陛下没了。请注意，这与 window onload 不同。

我使用事件侦听器，因为它遵循 KISS principle，它是一个专门构建的工具，它会按照它所说的去做（其中可能包括我什至没有考虑过的东西/功能）。

【讨论】：