javascript - html注入(inject)中的jQuery脚本执行顺序

Question

考虑以下 JS 代码:

var html = '<script>$("body").append("a");</script>'
         + '<script src="script.js"></script>'
         + '<script>$("body").append("c");</script>';

$("body").append(html);

并假设 script.js 包含以下内容:

$("body").append("b");

似乎确实将“a”、“b”和“c”附加到正文中(按此顺序)。并且，显然，“c”仅在 script.js 之后才附加到正文中。已完成加载(因此，例如，如果 script.js 需要 5 秒才能完成加载，“c”将仅在 5 秒后附加到正文)。

我的问题如下:我们可以依赖 jQuery 中的这种行为吗？它是确定性的还是我们可能会遇到不可预测的情况？

这对于动态加载使用尚未加载的 .js 文件的脚本非常有用。您可以假设 script.js 实际上包含 function f(){}第三行是 <script>f()</script> 。如果您始终获得相同的脚本加载/执行顺序，那么就不会有问题，否则您可能会遇到 f is not defined异常(如果在加载 script.js 文件之前执行该标记)。

Answer 1

这不是 jQuery 特定的行为，而是浏览器的行为。加载文档中预定义的脚本时，它们会按顺序或外观加载。当您将脚本标记动态附加到文档时，情况并非如此。

如果您加载了如图所示的 JavaScript 文件，当 DOM 设置元素的源时，它将开始下载外部文件。

示例:

Html 文件头部的脚本

$(function() {
    var html = '<script>$("body").append("a");<\/script>' +
               '<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"><\/script>' +
               '<script>$("#my-dialog").dialog();<\/script>';

    $("body").append(html);
}

Html 文件的主体元素

<div id="my-dialog">
    Some content here
</div>

上面的代码不会按照您的预期执行。 a 将被附加到正文，然后加载 jQuery.ui，最后会出现一个 dialog，但实际上第三个脚本将失败是因为 jQueryUI 尚未完成下载且尚未解析。现在，如果您在控制台中输入 $("#my-dialog").dialog(); ，则不会出现任何问题，因为此时文件已下载并解析。

这是模块加载器流行的主要原因之一。您只需告诉它需要什么，它就会按照所需的顺序为您加载它们。

您可以阅读有关 W3C 脚本规范的更多信息 here .