Easeljs模式 - 解释差异

Question

我看到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（李布赖姆洛）：

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

只是ingnore一个使用BitmapAnimation和一个只是一个基本的位图。

在例1：

1）难道是更换线路相同的：这是什么的

this.alive = true; 

2）：

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

Player.prototype.alive = true; 

与

做的，我不明白com换货......

3）这是行添加到启动用来初始化函数：

Player.prototype = new createjs.BitmapAnimation(); 

我不知道当新的播放器（）例1中

4运行到底发生了什么）将tick设置为Player的属性将意味着您必须在主tick函数中调用此tick函数，使用easljs中Ticker类的内置onTick事件处理函数会更好吗（如示例2所示） ？

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

此外，这两种模式都依赖于创建Player对象（并将Player对象设置为窗口属性）的main.js。为了保持全局范围内的所有内容或者能够将此代码用于例如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 
} 

这是可能的/ feasable？两个图案之间

Answer 1

差异：

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

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

---

为了回答您的其他问题：

1. 不，它不会是相同的。如果你将this.alive = true;写入了初始化方法，那么你在整个代码运行时都会得到相同的结果，但是严格地看，即使这样做会和设置原型属性不同（但是这深入到JS内部功能中） 。

2. 的Player -class“继承”从BitmapAnimation，而图案（即在此情况下使用的EaselJS）规定，每个类设有一个initialize -method。因此，在为播放器定义初始化方法之前，原始初始化方法被'保存'为BitmapAnimation_initialize，稍后在新的初始化方法中调用，如下所示。

3. 该行基本上“内喷射”（或继承......但严格看到JS有没有继承的模式，至少不会像Java，C＃，AS3，等...）都从BitmapAnimation到Player功能，所以当你创建一个新玩家时，你可以使用：myPlayer.gotoAndPlay('animation')，但gotoAndPlay()实际上是从BitmapAnimation开始的一种方法。

4. 真实的，它会更好地使用onTick..被自动调用如果对象是阶段的孩子，tick可能仍然是从EaselJS的早期版本（也不太清楚，虽然）。

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

我想说的是，第一模式是（FOR EASELJS）的最佳做法，因为这是EaselJS用于其自身的模式类也是如此。 （有一些细微差别，例如像命名空间）。对于一个巨大的项目你可能会考虑MVC。