tab menu - 함수 단위 Vs 프로토타입의 클래스 단위

함수단위와 프로토타입의 탭 메뉴 만들기

함수단위의 탭 메뉴

기본 마크업 구성

html

<ul id="tabMenu1">    
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet. Lorem ipsum dolor.</li>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet. Lorem ipsum dolor.</li>
</ul>

<ul id="tabMenu2">    
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet. Lorem ipsum dolor.</li>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet. Lorem ipsum dolor.</li>
</ul>

함수단위 탭 메뉴 로직

javascript

$(function() {
    tabMenu("#tabMenu1",0);
    tabMenu("#tabMenu2",1);
});

function tabMenu(selector, index) {
    // 요소 리스트
    var $tabMenu = null,
            $menuItem = null,
            $selectItem = null;

    // 요소 초기화
    function init(el) {
        $tabMenu = $(el);
        $menuItem = $tabMenu.find('li');
    }

    // 이벤트 등록
    function initEvent() {
        $menuItem.on('click', function () {
            setSelectItem($(this));
        })
    }

    // 해당 메뉴 아이템 선택하기
    function setSelectItem($menuItem) {
        // 기존 아이템 비활성화 처리하기
        if($selectItem) {
            $selectItem.removeClass('select');
        }

        // 신규 아이템 활성화 처리하기
        $selectItem = $menuItem;
        $selectItem.addClass('select');
    }

    // index 에 해당하는 메뉴 아이템 초기 설정하기
    function indexItemAt(index) {
        setSelectItem($menuItem.eq(index));
    }

    // 함수 호출
    init(selector);
    initEvent();
    indexItemAt(index);

}

함수 단위 프로그래밍의 단점은 함수가 호출될 때 마다 함수 내부에 동일한 함수와 변수가 만들어집니다.

프로토타입을 이용한 클래스 단위의 탭 메뉴

프로토타입을 이용하면 함수 단위 프로그래밍의 단점을 해결할 수 있습니다.

객체가 상속을 통한 동일한 공간이 만들어지기 때문에 공통으로 사용할 수 있습니다.

위의 함수 단위 코딩을 프로토타입을 이용한 클래스화 시켜보겠습니다.

javascript

$(function() {

    // 첫 번째 탭메뉴 인스턴스 생성
    var firstTab = new TabMenu("#tabMenu1");
    firstTab.indexItemAt(1);

    // 두 번째 탭메뉴 인스턴스 생성
    var secondsTab = new TabMenu("#tabMenu2");
    secondsTab.indexItemAt(0);

});

// CLASS Define
function TabMenu(selector) {
    this.$tabmenu = null;
    this.$menuItem = null;
    this.$selectItem = null;

    this.init(selector);
    this.initEvent();
}

// 프로토타입 그룹화
TabMenu.prototype = {
    // 요소 초기화
    'init' : function (el) {
        this.$tabmenu = $(el);
        this.$menuItem = this.$tabmenu.find('li');
    },

    // 이벤트 등록하기
    'initEvent' : function () {
        var _self = this;
        this.$menuItem.on('click', function () {
            _self.setSelectItem($(this));
        })
    },

    // 메뉴 아이템 선택 설정하기
    'setSelectItem' : function ($item) {
        // 기존 아이템 비활성화 처리하기
        if(this.$selectItem) {
            this.$selectItem.removeClass('select');
        }
        // 신규 아이템 활성화 처리하기
        this.$selectItem = $item;
        this.$selectItem.addClass('select');
    },

    // index 에 해당하는 메뉴 아이템 선택하기
    'indexItemAt' : function (index) {
        var $indexItem = this.$menuItem.eq(index)
        // 기존 메서드의 재사용
        this.setSelectItem($indexItem);
    }
}

Jaehee's WebClub