Easeljs patterns - explain differences

Question

I have seen two different tutorials on Easeljs, one by David Rousset and one by Lee Brimelow. I am not sure which is better to use, and what the differences are. Example 1 (David Rousset):

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

and Example 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);

Just ingnore that one uses BitmapAnimation and one just a basic Bitmap.

In the Example1:

1) Would it be the same to replace the line:

Player.prototype.alive = true;

with:

this.alive = true;

2) What does the:

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

do, i don't understand the comment...

3) Is this line added to start the initilize function:

Player.prototype = new createjs.BitmapAnimation();

I am not sure what actually happens when new Player() is run in Example 1.

4) Setting the tick as a property of Player will mean that you have to call this tick function in your main tick function, isn't it better to use the inbuilt onTick event handler of the Ticker class in easljs (as done in example 2)?

Which of the patterns above are "best practice" and why?

Additionally, both of these patterns are dependent on a main.js that creates the Player object (and the Player object is set to a property of the window). To keep everything from the global scope or to be able to use this code on for instance a node.js would it be better to wrap the main.js in an object as well, in a similar matter, and pass this Main object in as a parameter to the function instead of the window?

Lets say you make this 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 
}

Is this possible/feasable?

Answer 1

Difference between both patterns:

The two patterns are (usually, if used as intended) not used for the same purposes. The first pattern is for inheritance and the second pattern is for MVC. (google Model View Controller pattern). Personally I prefere the first pattern, because it's also the pattern used by EaselJS internally, you might want to think about MVC in bigger projects, which EaselJS apps (usually) not are.

Also: With the second pattern you will most likely have to also use the first pattern at some point if you want to utilize MVC AND inheritance, and I personally have never seen a MVC project without inheritance. Personally I have never experienced any advantages in the MVC pattern in JS/EaselJS projects (but there are probably plenty of people who don't share that point of view, and I agree with them in most other languages, but not JS).

---

To answer your other questions:

1. No, it would not be the same. If you wrote the this.alive = true; into the initialize-method then you'd have the same result throughout the runtime of your code, but strictly seen even that would be different from setting a prototype-property(but this goes deep into JS-internal functionality).

2. The Player-class 'inherits' from the BitmapAnimation, and the pattern (that is also used by EaselJS in this case) provides that every class features an initialize-method. So before the initialize-method is defined for the Player, the original initialize-method is 'saved' as BitmapAnimation_initialize and later called from within the new initialize-method, 15lines below.

3. That line basically 'injects'(or inherits...but strictly seen JS has no inheritance-model, at least not like Java, C#, AS3, ect...) all the functionality from BitmapAnimation to the Player, so when you create a new Player you can for example use: myPlayer.gotoAndPlay('animation') but gotoAndPlay() is actually a method from BitmapAnimation.

4. True, it'd be better to use onTick.. which is called automatically if the object is a child of the stage, the tick might still be from an earlier version of EaselJS (not too sure though).

Which pattern is 'best practice':

I'd say, that the first pattern is (FOR EASELJS) best practice, because this is the pattern that EaselJS uses for its' own classes as well. (With some minor differences, like a namespace for example). For a huge project you might want to consider MVC.