Расширение "класса" и экспорт его через модули

Question

Я читал урок по tuts+ о разработке игр с использованием easeljs (browserify, bower, grunt). Я над головой, тем не менее, я надеялся закончить, но часть рабочего процесса учебников (модель класса) теперь устарела. Вот что команда createjs должна была сказать по этому поводу: http://blog.createjs.com/new-createjs-class-model/

Я не понимаю достаточно, так как я не знал предыдущую модель, и TBH, пытаясь заставить JS вести себя как OO-подобный, может быть болью.

У меня есть main.js и Button.js, основанные на онлайн-демонстрациях easeljs. Я хотел бы расширить контейнер easeljs и экспортировать прототип Button (прототип - это JS-способ определения класса, это правильно?) И использовать его (создать экземпляр?) В main.js.

1. Должен ли я использовать анонимную функцию, чтобы обернуть файл Button.js, чтобы избежать использования глобальной области или это не нужно, так как я экспортирую его через конструктор?

2. Является ли экспорт конструктора предпочтительным способом экспорта классов JS?

3. var p в Button.js выступает за прототип?

4. Если бы я создал новые методы для этого класса, я бы сделал это, используя p.newMethod = function() {}; выражение функции? И когда я бы создал экземпляр Button (var myButton = new Button("Best button", "green")) в main.js я мог бы назвать их так - myButton.newMethod;?

5. Будем весьма благодарны за любые другие исправления и полезные ссылки на контент от легкого до среднего веса.

main.js

'use strict';

var utils = require('./util/index')
    , domReady = utils.domReady
    , Button = require('./Button');

var c = createjs;

console.log('Game started: EaselJS version: ' + c.EaselJS.version);

domReady(function () {
    var stage = new c.Stage('main');

    stage.addChild(new Button("Best button", "green"));

    stage.update();
});

Button.js

 'use strict';

    module.exports = Button;

    function Button(label, color) {
        this.Container_constructor();
        this.color = color;
        this.label = label;

        this.setup();
    }

    var p = createjs.extend(Button, createjs.Container);

    p.setup = function() {
        var text = new createjs.Text(this.label, "20px Arial", "#000");
        text.textBaseline = "top";
        text.textAlign = "center";

        var width = text.getMeasuredWidth()+30;
        var height = text.getMeasuredHeight()+20;

        text.x = width/2;
        text.y = 10;

        var background = new createjs.Shape();
        background.graphics.beginFill(this.color).drawRoundRect(0,0,width,height,10);

        this.addChild(background, text);
        this.cursor = "pointer";

        this.mouseChildren = false;

        this.offset = Math.random()*10;
        this.count = 0;
    };

    window.Button = createjs.promote(Button, "Container");

6. Пожалуйста, не понимайте, что "этот вопрос слишком широкий" для меня - он настолько прост, насколько это возможно, и я был бы очень признателен за помощь.

Answer 1

Вот ответы на некоторые ваши вопросы. Я ничего не знаю об использовании контента CreateJS с require.js, поэтому я не могу ответить на ваши первые 2 вопроса.

3. Да, p это просто ссылка на прототип объекта, возвращаемый createjs.extend метод.

4. Ваше краткое изложение создания методов на прототипе и вызова их является правильным.

Я бы не стал использовать подход наследования с чем-то вроде этого. Как вы упомянули, наследование в JavaScript является своего рода беспорядком, поэтому используйте его только тогда, когда это имеет смысл. В вашем случае я мог бы создать экземпляр контейнера, который включает в себя фон и текст, и просто использовать stage.addChild(new Button().container), Я использовал имя "контейнер" для составного контента, чтобы показать контекст, но я, вероятно, нашел бы что-то более независимое, например, "экземпляр" или "спрайт".