탭메뉴 함수 내부 여러 개의 중첩함수로 포장하기

01 기능분석

	<script>
    
		$(document).ready(function(){
			// 탭메뉴 코드가 동작할 수 있도록 tabMenu() 함수 호출
			tabMenu("#tabMenu1");
			tabMenu("#tabMenu2");
		});

		function tabMenu(selector){
			var $tabMenu = null;
			var $menuItems = null;
			// 선택 한 탭메뉴를 저장할 변수
			var $selectMenuItem =null;

			// 요소 초기화
			$tabMenu = $(selector);
			$menuItems = $tabMenu.find("li");

			// 메뉴 항목에 클릭 이벤트 등록
			$menuItems.click(function(){
				// 기존 선택 메뉴 항목이 있으면 비선택 상태로 만들기
				if($selectMenuItem!=null){
					$selectMenuItem.removeClass("select");
				}

				// 클릭한 메뉴 항목을 신규 선택 메뉴 항목으로 저장
				$selectMenuItem = $(this);
				// 선택 상태로 만들기
				$selectMenuItem.addClass("select");
			})

		}


	</script>

하나의 함수에 기능이 몇개가 들어있는지 분류한다.

tabMenu라는 하나의 함수에 3개의 기능이 들어있다.

 

1_ 소스초기화
$tabMenu = $(selector);
$menuItems = $tabMenu.find("li");

 

2_ 이벤트 초기화
$menuItems.click(function(){

3_ 탭메뉴 선택처리
// 기존 선택 메뉴 항목이 있으면 비선택 상태로 만들기
if($selectMenuItem!=null){
$selectMenuItem.removeClass("select");
}

// 클릭한 메뉴 항목을 신규 선택 메뉴 항목으로 저장
$selectMenuItem = $(this);
// 선택 상태로 만들기
$selectMenuItem.addClass("select");

 

 

 

 

 

02 함수만들기

	<script>
    
		$(document).ready(function(){
			// 탭메뉴 코드가 동작할 수 있도록 tabMenu() 함수 호출
			tabMenu("#tabMenu1");
			tabMenu("#tabMenu2");
		});

		function tabMenu(selector){
			var $tabMenu = null;
			var $menuItems = null;
			// 선택 한 탭메뉴를 저장할 변수
			var $selectMenuItem =null;

			// 요소 초기화
			$tabMenu = $(selector);
			$menuItems = $tabMenu.find("li");

			// 메뉴 항목에 클릭 이벤트 등록
			$menuItems.click(function(){
				// 기존 선택 메뉴 항목이 있으면 비선택 상태로 만들기
				if($selectMenuItem!=null){
					$selectMenuItem.removeClass("select");
				}

				// 클릭한 메뉴 항목을 신규 선택 메뉴 항목으로 저장
				$selectMenuItem = $(this);
				// 선택 상태로 만들기
				$selectMenuItem.addClass("select");
			})
            
            // 요소 초기화
			function init(){

			}

			// 이벤트 초기화
			function initEvent(){

			}

			// 탭메뉴 선택 처리
			function setSelectItem(){

			}

		}


	</script>

각각의 기능을 넣어줄 함수를 중첩함수로 추가해준다

 

 

 

 

 

 

 

03. 코드담기

 

	<script>

		$(document).ready(function(){
			// 탭메뉴 코드가 동작할 수 있도록 tabMenu() 함수 호출
			tabMenu("#tabMenu1");
			tabMenu("#tabMenu2");
		});

		function tabMenu(selector){
			var $tabMenu = null;
			var $menuItems = null;
			// 선택한 탭메뉴를 저장할 변수
			var $selectMenuItem =null;

			// 요소 초기화, tabMenu() 함수 내부에서 사용할 공통 데이터는
			// 모두 이곳에 작성해주세요.
			function init(selector){
				$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");
			}

			init(selector);
			initEvent();
		}
	</script>

 

각각의 코드를 생성한 중첩함수에 넣어준다.

init(selector);
initEvent();

함수호출을 넣어준다.