단순화 자바 스크립트 객체의 기능

Question

나는 다음과 같은 자바 스크립트 객체가 : 나는 두 가지 기능 '차이에 대한 매개 변수와 함께 한'moveQuote '기능에'quoteRight '와'quoteLeft '기능을 단순화 걸려

Quotes = { 
    quote: '#home-quotes .quote', 
    quoteWrap: '#home-quotes .quote-wrap', 
    leftTrigger: '#home-quotes .quote-left', 
    rightTrigger: '#home-quotes .quote-right', 
    sliderDot: '#home-quotes .slider-dots li', 
    init: function() { 
     $(this.rightTrigger).click(this.quoteRight.bind(this)); 
     $(this.leftTrigger).click(this.quoteLeft.bind(this)); 
     $(this.sliderDot).click(this.sliderDots.bind(this)); 
    }, 
    quoteRight: function(e) { 
     var firstQuote = $(this.quote).first(), 
      lastQuote = $(this.quote).last(), 
      activeQuote = $('.quote.active'), 
      nextUp = activeQuote.next(); 
      quoteWidth = $(this.quote).width(); 
      moveLeft = -(quoteWidth*2); 
     // replaceLeft = -(quoteWidth); 
     if ($(window).width() > 977) { 
      var updateLeft = '-978px'; 
     } else { 
      var updateLeft = '-100vw'; 
     } 
     e.preventDefault(); 
     $(this.quoteWrap).removeClass('no-transition'); 
     $(this.quoteWrap).css('left', moveLeft); 
     setTimeout(function(){ 
      firstQuote.clone().insertAfter(lastQuote); 
      firstQuote.remove(); 
      $('.quote-wrap').addClass('no-transition'); 
      $('#home-quotes .quote-wrap').css('left', updateLeft); 
     }, 500) 
     activeQuote.removeClass('active'); 
     nextUp.addClass('active'); 
    }, 
    quoteLeft: function(e) { 
     var firstQuote = $(this.quote).first(), 
      lastQuote = $(this.quote).last(), 
      activeQuote = $('.quote.active'), 
      nextUp = activeQuote.prev(); 
      quoteWidth = $(this.quote).width(); 
      moveRight = 0; 
     if ($(window).width() > 977) { 
      var updateLeft = '-978px'; 
     } else { 
      var updateLeft = '-100vw'; 
     } 
     e.preventDefault(); 
     $(this.quoteWrap).removeClass('no-transition'); 
     $(this.quoteWrap).css('left', moveRight); 
     setTimeout(function(){ 
      lastQuote.clone().insertBefore(firstQuote); 
      lastQuote.remove(); 
      $('.quote-wrap').addClass('no-transition'); 
      $('#home-quotes .quote-wrap').css('left', updateLeft); 
     }, 500) 
     activeQuote.removeClass('active'); 
     nextUp.addClass('active'); 
    }, 
} 

합니다. 같은 매개 변수를 전달, 다음 내 '초기화하기'기능에

moveQuote: function(direction, distance, sequence) { 
    var firstQuote = $(this.quote).first(), 
     lastQuote = $(this.quote).last(), 
     activeQuote = $('.quote.active'), 
     nextUp = activeQuote.sequence(); 
     quoteWidth = $(this.quote).width(); 
     movedistance = -(distance*2); 
    if ($(window).width() > 977) { 
     var updateLeft = -(distance); 
    } else { 
     var updateLeft = '-100vw'; 
    } 
    e.preventDefault(); 
    $(this.quoteWrap).removeClass('no-transition'); 
    $(this.quoteWrap).css(direction, moveLeft); 
    setTimeout(function(){ 
     firstQuote.clone().insertAfter(lastQuote); 
     firstQuote.remove(); 
     $('.quote-wrap').addClass('no-transition'); 
     $('#home-quotes .quote-wrap').css('left', updateLeft); 
    }, 500) 
    activeQuote.removeClass('active'); 
    nextUp.addClass('active'); 
} 

과 : : 나는 같은 하나의 함수를 만드는 시도

$(this.rightTrigger).click(this.moveQuote('Right', '978px', 'next')); 

나의 첫번째 중요한 문제입니다 내 '초기화하기' ' 클릭 '기능은'rightTrigger '를 클릭했을 때가 아니라 onLoad를 실행 중입니다. 왜 이런거야?

둘째, 매개 변수를 jQuery 메서드로 전달하는 방법을 알 수 없습니다. 예를 들어 위 예제의 세 번째 매개 변수 ('next')는 jQuery 함수 'activeQuote.next()'로 전달되어야하지만 'activeQuote.sequence()'로 전달할 수 없습니다. 시퀀스가 함수가 아닙니다. ' 매개 변수 문자열을 jQuery 메서드로 전달하려면 어떻게해야합니까?

이 문제에 대한 도움을 주시면 감사하겠습니다. 난 그냥 객체 지향 자바 스크립트로 이동하고 잘못하고있는 것들에 대한 몇 가지 포인터를 얻기를 바라고 있습니다.

Answer 1

첫 번째 문제의 경우 실행 결과를 .click 호출로 전달합니다. 당신은 대신 호출 (함수)를 전달해야

다른 문제에 대한

var this_ref = this; 
$(this.rightTrigger).click(function() { 
    this_ref.moveQuote('Right', '978px', 'next'); 
}); 

, 당신은 동적 데이터와 속성/메소드를 참조하는 대괄호 표기법을 사용해야합니다

nextUp = activeQuote[sequence](); //sanity checking for existence is up to you