함수 호이스팅 간단한 질문드립니다.
본문
질문)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를 잘 모르지만, 대략적인 동작은 위와 같을 것 같습니다.
답변을 작성하시기 전에 로그인 해주세요.
