如何最好地说“在文档准备好时执行此代码”？答案

【问题标题】：How best to say "execute this code on document ready"?如何最好地说“在文档准备好时执行此代码”？
【发布时间】：2013-12-26 02:29:46
【问题描述】：

当我第一次学习 JavaScript 时，我养成了一种习惯，即在页面加载到这样的结构中时包装我想要执行的任何脚本：

$(function() {
    //code
});

从那以后学到了更多，我的印象是我可以很容易地折腾 jQuery 并编写：

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

这两种方法的最终结果是否相同？一个更可取吗？我完全误解了一个或两个？ “在准备好文档时执行”的标准最佳做法是什么？

【问题讨论】：

【解决方案1】：

它们根本不是一回事。第一个是document.ready 事件，通常如下所示：

$(document).ready(fn);

但是 jQuery 允许你使用快捷方式：

$(fn);

第二个代码是 IIFE（立即调用函数表达式），它所做的只是创建一个闭包，因此您不会将变量暴露给全局范围，然后立即执行。

当您使用 jQuery 时，将所有代码放在就绪事件中是一种很好的做法，顺便说一句，您也创建了一个闭包，因此其中的所有内容也是“私有的”。但是，如果您在关闭 body 标记之前添加代码，则不需要准备事件。您可以使用任意数量的 IIFE，但通常只使用一个 ready 事件，因为该事件只运行一次。

总之，document.ready 在事件发生时触发。 IIFE 让您可以封装代码。

【讨论】：

【解决方案2】：

第一个等待文档准备好，所以如果您将代码放在文档的head 中，请使用它。

如果您将所有 JavaScript 放在页面底部 (which you should anyhow be doing)，请使用第二种方法 (IIFE)。

将 jQuery 传递给该函数也是一个很好的做法：

(function ($) {
    // code
}(jQuery));

...这样万一另一个库覆盖了全局 $ 变量，您仍然可以在 IIFE 中安全地使用它。

【讨论】：