Question

这是我的HTML。

<html>
  <head>
    <script src="closure-library/closure/goog/base.js"></script>
    <script src="hello.js"></script>
  </head>
  <body onload="sayHi()">
  </body>
</html>

这是我的hello.js文件。

var options = {
    "style" : "background:#EEE;"
}

function sayHi() {
  goog.require("goog.dom");
  var header = goog.dom.createDom("h1", options, "hello world");
  goog.dom.appendChild(document.body, header);
}

为什么Chrome控制台会发出此错误？

Uncaught TypeError: Cannot call method 'createDom' of undefined

一般来说，我认为我不能在同一个代码块中要求一个库，我从库中调用一个函数。我刚刚在文档中看到了这一点，但我想知道为什么。

Answer 1

在未编译的Closure代码中，每个goog.require(NAMESPACE)都会调用：

document.write('<script src="SCRIPT_PROVIDING_NAMESPACE"></script>');

通过使用depswriter.py生成的deps文件中的goog.addDependency(relativePath, provides, requires)调用来定义依赖项。使用Chrome开发者工具，Elements选项卡显示基于deps.js中定义的Closure Library依赖项动态插入的所有<script>元素。

在您的示例中，当正文sayHi()事件触发onload时，标题中会插入新的<script>元素。但是，此新<script>元素尚未加载goog.dom。因此，goog.dom未定义。

如果您按如下方式更改 hello.js ：

goog.require("goog.dom");

var options = {
    "style" : "background:#EEE;"
}

function sayHi() {
  var header = goog.dom.createDom("h1", options, "hello world");
  goog.dom.appendChild(document.body, header);
}

然后goog.require("goog.dom")在onload事件之前执行，插入的<script>元素有可能在调用dom.js之前加载sayHi()。

为什么我不能在我从加载的库中调用函数的相同代码块中调用goog.require（）？

1 个答案: