3

我看过两个关于 Easeljs 的不同教程，一个是 David Rousset 的，另一个是 Lee Brimelow 的。我不确定哪个更好用，以及有什么区别。示例 1（大卫·鲁塞特）：

(function (window) {
function Player(imgPlayer, x_start, x_end) {
    this.initialize(imgPlayer, x_start, x_end);
}
Player.prototype = new createjs.BitmapAnimation();

// public properties:

Player.prototype.alive = true;

// constructor:
Player.prototype.BitmapAnimation_initialize = Player.prototype.initialize; //unique to avoid overiding base class

var quaterFrameSize;

Player.prototype.initialize = function (imgPlayer, x_end) {
    var localSpriteSheet = new createjs.SpriteSheet({
        images: [imgPlayer], //image to use
        frames: { width:64, height:64, regX:32, regY: 32 },
        animations: {
            walk: [0, 9, "walk", 4]
        }
    });

    createjs.SpriteSheetUtils.addFlippedFrames(localSpriteSheet, true, false, false);

    this.BitmapAnimation_initialize(localSpriteSheet);
    this.x_end = x_end;

    quaterFrameSize = this.spriteSheet.getFrame(0).rect.width / 4;

    // start playing the first sequence:
    this.gotoAndPlay("idle");     //animate
    this.isInIdleMode = true;

}

Player.prototype.tick = function () {
//specific tick function for the player
}

    window.Player = Player;
} (window));

和示例 2（Lee Brimelow）：

(function(window) {

function Player(){


    // Adding the easeljs bitmap as a property of Player:       
    this.view = new createjs.Bitmap("assets/pics/player1.png")

    // Setting som local parameters
    var height          = stage.canvas.height;
    var width           = stage.canvas.width;
    var playerRadius            = 70;
    var offset          = 200;
    var x               = 0;
    var y                   = 0;

    this.view.regX = this.view.regY = playerRadius;

    // Adding the tickfunction below
    this.view.onTick    = tick;



}

function tick(e) {

//

}

window.Player = Player;
})(window);

只是忽略了一个使用 BitmapAnimation 和一个只是一个基本的位图。

在示例 1 中：

1）替换行是否相同：

Player.prototype.alive = true;

和：

this.alive = true;

2) 什么是：

Player.prototype.BitmapAnimation_initialize = Player.prototype.initialize; //unique to avoid overiding base class

做，我不明白评论...

3）是否添加了这一行来启动初始化函数：

Player.prototype = new createjs.BitmapAnimation();

我不确定在示例 1 中运行 new Player() 时实际发生了什么。

4）将tick设置为Player的属性意味着你必须在你的主tick函数中调用这个tick函数，在easljs中使用Ticker类的内置onTick事件处理程序不是更好（如示例2中所做的那样） )?

以上哪些模式是“最佳实践”，为什么？

此外，这两种模式都依赖于创建 Player 对象的 main.js（并且 Player 对象被设置为窗口的属性）。为了使所有内容远离全局范围或能够在例如 node.js 上使用此代码，最好将 main.js 也包装在一个对象中，类似地，并将此 Main 对象传递为函数的参数而不是窗口？

假设您制作了这个主要的js：

Main = {
init: function() {
    //set up and create Player
    var player = new Player;
},
//then adding som properties, variables to Main... for instance
propA: 0 
}

这可能/可行吗？

4

1 回答 1

4

两种模式的区别：

这两种模式（通常，如果按预期使用）不会用于相同的目的。第一个模式用于继承，第二个模式用于MVC。（谷歌模型视图控制器模式）。我个人更喜欢第一种模式，因为它也是 EaselJS 内部使用的模式，您可能想在更大的项目中考虑 MVC，而 EaselJS 应用程序（通常）不是。

另外：对于第二种模式，如果您想利用 MVC AND 继承，您很可能在某些时候还必须使用第一种模式，而且我个人从未见过没有继承的 MVC 项目。就我个人而言，我从未在 JS/EaselJS 项目中体验过 MVC 模式的任何优势（但可能有很多人不同意这种观点，我同意大多数其他语言的观点，但不是 JS）。

要回答您的其他问题：

  1. 不，它不会是一样的。如果您将其this.alive = true;写入初始化方法，那么您将在代码的整个运行时获得相同的结果，但严格来说，即使这与设置原型属性也有所不同（但这深入到了 JS 内部功能）。

  2. -class 从,Player中“继承” BitmapAnimation，并且该模式（在这种情况下也被 EaselJS 使用）提供每个类都具有initialize- 方法。因此，在为播放器定义初始化方法之前，原始的初始化方法被“保存”为BitmapAnimation_initialize并稍后从新的初始化方法中调用，如下 15 行。

  3. 该行基本上是“注入”（或继承......但严格意义上的 JS 没有继承模型，至少不像 Java、C#、AS3 等......）从BitmapAnimation到 的所有功能Player，所以当你创建一个新的播放器您可以例如使用：myPlayer.gotoAndPlay('animation')但gotoAndPlay()实际上是来自BitmapAnimation.

  4. onTick..确实，如果对象是舞台的子对象，最好使用自动调用的，它tick可能仍然来自早期版本的 EaselJS（虽然不太确定）。

哪种模式是“最佳实践”：

我想说，第一个模式是（对于 EaselJS）最佳实践，因为这也是 EaselJS 用于它自己的类的模式。（有一些细微差别，例如命名空间）。对于大型项目，您可能需要考虑 MVC。

于 2013-08-07T19:55:34.003 回答