Question

这是一个常见的习语：

<html>
<head>
<script>
    (function($) {
        $(document).ready(function(){ 
            // some jQuery/JavaScript in here
        }
    })(jQuery);
</script>
</head>
....

所以我们使用一个执行一些jQuery的JavaScript立即函数。现在通常，建议将JavaScript放在页面末尾以允许渐进式渲染。我的问题是：

如果您正在使用JavaScript，那么如果您立即执行该功能会有什么不同？
${document).ready(...)阻止执行，还是异步发生？

Answer 1

确保在IIFE $ === jQuery内。在此脚本之前，您可以包含其他库（例如Prototype），它们具有自己的$定义。

<script src="/jquery.js"></script>
<script src="/Prototype.js"></script>
<script>
    $(document).ready(function () { // error, $ is something to do with prototye

    });
</script>
<script>
    (function ($) {
        $(document).ready(function () { // this works fine

        });
    }(jQuery));
</script>

执行$(document).ready()不是阻止执行，而是下载远程脚本。

<script src="/jquery.js"></script> <!-- page is blocked whilst jQuery is downloaded -->
<script> // This doesn't block the page load
    $(document).ready(function () {

    });
</script>

此外，我不会称之为常用成语。这在创建插件时很常见，但不适用于包装$(document).ready()。以下内容是为此创建的，具有相同的效果;

jQuery(document).ready(function ($) { // "jQuery is always passed as first param, alias with `$`
    // Inside here, $ === jQuery
});

Answer 2

IIRC，它将在文档加载完成时触发，而不会阻止任何其他执行。

ready（）是否异步执行？

2 个答案: