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

Question

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

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

和

$(function(){})

是实现 DOM 的 action ready 的相同方式。 我的问题更多是关于性能，我通常这样写我的 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

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 2

我知道 ready 无法使用，但我有一些情况想使用它。让我告诉你 eisbehr ...... 想象一下，我们有一个计算窗口宽度和高度的函数，我想在就绪状态下调用它，但也在调整大小状态下调用它......所以如果我理解你的逻辑，我应该使用这个：

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

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

Answer 3

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

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

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

---

但最好的办法是尽可能使用原生 JavaScript，除非您支持超旧的浏览器。

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

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