jQuery 유틸리티 사용자 메소드 정의 - jQuery utility method

jQuery 유틸리티 사용자 메소드 정의하기

$.each(), $.data() 와 같은 유틸리티 메소드처럼 사용자 정의 유틸리티 메소드를 알아봅니다.

나만의 $.$() 유틸리티 메소드 정의

지금 작성하려고 하는 유틸리티 메소드는 요소를 탐색할 때 탐색했던 요소를 다시 탐색하지 않기 위한 메소드를 정의하려고 합니다.

이는 성능 최적화에 도움이 될 수 있을 것입니다.

다음의 코드는 $.$() 유틸리티 메소드를 만들고 현재 제이쿼리에서 제공되는 $.data() 유틸리티 메소드를 사용할 것입니다.

javascript

/**
 * ---------------------------------------------------------------------------
 * 요소를 탐색할 때 탐색했던 요소를 다시 탐색하지 않기 위한 유틸리티 메소드 설정
 * $.$(), $.data() 사용자 유틸리티 메서드를 정의
 * 목적 : 같은 Element 인지 아닌지를 체크하여 같은 Element 는 참조한다.
 * ---------------------------------------------------------------------------
 */

if (!$.$) {
    // $ 함수객체에 $ 메서드를 정의
    // $.$() DOMElement 를 인자로 받는다.
    $.$ = function (DOM_El) {
        // $.data() 메서드에 param DOM_El, '@this' 이 없다면
        if(!$.data(DOM_El, '$this')) {
            // $.data() 인자로 $.$() 의 인자로 받은 DOM_El, @this, $(DOM_El)인 jQuery 인스턴스 객체인 인자를 정의한다.
            $.data(DOM_El, '$this', $(DOM_El));
            // 처음에 DOMElement 가 넘어왔다면 인자 세개를 받아서 정의된다.
            // 하지만 같은 DOMElement 가 넘어온다면
            // 이미 return $.data(DOM_El, '@this') 가 반환되었기 때문에
            // 다시 조건문에서 $.data(DOM_El, '@this') 은 true 이므로
            // !(부정연산자)로 인해 false 가 되어 바로 참조 되어있는 $.data(DOM_El, '@this') 이 반환되는 결과가 나타난다.
        }

        return $.data(DOM_El, '$this');
        
    }
}

아래 코드는  위의 소스를 조금 더 간략하게 리팩토링한 결과입니다.

javascript

if (!$.$) {
    $.$ = function (DOM_El) {
        return $.data(DOM_El, 'this') ?
               $.data(DOM_El, 'this') : $.data(DOM_El, 'this', $(DOM_El));
    }
}

조금더 리팩토링해 봅니다.

javascript

if (!$.$) {
    $.$ = function (DOM_El) {
        return $.data(DOM_El, '@this') || $.data(DOM_El, '@this', $(DOM_El));
    }
}

See the Pen $.$() 사용자 정의 유틸리티 메소드 by jaeheekim (@jaehee) on CodePen.

유효성 검사를 추가한 $.$()

javascript

$.extend($, {
    '$': function(el) {
        // 유효성검사 (Validation)
        if (el.jquery) {el = el[0]; }
        if (typeof el === 'string') {el = $.selector(el); }
        if (!el || !el.nodeName) { throw new TypeError('타입오류: DOM객체 또는 $() 필요'); }
        // 처리 코드
        return $.data(el, 'this') || $.data(el, 'this', $(el));
    }
});

jQuery 버전 체크와 $.log() 사용자 유틸리티 메소드

다음의 코드는 jQuery의 버전을 체크하고 console.log() 와 같은콘솔 기록을 보여주는 $.log() 를 작성해 보겠습니다.

javascript

'use strict';

/**
 * ---------------------------------------------------
 version 프로퍼티를 추가하여 jQuery 의 버전을 체크합니다.
 * ---------------------------------------------------
 */
if(!$.version) {
    $.version = $().jquery;
}


/**
 * ------------------------------------
 * console.log() 를 $ 함수에 추가합니다.
 * ------------------------------------
 */
if( !$.log ) {
    $.log = function (arg) {
        if(window.console) {
            console.log(arg);
        }
    }
}

// Usage
$.log($.version);

jQuery 유틸리티 메소드 확장(extend)

위에서 정의한 유틸리티 메소드를 $.extend() 사용하여 확장해 봅니다.

javascript

/**
 * --------------------------------
 * jQuery 유틸리티 메소드 확장
 * --------------------------------
 */
$.extend($, {

    'version': $.fn.jquery,

    '$': function(el) {
        // 유효성검사 (Validation)
        if (el.jquery) {el = el[0]; }
        if (typeof el === 'string') {el = $.selector(el); }
        if (!el || !el.nodeName) { throw new TypeError('타입오류: DOM객체 또는 $() 필요'); }
        // 처리 코드
        return $.data(el, 'this') || $.data(el, 'this', $(el));
    },

    'log': (function(){
        if( console && console.log ) {
            return function() {
                console.log.apply(console, $.makeArray(arguments));
            };
        }
    }())

});

jQuery 애니메이션 속도 확장하기

jQuery 의 애니메이션에 사용되는 속도의 기본값은 default: 400, slow: 600, fast: 200 으로 구성되어 있습니다.

이 값들 이외에 추가로 확장해 보는 코드는 아래와 같습니다.

javascript

/**
 * --------------------------------
 * jQuery 애니메이션 속도 확장
 * = jQuery.fx.speeds 확장
 * --------------------------------
 */

$.extend($.fx.speeds, {
    'very-fast' : 100,
    'normal'    : 400,
    'very-slow' : 800,
    '1s'        : 1000
});

console.log($.fx.speeds);
// { 1s: 1000, _default: 400, fast: 200, normal: 400, slow: 600, very-fast: 100, very-slow: 800}

/* 애니메이션 속도값을 동적으로 변경하기 */
$.fx.speeds['very-fast'] = 50;
$.fx.speeds['very-slow'] = 900;
$.fx.speeds['1s'] = 1000;