함수 호이스팅 간단한 질문드립니다.

함수 호이스팅 간단한 질문드립니다.

QA

함수 호이스팅 간단한 질문드립니다.

본문

질문)6번째줄이 실행되려면 51번째 줄인 $tabMenu.trigger(event);가 실행 된 후에 실행되는건가요? 이로 인해서 6번째 줄이 처음에 파싱과정을 거칠 때 실행이 안되는게 맞나요?
 
아래 질문은 무시하셔도 됩니다.
 
 
 
아래코드에서 tabPanel1.setSelectPanel() 함수를 실행할 때 tabPanel1 키값을 불러옵니다.
그런데 tabPanel1 = tabPanel(".tab-contents") 문이 7번째줄 tabPanel1.setSelectPanel() 함수 호출보다 아래 있습니다.
 
document.ready (domcontentsloaded) 이벤트가 1:1 맵핑되는 dom객체를 모두 맵핑 후 함수를 호이스팅하기 때문에 10번째 줄보다 3줄 위인 tabPanel1.setSelectPanel을 호출할 수 있는건가요?
 
의문점은 6번째줄 tabMenu1.$tabMenu.on("tabSelect", function(e) {는 사용자 정의 이벤트입니다. 함수호출로 볼 수 있는건가요?
 
다른관점으로는 51번째 사용자 정의 이벤트가 호출된 이전에 10번째줄 tabPanel1 = tabPanel(".tab-contents")가 처음 문서 로딩 후 파싱단계를 거친 후여서 스택안에 들어있기 때문인가요?

<script> 
var tabPanel1 = null; 
$(document).ready(function() { 
  // 탭메뉴 코드가 동작할 수 있도록 tabMenu() 함수 호출 
  var tabMenu1 = tabMenu("#tabMenu1"); 
  tabMenu1.$tabMenu.on("tabSelect", function(e) { 
    tabPanel1.setSelectPanel(e.selectIndex); 
 }) 
 // 탭패널 기능 호출 
 tabPanel1 = tabPanel(".tab-contents"); 
}); 
// 탭메뉴 기능 구현하기 
function tabMenu(selector) { 
  var $tabMenu = null; 
  var $menuItems = null; 
  // 선택 한 탭메뉴를 저장할 변수 
  var $selectMenuItem = null; 
  // 요소 초기화, tabMenu() 함수 내부에서 사용할 공통 데이터는 모두 이곳에 작성해주세요. 
  function init() { 
    $tabMenu = $(selector); 
    $menuItems = $tabMenu.find("li"); 
 } 
 // 이벤트 등록은 모두 이곳에 작성해주세요. 
 function initEvent() { 
   $menuItems.click(function() { 
     setSelectItem($(this)); 
  }); 
} 
// 선택 메뉴 아이템 만들기 
function setSelectItem($item) { 
  if ($selectMenuItem) { 
    $selectMenuItem.removeClass("select"); 
 } 
 $selectMenuItem = $item; 
 $selectMenuItem.addClass("select"); 
 // 이벤트 발생 
 dispatchSelectEvent(); 
} 
// index번째 메뉴 아이템 선택 
function setSelectItemAt(index) { 
  var $item = $menuItems.eq(index); 
  setSelectItem($item); 
} 
// 이벤트 발생 
function dispatchSelectEvent() { 
  // 이벤트 객체 생성 
  var event = jQuery.Event("tabSelect"); 
  // 이벤트에 담아 보낼 데이터 연결 
  event.selectIndex = $selectMenuItem.index(); 
  event.$selectItem = $selectMenuItem; 
  $tabMenu.trigger(event); 
} 
init(); 
initEvent(); 
return { 
  $tabMenu : $tabMenu, 
  setSelectItemAt : setSelectItemAt 
} 
} 
// 탭패널 기능 구현하기 
function tabPanel(selector) { 
  var $tabPanels = null; 
  var $selectPanel = null; 
  function init(selector) { 
    $tabPanels = $(selector).find(".content"); 
 } 
 function setSelectPanel(index) { 
   if ($selectPanel) { 
     $selectPanel.removeClass("select"); 
  } 
  $selectPanel = $tabPanels.eq(index); 
  $selectPanel.addClass("select"); 
} 
init(selector); 
// 선택기능 리턴 
return { 
  setSelectPanel : setSelectPanel 
} 
} 
</script>

이 질문에 댓글 쓰기 :

답변 1

Document ready function에서 tabMenu와 tabPanel을 불러서 미리 설정을 해 놓습니다.

 

각각의 tabMenu와 tabPanel안에는 이벤트가 발생하면 무엇을 할 것인지,  패널이 선택되면 무엇을 할 것인지등을 셋업이 되겠죠..

 

47번째줄에 tabSelect라는 이벤트가 만들어지고, 그것을 트리거 되어서(6번째줄이 불러지고, 조건이 맞아서) 7번째 줄이 실행되는 구조인 것 같습니다.

 

Jquery를 잘 모르지만,  대략적인 동작은 위와 같을 것 같습니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 1

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT