如果使用 document.write，javascript 是否会同步加载？

Question

如果你像这样将javascript加载到页面上，是一样的吗：

<script src="http://domain.net/script.js" type="text/javascript"></script>

像这样，

<script type="text/javascript">
  document.write("<script src='http://domain.net/script.js' type='text/javascript'></script>");

我在js中有很多依赖项，并且想将它们配置为一个单独的数组，这些依赖项只是以如下方式捆绑在index.html中：

<script type="text/javascript">
  for (i in config.files.javascripts) {
    document.write("<script src='config.files.javascripts[i]' type='text/javascript'></script>");
  }
</script>

问题是 - 它是否应该按预期工作，以便在加载前一个文件之前不会执行下一个文件？

这是我正在做的前端没有服务器端，它有时也可以作为小部件工作，但对于开发和测试，我们应该加载未合并和未压缩的文件来测试。

谢谢！

Answer 1

回答您的问题：是的，使用 document.write 加载的脚本保证按照编写的顺序执行。

这同样适用于使用 W3C DOM 方法加载的脚本。

var scriptElm = document.createElement('script');
scriptElm.defer = true; // Causes faster (parallel) loading in some browsers.
scriptElm.src = 'path/to/script.js';
document.getElementsByTagName('head')[0].appendChild( scriptElm );

也就是说，document.write() 通常被认为是非常糟糕的做法（出于多种原因），并且可能会在以后导致损坏和恼人的边缘情况问题。因此，如果没有别的办法，我建议您使用上面所示的 W3C DOM 注入。

- - - -
然后还有脚本加载库，可以使此类资源加载更容易、更优雅，有时甚至更快。一些并行加载脚本，但以可预测的顺序执行 - 就像 @CoBaLt2760 http://www.coBaLt2760 链接到的脚本一样。 dustindiaz.com/scriptjs

jQuery 还有一个非常简单的方法 $.getScript( 'path/to/script.js' ); (文档）您可以使用。如果我没记错的话，它使用简单的 W3C DOM 注入。

如果您对此类库的更多链接感兴趣，请谷歌“javascript 加载”或类似内容，或者在 StackOverflow,com 上搜索。

Answer 2

如果您希望以正确的顺序加载异步 javascript 脚本，我会推荐您由 Twitter javascript 首席开发人员开发的 $script.js http://www.dustindiaz.com/scriptjs

真的很棒！！

Answer 3

如果您的 config.files.javascripts 是一个数组，那么您不应该使用 for...in，因为该语法适用于循环对象中的命名键。

For Arrays 使用传统的 C 风格 for 循环语法：

for (var i=0; i<array.length; i++) {

因此对于您的特定情况，这应该可以解决问题：

var headerElm = document.getElementsByTagName('head')[0],
    scripts = config.files.javascripts;

for (var i=0, l=scripts.length; i<l; i++)
{
  var scriptElm = document.createElement('script');
  scriptElm.defer = true; // causes faster (parallel) loading in some browsers.
  scriptElm.src = scripts[i];
  headerElm.appendChild( scriptElm );
}