배민찬

화면전환효과 리팩토링

SceneChange클래스의 기능이 많고 복잡해서 분리하기로 함

설계

버튼

각 버튼(왼쪽, 오른쪽, 인덱스)이 애니메이션을 가짐

animation 함수는 currying으로 파라미터를 넘겨받음

이벤트가 발생하면 애니메이션을 sceneChange에 넘겨줌

scene

SceneChange는

타깃 scene에 대한 index를 계산할 수 있는 함수를 받음(indexCalculator)
현재 scene과 타깃 scene을 넘겨받은 애니메이션에 넣어주기만 함

class SceneChangeButton {
    constructor({animation, speed}) {}
    bindAnimateScene(handler) {}
}
class SceneChange {
    // @param {Array} sceneChangeButtons
    // @param {NodeList} sceneList
    constructor({sceneChangeButtons, sceneList}) {}
    init() {
        sceneChangeButtons.forEach(scb => {scb.bindAnimateScene(this.animateScene)})
    }
    animateScene({animation, index}) {}
}

animation

currying을 이용함. 스피드값을 넘겨받으면 해당 스피드를 가진 animation함수를 리턴

let fade = function({speed}) {
    return function({previous, next}) {
        ...
    }
}

사용자 입장에서 speed만 알고 나머지는 몰라도 되는 장점