使用 Google Closure Library 剖析正确的继承/子类实现答案

【问题标题】：Anatomy of a proper inheritance / subclass implementation using Google Closure Library使用 Google Closure Library 剖析正确的继承/子类实现
【发布时间】：2015-01-13 18:32:45
【问题描述】：

我开始使用 Google 的 Closure 库（以及 Lime.js），我正在尝试创建一个非常基本的场景，其中包含 Lime.js 的 Lime.Layer 类的自定义子类的一些实例。

据我了解（正如我在各种示例和 Google 自己的文档中阅读的那样），您的子类中需要有 7 个项目才能正确继承其预期的超类，并可供其他类使用：

goog.provide("name.of.subclass")
goog.require("name.of.superclass")
在构造函数@constructor上方的cmets中
在构造函数@extends name.of.superclass上方的cmets中
在构造函数内部，调用name.of.superclass.call(this)
在构造函数之后，goog.inherits(name.of.subclass, name.of.superclass)
最后，用 goog.exportSymbol('name.of.subclass', name.of.subclass) 导出构造函数

我的项目结构很简单。 “index.html”位于主级别，旁边是一个名为“js”的文件夹，其中包含我所有的自定义 JavaScript 文件。我已经运行了其他更简单的测试来确认 Closure 和 Lime 都正确加载和初始化。我只是想迈出更多面向 OO 风格的模式的下一步。我的代码和遇到的错误如下。

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>LimeTest</title>
        <script type="text/javascript" src="../closure/closure/goog/base.js"></script>
        <script type="text/javascript" src="js/limetest.js"></script>
    </head?
    <body onload="limetest.start()"></body>
</html>

js/limetest.js

// Expose class
goog.provide('limetest');

// Import dependencies
goog.require('lime.Director');
goog.require('lime.Scene');
goog.require('lime.Layer');

// Import custom subclass of lime.Layer
goog.require('stupid.thing');

// Main Start function
limetest.start = function ()
{
    // setup Lime.js scene
    var director = new lime.Director(document.body, 1024, 768);
    var scene = new lime.Scene();
    var mainLayer = new lime.Layer().setPosition(512, 384);

    // instantiate subclass
    var something = new stupid.thing();

    // assemble scene
    scene.appendChild(mainLayer);
    mainLayer.appendChild(something);
    director.makeMobileWebAppCapable();
    director.replaceScene(scene);
}

// Export start method
goog.exportSymbol('limetest.start', limetest.start);

js/thing.js

goog.provide('stupid.thing');

goog.require('lime');
goog.require('lime.Layer');

/*
*   @constructor
*   @extends lime.Layer
 */
stupid.thing = function ()
{
    lime.Layer.call(this);
};
goog.inherits(stupid.thing, lime.Layer);

goog.export('stupid.thing', stupid.thing);

我在 Chrome 中遇到的错误是：

base.js:     634   goog.require could not find: stupid.thing
base.js:     634   goog.logToConsole_
base.js:     675   goog.require
limetest.js: 10    (anonymous function)

base.js:     677   Uncaught Error: goog.require could not find: stupid.thing
base.js:     677   goog.require
limetest.js: 10    (anonymous function)

我在这里错过了什么？

【问题讨论】：

这一切是为了什么？我不知道它应该做什么......
它应该不会返回错误。显然我有更大的意图，这只是一个例子。从来没有人问过“'foo' 和 'bar' 的意义何在？”
@HorsePickle：这些错误似乎与继承实现无关，是吗？请创建一个产生这些错误的minimal example，并在其后说出您的问题。

标签： javascript inheritance google-closure limejs

【解决方案1】：

基本上，您有两种选择来解决您的依赖关系： 1）手动加载依赖脚本 2) 加载一个 deps.js 文件，该文件提供依赖项的路径

通常会生成“deps.js”（lime 会为你做这个吗，我不熟悉）？

作为旁注，您可能想尝试 goog.defineClass，它会从您的类定义中删除一些样板文件（隐含@constructor、@extends 和 goog.inherits）。

【讨论】：