jQuery CSS 메소드 사용자 오버라이딩

jQuery CSS 메소드 사용자 정의 & 오버라이딩(Overriding)

jQuery css 메소드는 인자값으로 객체리터럴 또는 속성,값을 정의하지만 stylesheet 와 같이 border: 1px solid #fff; padding:2px 10px; 을 인자로 전달할 수 없습니다.

하지만 사용자 정의 오버라이딩을 통해 CSS에서 정의하는 방법으로 CSS 메소드에 인자값을 전달할 수 있도록 할 수 있습니다.

E.g.)   $('.selector').css('border: 1px solid #fff; padding:2px 10px;');

JavaScript

'use strict';

    /**
     * -----------------------------------
     * jQuery css 메서드 Inherit Overriding
     * -----------------------------------
     */

    // $.fn.css 를 상속 및 사용자 정의 오버라이딩하기 위해 클로저를 이용

    $.fn.css = (function () {

        // 원본 jQuery css 메서드에 정의된 로직을 보존하기 위해서 사용자 정의 $css 에 참조해 놓는다.
        // 즉, $.fn.css 원본을 사용자 정의 $.fn.$css 에 참조하고 return 함으로써
        // $.fn.$css 를 반환하더라도 $.fn.css 를 참조해 놓았기 때문에 상속 및 오버라이딩 할 수 있다.
        $.fn.$css = $.fn.css;
        // $.fn.css = (function(){})() 즉시 실행하면서 클로저로 인해  $.fn.$css = $.fn.css; 를 참조해 놓을 수 있다.
        // $.fn.css = function(){} 인 기존 로직를 보존하게 된다
        
        return function () {
            // css() 에 @param 첫번째를 체크한다.
            var arg = arguments[0];
            // 첫번째 인자가 문자열이고 인자로 넘겨받은 문자열 중에 :(콜론)이 있고 두번째 인자가 없다면
            // 즉, css('border:1px solid red;') 와 같이 문자열이면서 :(콜론) 이 있고 두번째 인자가 설정되지 않는다면
            if (typeof arg === 'string' && arg.match(/:/) && !arguments[1] ) {
                $.each(this, function (index, el) { // this (jQuery instance object)
                    // el (DOMElement)
                    el.style.cssText = arg;
                });
            // 첫번째 인자가 문자열이고 두번째 인자가 없다면
            } else if (typeof arg === 'string' && !arguments[1]) {
                // 0 번째 인자만 전달한다.
                return $.fn.$css.call(this, arg);
            } else {
                // 위 조건이 만족하지 않는다면 모든 @param 을 전달하도록 한다.
                return $.fn.$css.apply(this, arguments);
            }
            // 체이닝 설정
            return this;
        }

    })();

extend 를 이용한 완성 코드

위의 코드를 extend를 사용하여 리팩토링하였습니다.

See the Pen css 메소드 오버라이딩 by jaeheekim (@jaehee) on CodePen.