html注入中的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”（ 按此顺序 ）。 而且，很明显，仅在script.js完成加载后才将“ c”附加到正文（例如，如果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规范的更多信息。