1

我正在学习使用闭包库，谷歌提醒我们谨慎使用该库：

这不起作用：

<script src="closure-library/closure/goog/base.js"></script>
<script>
  // DON'T DO THIS.
  goog.require('goog.dom');
  var newHeader = goog.dom.createDom('h1');
</script>

我知道为什么，因为goog.require会动态添加相关的脚本，并且在脚本还没有下载的时候会立即goog.dom执行，然后会抛出错误。goog.dom.xxgoog.dom

但是我想知道为什么会这样：

<script src="closure-library/closure/goog/base.js"></script>
<script>
  goog.require('goog.dom');
</script>
<script>
  var newHeader = goog.dom.createDom('h1');
</script>

将goog.dom在 之后立即调用goog.require，但为什么它不抛出错误。

这似乎是由于这两条代码位于两个script块中造成的。

script所以我想知道是否有人可以解释不同块和不同位置（头部或身体内部）的 JavaScript 执行机制？

更新 Romain 的回答：

解析器看到这个：

<script src="closure-library/closure/goog/base.js"></script>
<script>
  goog.require('goog.dom');
</script>
<script src="closure-library/closure/goog/dom.js"></script>
<script>
  var newHeader = goog.dom.createDom('h1');
</script>

虽然<script src="closure-library/closure/goog/dom.js"></script>是在之前添加的var newHeader = goog.dom.createDom....，dom.js是要下载的，是完全下载goog.dom.create....执行后会执行吗？dom.js但是听说js执行是异步的。我想念什么吗？

4

1 回答 1

1

从“入门”页面：

goog.require() 调用在包含行 var newHeader = goog.dom.createDom('h1') 的脚本标记之前添加 goog.dom.createDom() 的代码。

脚本加载器通过将脚本元素插入 DOM 来加载脚本。它将它们插入“当前脚本元素”之后。这就是为什么在使用动态加载脚本的功能之前需要“关闭”脚本元素的原因。

如果这是您的源 html：

<script src="closure-library/closure/goog/base.js"></script>
<script>
  goog.require('goog.dom');
</script>
<script>
  var newHeader = goog.dom.createDom('h1');
</script>

解析器看到这个：

<script src="closure-library/closure/goog/base.js"></script>
<script>
  goog.require('goog.dom');
</script>
<script src="closure-library/closure/goog/dom.js"></script>
<script>
  var newHeader = goog.dom.createDom('h1');
</script>

但如果你的来源是这样的：

<script src="closure-library/closure/goog/base.js"></script>
<script>
  goog.require('goog.dom');
  var newHeader = goog.dom.createDom('h1');
</script>

解析器看到这个：

<script src="closure-library/closure/goog/base.js"></script>
<script>
  goog.require('goog.dom');
  var newHeader = goog.dom.createDom('h1');
</script>
<script src="closure-library/closure/goog/dom.js"></script>

这当然行不通。

脚本执行是同步的。下载带有 script 元素的脚本会阻止脚本的执行（以及页面的呈现）。这就是为什么您不应该将不必要的脚本元素放入<head>. 这会阻止解析器，因此会阻止之后的所有内容（也就是您的文档）的呈现，直到您的脚本被下载。

在 HTML5 中，脚本标签 ( async)有一个属性，它声明浏览器不应等待脚本下载。但默认行为是等待。

于 2013-06-27T08:25:37.717 回答