调用 $(document).ready() 函数的最佳方式

Question

我想知道当 DOM 准备好时调用函数的最佳方式是什么。我的意思是，我知道

$(document).ready(function(){})

和

$(function(){})

以相同的方式执行 DOM 的准备动作。我的问题更多是关于性能的，我通常这样写我的 JS：

$(document).ready(function(){
    console.log('Hello World');
});

但是曾经有一位老师试图让我改变主意，这样写:

function main(){
    console.log('Hello World!');
}
$(document).ready(main);

事实是我从来没有这样做过，但现在我想知道在性能方面最好的方法是什么...如果我将所有内容都放在外部函数中，它加载速度会更快吗？

事实上，我写的是第一种方式，因为我不希望我的函数可以从 DOM 访问，所以我这样做了：

$(document).ready(function(){
    function Hello(){
            console.log('Hello World');
    }
    Hello();
});

这样就无法从 DOM 或控制台使用函数 Hello... 所以我不喜欢我老师的方式。但是现在我习惯于将我所有的代码封装在一个匿名函数中，这样我更愿意这样写：

(function($){
    function Hello(){
        console.log('Hello World!');
    }
    $(document).ready(Hello);
})(jQuery);

这就是为什么我想知道这两种方法之间的性能，你们怎么看？

Answer 1

如果你想在另一个地方定义就绪函数，这真的取决于偏好，性能差异几乎不存在。我个人比较喜欢

$(document).ready(function(){
    //code for ready should be in here
});

因为我不需要在找到ready后跳转到另一个函数

然而，最好的办法是尽可能使用本机 JavaScript，除非您支持超旧浏览器。

document.addEventListener("DOMContentLoaded", function(event) { 
  //do work
});

这和 ready 函数几乎一样，你不需要 jQuery，也比 $(document).ready()

快一点

Answer 2

TL;DR;

随心所欲！对您的网站没有这样的影响。

最好的方法是什么？

总的来说，你可以随心所欲，但有一些事实可以引导我们朝着正确的方向前进，这告诉我们，jQuery(function($) {});是一个很好的选择！

为什么？让我们看看...

事实 1: 这是最短的路。好的，IIFE 可能更短，但这不是真正的 ready 状态，只是一个立即函数调用。

事实 2： 由 jQuery 自己编写就绪状态是首选方式。从 v3 开始提到使用这种方式。

事实 3： 为什么要使用 IIFE 来传递 jQuery 对象？不需要，因为第一个函数参数是 jQuery 对象。

事实 4： 使用和不使用 jQuery noConflict 模式都很好。因为第一个参数是 jQuery 对象，所以在就绪状态下你总是可以使用 $，只需要写一次 jQuery。

事实 5： 你没有使用命名函数，只是一个匿名闭包。在将近 99.99% 的所有情况下，您只使用一次就绪状态处理程序。所以不需要命名函数或存储在变量中的函数。

所以在我看来，这是总体上最好的选择：

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

Answer 3

我知道 ready 无法使用，但我有一些情况想使用它。让我向您展示 eisbehr ... 假设我们有一个函数计算 windows 的宽度和高度，我想在就绪状态下调用它，但也在调整大小状态下调用它......所以如果我理解你的逻辑，我应该使用这个:

jQuery(function($){
    var width;
    var height;
    function init(){
        width = $(window).width();
        height = $(window).height();
    }
    init();
    $(window).resize(init);
});

对吧？好吧，我想我会像现在一样继续:

(function($){
    var width;
    var height;
    function init(){
        width = $(window).width();
        height = $(window).height();
    }
    $(document).ready(init); /* or $(init); */
    $(window).resize(init);
})(jQuery);

顺便说一下，感谢您的回答，您正确回答了这个问题：最好的方法是什么？ 没关系。 随心所欲！对您的网站没有这样的影响。

调用 $(document).ready() 函数的最佳方式

best way to call $(document).ready() function

javascript

jquery

performance

dom

ready

TL;DR;

最好的方法是什么？