2013-08-06 1 views
3

저는 Easeljs, David Rousset 및 Lee Brimelow의 두 가지 자습서를 보았습니다. 어떤 것이 더 사용하기 좋은지, 그 차이점은 무엇인지 잘 모르겠습니다. 예 1 (데이빗 루셋) :Easeljs 패턴 - 차이점을 설명하십시오.

(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 (리 Brimelow) : 하나는 BitmapAnimation 한 단지 기본 비트 맵을 사용하여 그냥 ingnore

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

. 예 1에서

:

Player.prototype.alive = true; 

과 :

this.alive = true; 

2) 기능 :

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

1)이 라인을 교체 동일시겠습니까

내가 이해할 수없는 com

Player.prototype = new createjs.BitmapAnimation(); 

나는 새로운 플레이어()

4 예 1에서 실행될 때 실제로 어떻게되는지 확실하지 않다 :, 표준 ...

3)이 라인은 initilize 기능을 시작에 추가) 플레이어의 속성으로 틱을 설정하면 주 틱 기능에서이 틱 기능을 호출해야합니다. easljs에서 Ticker 클래스의 inTilt onTick 이벤트 처리기를 사용하는 것이 더 낫지는 않습니다 (예제 2에서와 같이) ?

위의 패턴 중 "우수 사례"와 그 이유는 무엇입니까?

또한이 두 패턴은 Player 객체를 만드는 main.js에 종속됩니다 (Player 객체는 윈도우의 속성으로 설정 됨). 전역 범위에서 모든 것을 유지하거나 예를 들어 node.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 /이 가능 :

은이 주요 JS을 말할 수 있습니다? 두 패턴 사이

+0

개인 취향입니다. 당신이 이해하고 좋아하는 것을 골라 내고 좋아하십시오. 나는 그것이 너무 광범위하고 답변에 대한 구체적인 사실 이라기보다는 주로 의견이 될 것이기 때문에 투표를 끝내겠다고 투표하고 있습니다. – WiredPrairie

답변

4

차이 :

개의 패턴 (보통 의도로 사용하는 경우)되는 것과 동일한 목적으로 이용되지. 첫 번째 패턴은 계승이고 두 번째 패턴은 MVC입니다. (Google 모델보기 컨트롤러 패턴). 개인적으로 나는 내부적으로 EaselJS에서 사용되는 패턴이기 때문에 첫 번째 패턴을 우선적으로 선호합니다. EaselJS 앱 (일반적으로)이 아닌 더 큰 프로젝트에서 MVC에 대해 생각할 수도 있습니다.

또한 두 번째 패턴을 사용하면 상속없이 MVC 프로젝트를 본 적이없는 MVC와 상속을 활용하려는 경우 대부분의 경우 첫 번째 패턴을 사용해야합니다. 개인적으로 나는 JS/EaselJS 프로젝트의 MVC 패턴에서 어떤 이점도 경험하지 못했습니다 (하지만 그 관점을 공유하지 않는 사람들이 많을 것입니다. 그리고 JS에서는 그렇지 않고 대부분의 다른 언어로 동의합니다).


은 다른 질문에 대답하려면 :

  1. 이 아니, 동일하지 않을 것입니다. this.alive = true;을 initialize-method에 쓴다면 코드 실행 시간 내내 동일한 결과를 얻을 수 있지만 프로토 타입 속성을 설정하는 것과는 완전히 다르다는 것을 엄격히 알 수 있습니다 (하지만 이는 JS 내부 기능에 깊숙이 적용됩니다) .

  2. Player -class

    BitmapAnimation에서 '상속', 및 패턴 (즉, 또한이 경우 EaselJS 의해 사용되는) 모든 클래스는 initialize -method 특징 것을 제공한다. 따라서 initialize-method가 Player에 정의되기 전에 원래의 initialize-method는 BitmapAnimation_initialize으로 '저장'되고 나중에 새 initialize-method 내에서 15line 아래에서 호출됩니다. 기본적으로 '를 분사'를 회선 (또는 상속하지만 엄격 본 JS가 더 상속 모델이없는 적어도 자바, C 번호, AS3 요법 ... 같은) Player-BitmapAnimation 모든 기능을

  3. 예를 들어 myPlayer.gotoAndPlay('animation')을 사용할 수 있지만 gotoAndPlay()은 실제로는 BitmapAnimation의 메서드입니다.

  4. 사실 객체가 스테이지의 자식 인 경우 자동으로 호출되는 onTick..을 사용하는 것이 더 좋을 것입니다. tick은 여전히 ​​이전 버전의 EaselJS에서 가져온 것일 수 있습니다. 패턴은 '가장 좋은 방법은'입니다

:

이 EaselJS는 '자신을 위해 사용하는 패턴이기 때문에 나는 첫 번째 패턴이 모범 사례 (EASELJS위한)입니다,라고 말하고 싶지만 수업도. (예를 들어 네임 스페이스와 같은 사소한 차이점이 있음). 거대한 프로젝트의 경우 MVC를 고려할 수 있습니다.

+0

고맙습니다. @olsn. 나는 onTick 대 진드기에 대한 좀 더 많은 조사를했고, onTick은 "Deprecated :"tick "이벤트에 찬성하여 다음 버전에서 제거 될 것임을 발견했다." 나는 이유를 모른다. 좋은 재산이다. 질문 1에 관해서는, initialize 메소드 외부에서 this.alive 속성을 Player objec에 직접 public 속성으로 설정하려고했으나 작동하지 않을 것이라고 생각합니다. –

+0

메소드 밖에서 설정하면'function (window) {...}'의 속성이 될 것이므로 익명의 함수이므로 아무런 효과가 없으므로 해결할 수 없습니다 후에. -'.prototye.XXX' 방법은 그것을 "public"속성으로 만들 것입니다. 그래서 플레이어를 만들 때'myPlayer.isAlive'를 검사 할 수 있습니다 - 또한 "public"과 "private"은 JS는 현재 자체적으로 지원합니다. – olsn

+0

두 번째 예제는 MVC와 어떤 관계가 있습니까? 내가 볼 수있는 것은 드러나는 모듈 패턴뿐입니다. – Bergi