Question

以下两个代码段均有效：

在js文件中使用IIFE：

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

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

}());

在html文件中调用window load事件的初始化（）：

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

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

Answer 1

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

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

或

// do somthing

将在同一时间点执行。

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

<script>将在从服务器获取后执行。

DOMContentLoaded

</html>就会基本执行。
非常简化的window.onload在所有CSS加载后执行，<img> es和<script>已加载。

请注意，实际上，async上的defer和<script>等属性更为复杂，。这就是为什么有大量的资源装载机可用。

Answer 2

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

Answer 3

在结束script元素之前的body元素中的IIFE（无论是内联还是外部加载）当然看起来最聪明。它让平民感到困惑。

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

我使用事件监听器，因为它遵循KISS principle，它是一个专门构建的工具，它完成它所说的（它可能包括我甚至没有考虑过的东西/功能）。< / p>

我应该使用IIFE或窗口onload来初始化吗？

3 个答案: