[jQuery] jQuery 플러그인 그룹

※ 플러그인 그룹이란?

 - jQuery 플러그인을 만들다 보면 하나 이상의 연관된 플러그인을 만들게 된다. 

   이런 플러그인들간의 그룹을 플러그인 그룹이라 한다.

   앞 글(jQuery 플러그인 제작)에서 jQuery플러그인을 프로토타입 클래스 기반으로 만들때는 아래와 같다고 했다.

(function($){

    //클래스 생성

    function UserClass(selector){

        //변수 설정

        this.value1 = 값;

        this.value2 = 값;

        ...

    }

    //메서드 정의

    UserClass.prototype.method1 = function(){

        //기능구현

    }

    UserClass.prototype.method2 = function(){

        //기능구현

    }

    UserClass.prototype.method3 = function(){

        //기능구현

    }

    //플러그인 생성

    $.fn.플러그인이름 = function(속성값){

        //플러그인 기능 구현            

              (여기서 this는 해당 플러그인을 호출한 jQuery객체)

        this.each(function(index){

            //클래스 인스턴스 생성 

            var userClass = new UserClass(this);

        });

        return this;

    }

}) (jQuery);

위의 예처럼 플러그인이 하나라면 문제가 없지만 만약 두개이상의 플러그인이 있는데 하나의 인스턴스를 공유하여 사용해야 한다면 어떨까? 

플러그인 안의 인스턴스는 지역변수라 다른 플러그인에서는 사용할 수없다.

탭메뉴에 관한 플러그인이 두개 있다고 생각해보자. 

하나의 플러그인은 탭메뉴를 생성하는 기능을 가진 플러그인, 다른 플러그인은 선택된 탭메뉴의 색을 변경시키는 플러그인이다.

플러그인에서 사용할 클래스는 탭메뉴와 관련된 기능과 프로퍼티를 가지고 있다.

이러한 형태의 플러그인 그룹에서 탭메뉴의 인스턴스를 공유하는 방법은 아래와 같다.

(function($){

    function TabMenu(select){

                

        this.프로퍼티1 = 값;

        this.프로퍼티2 = 값;

        ...

        this.init();

    }

    TabMenu.prototype.init = function(){

        this.createTabMenu();

    }

    

    TabMenu.prototype.createTabMenu = function(){

        //탭메뉴 생성기능 구현

        ex) DB에서 탭메뉴 목록을 가져와 세팅한다.

    }

    TabMenu.prototype.selectTabMenuItem = function(selectedItemIndex){

        //탭메뉴 클릭시 기능 구현

        ex) 파라미터를 참조해 탭메뉴를 클릭시 클릭한 메뉴의 색이 변한다.

    }

    

    $.fn.tabMenu = function(){

        this.each(function(index){

            //인스턴스 생성시 init에서 탭메뉴를 생성하게 만들었다.

            var tabMenu =  new TabMenu();      

 //data()를 통해 tabMenu 인스턴스를 저장.

            $(this).data("objTabMenu" , tabMenu);

        });

        return this;

    }

    $.fn.selectItem = function(idx){

        this.each(function(index){

            

            //여기서는 tabMenu플러그인에서 생성된 인스턴스를 사용해서

            그 인스턴스 내부의 메서드를 이용해야 한다.

            var tabMenu = $(this).data("objTabMenu");

            if(tabMenu){

                tabMenu.selectTabMenuItem(index);

            }

        });

        return this;

    }

})

$(document).ready(function(){

    var tabMenu = $("#tabMenu");

    tabMenu.tabMenu().selectItem(1);

})