从javascript代码在DOM中添加外部脚本

Question

我在正文末尾包含了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，并进行了一次正常调用，但这并不能解释上述情况下发生的流程。 请帮忙。

Answer 1

这是因为您尝试包括骨干网而未确保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);

Answer 2

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

不，仅当标签正确位于已解析的HTML中（或在解析期间通过document.write插入）时，才进行阻止/同步下载。 动态添加了DOM的脚本以异步和并行方式加载。

为此，但要确保在满足脚本依赖项时执行脚本，您需要使用AMD加载程序。