扩展 "class" 并通过模块导出它

Question

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

我不太了解，因为我不知道以前的模型，TBH 试图让 JS 表现得像 OO 一样会很痛苦。

我有 main.js 和 Button.js 基于 easeljs 的在线演示。我想扩展 easeljs 容器并导出 Button 原型（原型是定义 class 的 JS 方式，这是否正确？）并在 main.js 中使用（创建实例？）它。

我应该使用匿名函数来包装 Button.js 文件以避免使用全局范围，还是没有必要因为我是通过其构造函数导出它的？
导出构造函数是导出 JS classes 的首选方式吗？
var p in Button.js代表原型？
如果我要为此 class 创建新方法，我会使用 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");

拜托，不要把所有的事情都 "this question is too broad" 交给我 - 它尽可能简单明了，我非常感谢您的帮助。

Answer 1

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

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

我个人不会对这样的事情采用继承方法。正如您所提到的，JavaScript 中的继承有点混乱，所以只有在有意义的时候才使用它。在你的情况下，我可能会组成一个 Container 实例，其中包括背景和文本，并且只使用 stage.addChild(new Button().container)。我使用名称 "container" 作为组合内容来显示上下文，但我可能会找到一些更不可知的东西，比如 "instance" 或 "sprite".

扩展 "class" 并通过模块导出它

Extending a "class" and exporting it via modules

javascript

easeljs

browserify

createjs