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.dustindiaz.com/scriptjs

已经链接的那样

jQuery还有一个非常简单的方法$.getScript( 'path/to/script.js' );（documentation），您可以使用它。如果内存对我有用，它使用简单的W3C DOM注入。

谷歌“javascript加载”或类似的东西，或者在StackOverflow上搜索，如果您对这些库的更多链接感兴趣，请参阅。

Answer 2

如果您希望以正确的顺序加载异步javascript脚本，我会建议您使用Twitter javascript lead dev http://www.dustindiaz.com/scriptjs开发的$ script.js

真的很棒!!

Answer 3

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

对于Arrays，使用传统的C样式进行循环语法：

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 );
}

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

3 个答案: