모듈 패턴을 사용하여 문서 데이터를 검색하는 방법은 무엇입니까?

Question

저는 모듈 패턴이라고 생각하는 자바 스크립트를 쓰고 있습니다. (틀린 용어를 사용하면 여전히 프로그래밍에 익숙하지 않아 용서해줍니다.)

아래 스크립트

는 세 가지를 측정하고자 할 때 문서로드 :

1. 페이지를 스크롤 한 거리입니다.
2. y- 오프셋은 문서 상단에 상대적으로 #eventSideBar입니다.
3. 문서의 전체 높이입니다.

   ---

   (function (exocet, $, undefined) { 
   
       var scrollDistance = function() { 
        return $('body').scrollTop() 
       } 
       var sideBarOffset = function() { 
        return $('#eventSideBar').offset().top; 
       } 
       var allHeight = function() { 
        return $('body').height(); 
       } 
   
       exocet.init = function() { 
        console.log('Scroll distance: ' + scrollDistance() + 
           ' Sidebar offset: ' + sideBarOffset() + 
           ' Total height: ' + allHeight() 
        ); 
       }; 
   
   }(window.exocet = window.exocet || {}, jQuery)); 
   
   $(document).ready(function() { 
       exocet.init(); 
   }); 
   

   콘솔이 로깅

는 (크롬에서 테스트) 지속적으로 올바르게 반환되는 유일한 값은 sideBarOffset입니다. scrollDistance은 항상 0을 반환하고 allHeight은 +/- 약 1000px입니다.

나는 다음과 exocet.init을 변경하는 경우 :

exocet.init = function() { 
    console.log('Scroll distance: ' + scrollDistance() + 
       ' Sidebar offset: ' + sideBarOffset() + 
       ' Total height: ' + allHeight() 
    ); 
    $(document).scroll(function(){ 
     console.log('Scroll is now: ' + scrollDistance()); 
    }); 
}; 

그때 항상 정확한 스크롤 위치 값을 얻을. 이것은 옳은 결과를 얻지 만, 약간 hackish 보인다.

내 접근 방식에서 발생하는 것처럼 보이는 document 메서드를 연결하지 않고 데이터를 가져 오는 "적절한"방법이 있습니까? 당신이 필요로하는 것은 같은

Answer 1

는 소리 :

$(document).scroll(function() { exocet.init(); }); 

은 준비 콜백 내부에 있음을 넣습니다. 결과는 사용자가 스크롤 할 때 기록되어야합니다. 새로 고침을하는 것은별로 의미가 없습니다.

Answer 2

@ beautifulcoder의 예는 문서가 스크롤 될 때마다 작동합니다. 페이지로드시 스크롤 위치를 원할 경우 (즉, 이전에 페이지에 스크롤 위치가 저장된 경우) 함수를 load 이벤트 핸들러에 넣고 짧은 시간 제한을 사용하여 해당 초기 스크롤 위치를 캡처 할 수 있습니다.

$(window).on('load', function() { 
     setTimeout(function() { 
      exocet.init(); 
     }, 200); 
    }); 

둘 다 원할 경우 scroll 이벤트 처리기도 사용하십시오.

수정 JSBin 예.