famo.us 슬라이드 쇼 자습서에서 'this'사용

Question

자습서에서는 다룰 수 없지만 'this'가 슬라이드 쇼 자습서의 서페이스 배치 동작에 어떻게 영향을 미치는지 혼란 스럽습니다. 이것은 'slideView'이다 :이 예의

/* * SlideView/

define(function(require, exports, module) { 
    var View = require('famous/core/View'); 
    var Surface = require('famous/core/Surface'); 
    var Transform = require('famous/core/Transform'); 
    var StateModifier = require('famous/modifiers/StateModifier'); 
    var ImageSurface = require('famous/surfaces/ImageSurface'); 
    var SlideData = require('data/SlideData'); 


    // SlideView constructor function 
    // runs once for each new instance 
    function SlideView() { 
     View.apply(this, arguments); 

     this.rootModifier = new StateModifier({ 
      size: this.options.size 
     }); 

     this.mainNode = this.add(this.rootModifier); 

     _createBackground.call(this); 
     _createFilm.call(this); 
     _createPhoto.call(this); 
    } 

    SlideView.prototype = Object.create(View.prototype); 
    SlideView.prototype.constructor = SlideView; 

    SlideView.DEFAULT_OPTIONS = { 
     size: [400, 450], 
     filmBorder: 15, 
     photoBorder: 3, 
     photoUrl: SlideData.defaultImage 
    }; 


    function _createBackground(){ 
     var background = new Surface({ 
       // undefined size will inherit size from parent modifier 
      properties: { 
       backgroundColor: '#FFFFF5', 
       boxShadow: '0 10px 20px -5px rgba(0, 0, 0, 0.5)' 
      } 
     }); 

     this.mainNode.add(background); 
    } 

    function _createFilm() { 
     this.options.filmSize = this.options.size[0] - 2 * this.options.filmBorder; 

     var film = new Surface({ 
      size: [this.options.filmSize, this.options.filmSize], 
      properties: { 
       backgroundColor: '#222', 
       zIndex: 1 
      } 
     }); 

     var filmModifier = new StateModifier({ 
      origin: [0.5, 0], 
      align: [0.5, 0], 
      transform: Transform.translate(0, this.options.filmBorder, 1) 
     }); 

     this.mainNode.add(filmModifier).add(film); 
    } 

    function _createPhoto() { 
     var photoSize = this.options.filmSize - 2 * this.options.photoBorder; 

     var photo = new ImageSurface({ 
      size: [photoSize, photoSize], 
      content: this.options.photoUrl, 
      properties: { 
       zIndex: 2 
      } 
     }); 

     this.photoModifier = new StateModifier({ 
      origin: [0.5, 0], 
      align: [0.5, 0], 
      transform: Transform.translate(0, this.options.filmBorder + this.options.photoBorder, 2) 
     }); 

     this.mainNode.add(this.photoModifier).add(photo); 
    } 


    module.exports = SlideView; 
}); 

3 개면, 배경, 필름 및 사진이있다. 배경은 표면 수정자를 사용하지 않고 필름은 표면 수정자를 사용하지만 'this'에 구속되지 않으며 사진은 'this'에 바인딩 된 표면 수정자를 사용합니다. 왜 사진은 '이'에 바인딩되어야하지만 영화에는 바인딩되지 않아도됩니까? 나는 그것을 시도하고 명확히하기 위해 조금 놀았지만 그 행동은 정말로 엉뚱한 것입니다.

Answer 1

바깥 세상에서 변수를 다시 사용하지 않으려면 filmModifier와 같은 로컬 범위 변수를 사용하십시오. 그러나 함수 밖에서 수정 자에 도달하려면 한 가지 방법으로이를 수정해야합니다. 그래서 photModifier는 다른 곳에서나 나중에 재사용되고 싶어합니다. 슬라이드 쇼 자습서의 최종 버전을 확인하면 대답을 얻을 수 있습니다.

Answer 2

질문에 답변 하시겠습니까? "왜 사진을 'this'에 바인딩해야 하나 필름에 바인딩해야합니까?"

• photoModifier는 photo 전이를 만들 뷰에서 나중에 사용될 것이다.
• filmModifier는 구성 할 때 film을 설정하는 데만 사용되며 나중에 액세스 할 필요가 없습니다.

이것은 디자인상의 결정이며 나중에 수정할 수 있습니다.

참고 : 코드 예에서는 SlideView 예제의 첫 번째 버전 만 표시합니다. Here is the code example은 photoModifier이고, SlideView의 외부 방법은 fadeIn()이라고한다.

SlideView.prototype.fadeIn = function() { 
    this.photoModifier.setOpacity(1, { duration: 1500, curve: 'easeIn' }); 
    this.shake(); 
};