Question

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

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

从那时起我学到了更多东西，我的印象是我可以轻松地扔掉jQuery并写下来：

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

这两种方法在最终结果中是否相同？是一个更好的？我完全弄错了其中一个或两个？ “执行文档就绪”的标准最佳实践是什么？

Answer 1

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

$(document).ready(fn);

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

$(fn);

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

当你使用jQuery时，把你所有的代码放在一个准备好的事件中是很好的做法，顺便说一下你也创建了一个闭包，所以那里的所有东西都是“私有的”。但是，如果在结束body标记之前添加代码，则不需要ready事件。您可以根据需要使用尽可能多的IIFE，但通常只使用一个就绪事件，因为事件只运行一次。

总之，document.ready会在事件发生时触发。 IIFE允许您封装代码。

Answer 2

第一个等待文档准备就绪，因此如果您将代码放在文档的head中，请使用它。

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

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

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

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