절차 지향 방식에서 객체지향 방식(함수기반 클래스,프로토타입방식 클래스) 으로 리팩토링하기

함수기반 클래스, 프로토타입 방식 클래스

절차 지향 방식 코드

jQuery(function($){

    console.time('성능');
    /* Radio */
    var radioBox = $('.ctm-radio');
    var addClassRadio = function($input){

        $input.each(function(){
            if ($(this).prop('checked')){
                if ($(this).parent().hasClass('ctm-radio')){
                    var radioName = $(this).attr('name');
                    $('input[name='+radioName+']').parent('.ctm-radio').removeClass('checked');
                }
                $(this).parent().addClass('checked').siblings().removeClass('checked');
            }
        });
    };
    radioBox.on('change', 'input', function(){
        addClassRadio($(this));
    })
    console.timeEnd('성능');
});

객체 지향 방식 (함수기반의 클래스)

(function (global, $) {

    console.time('성능');
    var ctmRadio = customRadio();
    ctmRadio.init('.ctm-radio')

    function customRadio() {
        if (this === window) {
            return new customRadio;
        }
        // 요소 정의
        this.radioBox = null;
        this.chk = null;

        // 요소 초기화
        this.init = function (el) {
            this.radioBox = $(el);
            this.chk = 'checked';

            // 초기화 이벤트 호출출
            this.initEvent();
        };

        this.addClassRadio = function (ipt) {
            var $input = $(ipt),
                    _self = this;
            $.each($input, function(index, el){
                var _$this = $input.eq(index);
                if (_$this.prop('checked')){
                    if (_$this.parent().hasClass('ctm-radio')){
                        var radioName = _$this.attr('name');
                        $('input[name='+radioName+']').parent('.ctm-radio').removeClass(_self.chk);
                    }
                    _$this.parent().addClass(_self.chk).siblings().removeClass(_self.chk);
                }
            });
        };

        this.initEvent = function () {
            var _self = this;
            this.radioBox.on('change','input', function () {
                _self.addClassRadio(this);
            })
        }

    }
    console.timeEnd('성능');

})(window, window.jQuery)

객체 지향 방식(프로토타입방식의 클래스)

(function(global, $){

    console.time('성능');
    $(runRadio);

    function runRadio() {
        var radio = RadioCustom();
        radio.init('.ctm-radio');

    }
    // CLASS RadioCustom Definition
    function RadioCustom() {

        if(this === window) return new RadioCustom;

        // Element definition
        this.$radioBox = null;
        this.chk = null;

    }
    // RadioCustom 초기화
    RadioCustom.prototype.init = function (el) {

        this.$radioBox = $(el);
        this.chk = 'checked';
        this.initEvent();

    };
    // RadioCustom Call Event
    RadioCustom.prototype.initEvent = function () {
        var objThis = this;
        this.$radioBox.on('change', 'input', function () {
            objThis.addClassRadio(this);
        })
    };
    // RadioCustom class toggle
    RadioCustom.prototype.addClassRadio = function (ipt) {
        var $input = $(ipt),
                _self = this;
        $.each($input, function (index, el) {
            var _$this = $input.eq(index);
            if (_$this.prop('checked')) {
                if (_$this.parent().hasClass('ctm-radio')){
                    var radioName = _$this.attr('name');
                    $('input[name='+radioName+']').parent('.ctm-radio').removeClass(_self.chk);
                }
                _$this.parent().addClass(_self.chk).siblings().removeClass(_self.chk);
            }
        })
    };
    console.timeEnd('성능');
})(window, window.jQuery);

지금까지 절차지향 방식을 두가지 타입의 객체 지향방식으로 리팩토링해 보았습니다.

혹시 이런 의문점이 생길 수도 있습니다. 객체지향방식 코드는 더 길어지고 가독성이 떨어지는거 아닌가 하고 말입니다. 

절차지향방식으로 지금껏 코딩하시는 분들이 많이 있을 것입니다. 저 역시도 얼마전까지는 함수단위 기반의 절차지향이 익숙했습니다.

하지만 객체지향은 모듈별 관리를 할 수 있다는 점에서 유지보수 측면이나 가독성은 월등히 좋습니다. 다만 익숙하지 않을 뿐입니다.

제이쿼리 코드 또한 프로토타입 기반의 코드로 집약되어 있습니다. 그리고 위의 코드를 실행하면 콘솔창에서 성능시간을 체크하도록 해 놓았는데 확인해보면 프로토타입기반의 클래스가 성능은 훨씬 빠릅니다. 코드는 길지만 더 빠르다는 것입니다. 

성능최적화와 유지보수 측면을 고려한다면 당연히 프로토타입을 이용해야 합니다. 물론 모든 기능을 프로토타입을 이용한다는 것이 아니라 재사용성 있는 코드들은 적어도 함수기반의 클래스나 좀 더 나아간다면 프로토타입을 이용하는 것이 더 낫다고 판단되어집니다.

Jaehee's WebClub