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 .