8

如果您将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>

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

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

谢谢！

4

3 回答 3

9

回答您的问题：是的，加载的脚本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' );（文档）可供您使用。如果没记错的话，它使用简单的 W3C DOM 注入。

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

于 2011-03-19T22:45:21.083 回答
1

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

真的很棒！！

于 2011-03-19T22:25:44.260 回答
1

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

对于数组，使用传统的 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 );
}
于 2011-03-19T23:32:10.983 回答