jquery - 我有多少个 $(document).ready() 有什么区别吗？

Question

我了解 jQuery，我只是想问，这两个代码示例之间有什么区别(我知道，它会做同样的事情，但我很好奇，第二个示例是否有特定的内容。

示例 1:

$(document).ready(function() {
    // some code #1
    // some code #2
    // some code #3
});

这里将所有 JS 集中在一处。

示例 2:

$(document).ready(function() {
    // some code #1
});

$(document).ready(function() {
    // some code #2
});

$(document).ready(function() {
    // some code #3
});

这些函数(DOM 就绪)放置在不同的 JS 文件中。

我只是在想，它将如何处理，但我猜它会在DOM加载之后执行，然后按照顺序，在HTML中如何调用。

Answer 1

传递给 $(document).ready() 的每个单独函数都会为变量和函数创建自己的作用域，这可能会导致相当大的差异。举这两个例子:

$(document).ready(function() {
    function viewEvent(event) {
        console.log(event);
        return false;
    }

    $('a').on('click', viewEvent);
    // works fine, clicking on an <a> element will log the event object
});

然后:

$(document).ready(function() {
    function viewEvent(event) {
        console.log(event);
        return false;
    }
});


$(document).ready(function() {
    $('a').on('click', viewEvent);
    // won't work, viewEvent is out of scope here
});