我正在关注 tuts+ 上关于使用 easeljs(browserify、bower、grunt)进行游戏开发的教程。我已经不知所措了,尽管如此我还是希望能够完成,但是教程工作流程的一部分(类模型)现在已被弃用。这是 createjs 团队不得不说的:http://blog.createjs.com/new-createjs-class-model/
我不太了解,因为我不知道以前的模型和 TBH 试图让 JS 表现得像 OO 可能会很痛苦。
我有 main.js 和 Button.js 基于 easeljs 的在线演示。我想扩展 easeljs Container 并导出 Button 原型(prototype)(原型(prototype)是定义类的 JS 方式,这是正确的吗?)并在 main.js 中使用(创建实例?)它。
我应该使用匿名函数来包装 Button.js 文件以避免使用全局作用域,还是因为我是通过其构造函数导出它而没有必要这样做?
导出构造函数是导出 JS 类的首选方式吗?
Button.js中的var p
代表prototype?如果我要为这个类创建新方法,我会使用
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");
- 请不要把所有“这个问题太宽泛”都怪到我身上 - 它尽可能直截了当,我非常感谢帮助。
最佳答案
以下是您的一些问题的答案。我对将 CreateJS 内容与 require.js 一起使用一无所知,所以我无法回答您的前 2 个问题。
是的,
p
只是对对象原型(prototype)的引用,由createjs.extend
方法返回。您关于在原型(prototype)上创建方法并调用它们的总结是正确的。
我个人不会对这样的事情采用继承方法。正如您所提到的,JavaScript 中的继承有点困惑,所以只有在有意义的时候才使用它。在您的情况下,我可能会编写一个 Container 实例,其中包括背景和文本,并且只需使用 stage.addChild(new Button().container)
。我对组合内容使用名称“容器”来显示上下文,但我可能会找到一些更不可知的东西,比如“实例”或“ Sprite ”。
关于javascript - 扩展 "class"并通过模块导出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33381904/