[STEP 01] 기초 플러그인 제작 가이드

jQuery Plugin 기초

제이쿼리 플러그인에 대한 기초 단계부터 심화단계까지 포스팅해 보겠습니다.

간단하게  class 를 붙였다 지웠다하는 radio 와 같은 역할을 하는 플러그인을 단계별로 작성해보도록 하겠습니다.

STEP 01

JavaScript

if (!$.fn.radioClass) {

    // $.fn 객체의 radioClass 메소드 정의
    // $ 가 jQuery 의 Alias(별칭)이듯이 fn 은 prototype 의 Alias(별칭) 입니다.
    // console.log($.fn === $.prototype); // true
    $.fn.radioClass = function(name) {


        // 플러그인 함수 내부에서 this 는 jQuery 인스턴스 객체를 가리킵니다.
        // $('li.selected').radioClass()의 경우, this는 $('li.selected')를 가리킵니다.
        // 플러그인이 연결된 jQuery 인스턴스 객체에 name 클래스 속성을 추가합니다.
        this.addClass(name);

        // radioClass 의 목적 그대로 형제 요소노드에서는 name 클래스 속성을
        // 제거해야 하니 형제 요소노드를 찾아 변수 $siblings 에 참조합니다.
        // jQuery 인스턴스 메소드 중, .siblings()는 형제 요소노드를 찾아서
        // 집합(jQuery 인스턴스 객체)을 반환합니다.
        var $siblings = this.siblings();

        // jQuery 유틸리티 메소드 $.each()를 사용하여
        // $siblings 집합을 탐색하여 수집된 요소노드 개수만큼 반복 처리합니다.
        // 쉽게 말해 반복 구문(for, while 문 등)을 사용.
        // ECMAScript v5 [].forEach() 문과 유사합니다. (전달인자 순서는 반대)
        $.each($siblings, function(index, item) {

            // $() 팩토리 함수를 가급적 사용하지 않는 것이 성능 고려에 있어 주요한 점이니, 
            // .eq() 인스턴스 메소드를 사용하여 수집된 $siblings 에서 index 에 해당되는 원소(item)을 꺼내
            // $siblings 에서 index 에 해당되는 원소(item)을 꺼내 $item 변수에 참조합니다.
            var $item =  $siblings.eq(index);

            // $item에 참조된 요소에 name 클래스 속성 값이 포함되어 있는지 확인합니다.
            // name 클래스 속성 값을 확인하는 이유는 성능 즉, DOM 탐색을 최소화하기 위함입니다.
            // 클릭한 곳에 class 가 반영되어 있을 것이고
            // 형제들 중에서 class 가 반영된 형제만 removeClass 를 한다는 것입니다.
            // class 가 반영되지도 않은 형제들까지 모두 removeClass 를 할 필요가 없기 때문이며
            // 형제들 모두 removeClass 를 한다면 DOM 탐색이 많아지기 때문에 그만큼 성능저하가 생기게 됩니다.
            if ( $item.hasClass(name) ) {

                // name 클래스 속성이 포함되어 있다면, 이를 제거합니다.
                $item.removeClass(name);
            }

            // 네이티브 DomScript 에서는 아래와 같은 방법을 사용합니다.
            // IE 10+ 이상 부분 지원합니다. (IE Edge 부터 완벽 지원)
            // if (item.classList.contains(name) ) {
            //  item.classList.remove(name);
            // }

        });

        // jQuery 체이닝(Chaning)을 고려한다면, this 를 반환합니다.
        // this는 jQuery 인스턴스 객체입니다.
        return this;

    }

}

$(function () {
    var lists = $('ul li');
    lists.on({
        'click' : function () {

            // 플러그인을 호출합니다.
            // this 는 DOM 객체를 가리키기 때문에 (this DOM 객체의 HTMLLIElement)
            // jQuery 래퍼객체로 감싸줌으로써 jQuery 의 인스턴스 객체를 생성합니다.
            $(this).radioClass('on');
        }
    })

});

위의 해당 코드를 STEP02, 03... 순으로  단계별 업그레이드 해 나가보도록 보겠습니다.

jaehee's webclub