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。