11

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

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

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

4

3 回答 3

12

这取决于您希望代码何时运行。如果您希望代码尽快执行，您可以使用 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 和s 后执行非常简单。<script>

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

于 2014-03-20T15:37:09.070 回答
1

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

于 2014-03-20T15:15:24.053 回答
1

元素中的 IIFE script（无论是内联的还是外部加载的）就在关闭body元素之前肯定显得最聪明。它把普通人搞糊涂了。

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

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

于 2017-01-12T02:03:29.617 回答