Question

我正在使用easeljs（browserify，bower，grunt）关注游戏开发的关于游戏开发的教程。尽管如此，我还是希望能够完成，但是现在已经弃用了部分教程工作流程（类模型）。这就是createjs团队不得不说的：http://blog.createjs.com/new-createjs-class-model/

我不太了解，因为我不知道以前的模型和TBH试图让JS表现得类似OO可能会很痛苦。

我有来自easeljs在线演示的main.js和Button.js。我想扩展easeljs Container并导出Button原型（原型是JS定义类的方式，这是正确的吗？）并在main.js中使用（创建实例？）它。

我是否应该使用匿名函数来包装Button.js文件以避免使用全局范围，或者这是不必要的，因为我通过其构造函数导出它？
导出构造函数是导出JS类的首选方法吗？
var p代表原型？
如果我要为这个类创建新方法，我会使用p.newMethod = function() {};函数表达式吗？当我在main.js中创建Button实例（var myButton = new Button("Best button", "green")）时，我可以像这样调用它们 - myButton.newMethod;？
我们非常感谢任何其他更正和有用的轻到中等重量内容链接。

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");

请不要全部收到＃34;这个问题过于宽泛＆＃34;在我身上 - 它尽可能地直截了当，我真的很感激帮助。

Answer 1

以下是您的一些问题的答案。我对require.js使用CreateJS内容一无所知，所以我无法回答你的前两个问题。

是的，p只是对createjs.extend方法返回的对象原型的引用。
您在原型上创建方法并调用它们的摘要是正确的。

我不会亲自采取类似这样的继承方法。正如您所提到的，JavaScript中的继承有点乱，所以只有在有意义时才使用它。在您的情况下，我可能会编写一个包含背景和文本的Container实例，并使用stage.addChild(new Button().container)。我使用组合内容的名称“容器”来显示上下文，但我可能会发现一些更不可知的东西，比如“实例”或“精灵”。

扩展＆＃34;类＆＃34;并通过模块导出

1 个答案: