[jQuery] jQuery 플러그인 제작

※ 유틸리티? 플러그인?

1. 유틸리티 : 인스턴스를 생성하지 않고 클래스에 직접 접근해 도움을 주는 기능
2. 플러그인 : 인스턴스를 생성하여 사용하고 특정 기능을 재사용하고자 할 때 사용하는 포장 기능

※ jQuery 플러그인 소개

 - 접근법

    jQuery.유틸리티(); 또는 $.유틸리티();

 - 자주 사용하는 유틸리티들 

1. trim() : 공백제거
2. index() : 인덱스 탐색
3. extend() : 객체 병합
4. data() : HTML Element에 <key : value> 형태로 데이터를 저장/조회

jQuery 유틸 참조 : http://api.jquery.com/category/Utilities/

※ jQuery 유틸리티 만들기

 

- 구조

(function($){

    $.유틸리티 = function(){

        //유틸리티 기능 구현

    }

})(jQuery);

*일반적인 jQuery 유틸리티와 플러그인은 위의 문법에 맞게 구현

 $은 jQuery 클래스 자체를 나타낸다.

// 유틸리티 사용

jQuery.유틸리티();

※ jQuery 플러그인 만들기

 - 구조

(function($){

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

        this.each(function(index){

            //플러그인 기능구현

        }

        return this;

    }

})(jQuery);

*플러그인은 jQuery의 fn이란 곳에 플러그인을 생성

 fn은 prototype을 줄여 쓴 닉네임 이다.

 즉 jQuery플러그인은 jQuery 인스턴스의 메서드일 뿐 (이러한 인스턴스 메서드에 관한 설명은 

 자바스크립트 클래스 (1), (2)란 글에 나와있다.

 

ex) 

 function jQuery(){

     ...

 }

 jQuery.prototype.플러그인 이름 = function(){

     ...

 }

*this.each를 쓰는 이유

 $("태그").플러그인이름() 이런식으로 사용할 때 이 태그가 하나가 될 수도 있고 여러개가 될 수도있다.

 each를 통해 $()메서드로 만들어진 jQuery객체의 모든 태그들에 플러그인 기능을 적용시킬 수 있다.

*return this를 하는 이유

 jQuery 는 체인구조가 가능하다. 

 즉 $(선택자).플러그인이름().플러그인이름().on(....) 이런식 이라던가

 var $obj = $(선택자);

 $obj.on(.....);

 $obj.플러그인이름(); 과 같은 방식의 호출이 가능하다.

 이러한 호출방식이 가능하게 하려면 this를 리턴해주어 플러그인이 기능이 적용된 객체를 리턴해야 한다.

※ 함수기반 플러그인과 클래스기반 플러그인

- 함수기반 플러그인은 함수기반 코딩과 마찬가지로 플러그인 내부 메서드 중복 생성이 되기 때문에 클래스기반의 플러그인을 만들면 함수기반 플러그인의 단점을 커버할 수 있다.

 - 함수 기반 플러그인의 형태

(function($){

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

        this.each(function(index){

            //기능 구현

            function method1(){

                ...

            }

        

            function method2(){

                ...

            }

            function method3(){

                ...

            }

         

            .....

    

            //메서드 호출 위치는 상황에따라 유동적으로...

            method1();

            method2();

            method3();

            ...

        })

        return this;

    }

})(jQuery)

 - 클래스 기반 플러그인의 형태

(function($){

    //클래스 생성 및 클래스에서 사용될 메서드를 프로토타입으로 생성

    function UserClass(selector){

        ...

        this.method1();

        this.method2();

        this.method3();

        ...

    } 

    UserClass.prototype.method1 = function(){

        ...

    }

    

    UserClass.prototype.method2 = function(){

        ...

    }

    UserClass.prototype.method3 = function(){

        ...

    }

    ....

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

        this.each(function(index){

            

            //인스턴스 생성        

            var userClass= new UserClass(this);

        });

        

        return this;

    }

})(jQuery)