Анатомия правильной реализации наследования / подкласса с использованием библиотеки Google Closure

Я начинаю работу с библиотекой Google Closure (вместе с Lime.js) и пытаюсь создать очень простую сцену с некоторыми экземплярами пользовательского подкласса класса lime.Layer в Lime.js.

Как я понимаю (как я читал в различных примерах и в собственной документации Google), в вашем подклассе должно быть 7 элементов, чтобы он мог надлежащим образом наследоваться от предполагаемого суперкласса и быть доступным для других классов:

  • goog.provide ("name.of.subclass")
  • goog.require ("name.of.superclass")
  • в комментариях выше функции конструктора @constructor
  • в комментариях выше функция конструктора @extends name.of.superclass
  • внутри конструктора вызовите 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 загружаются и инициализируются правильно. Я просто пытаюсь сделать следующий шаг в некоторых шаблонах в стиле ОО. Мой код и ошибки, с которыми я сталкиваюсь, приведены ниже.

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)

Что мне здесь не хватает?

Источник

1 ответ

По сути, у вас есть два варианта решения ваших зависимостей: 1) загрузить зависимый скрипт вручную 2) загрузить файл deps.js, который предоставляет путь к зависимостям

Обычно генерируется файл "deps.js" (ли лайм делает это для вас, я не знаком с ним)?

В качестве примечания вы можете попробовать goog.defineClass, который удаляет некоторые шаблоны из ваших определений классов (подразумевается @constructor,@extends и goog.inherits).

Источник
Другие вопросы по тегам