TL; DR;

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

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

我知道准备就绪无法使用但我有一些情况我想用它..让我告诉你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()

快一点

调用$（document）.ready（）函数的最佳方法

3 个答案:

TL; DR;

最好的方法是什么？