0

我在正文末尾包含了 3 个外部 js 文件。假设我的文档已经包含一个名为 insertlibs.js 的 js，下面是代码

var script1 = document.createElement('script');
script1.src='http://code.jquery.com/jquery-latest.js';
script1.type='text/javascript';
document.getElementsByTagName('Body').item(0).appendChild(script1);

// Similar way to include underscore

var script2 = document.createElement('script');
script2.src='hhttp://documentcloud.github.com/backbone/backbone-min.js';
script2.type='text/javascript';
document.getElementsByTagName('Body').item(0).appendChild(script2);

但是有时会发生什么，它会抛出 $ 未定义的错误，我尝试在 Firefox 中进行调试，并且 jquery 和主干发生并行下载，有时主干库比 jQuery 更早下载，这导致了此错误。

据我所知，如果包含脚本标签，它将阻止进一步的请求所以只要我在 dom 中添加 jquery。我对这里发生的工作流程感到困惑。

所以我找到了解决方案，我合并了两个 js 并进行了一次调用，该调用运行良好，但这并不能解释我在上述情况下发生的流程。请帮忙。

4

2 回答 2

5

这是因为您试图在没有确保 jquery 已完全加载的情况下包含主干。要更正此问题，您可以使用脚本的 onload 属性附加一个回调，该回调将在加载 jquery 时触发。

例如：

var script1 = document.createElement('script');
script1.src='http://code.jquery.com/jquery-latest.js';
script1.type='text/javascript';

// add an onload handler
script1.onload = function() {

   // load the rest of the scripts here

   var script2 = document.createElement('script');
   script2.src='hhttp://documentcloud.github.com/backbone/backbone-min.js';
   script2.type='text/javascript';
   document.getElementsByTagName('Body').item(0).appendChild(script2);
}

document.getElementsByTagName('Body').item(0).appendChild(script1);
于 2012-10-24T17:26:59.713 回答
1

据我所知，如果包含脚本标签，它将阻止进一步的请求

不，阻塞/同步下载仅在标签位于解析的 HTML 中时（或document.write在解析期间插入）；动态 DOM 附加脚本异步并行加载。

要做到这一点，但要确保在满足其依赖关系时执行脚本，您需要使用AMD加载程序。

于 2012-10-30T11:27:54.523 回答