중복된 함수 이름 문제 해결(jQuery 코드 기준)

팀 프로젝트를 하다보면 각자 기능 구현을 하고 보면 함수의 이름이 같은 경우가 있다.

 

나도 팀프로젝트를 하다보면 아래와 같은 형식으로 함수를 생성한다.

var init = function() {
	..
}
var save = function() {
	..
}

 

이렇게 사용하다보면 함수가 겹치는 경우가 생겨서 먹통이 되는 경우가 있다.

이유는 브라우저의 스코프는 공용공간으로 쓰이기 때문에 나중에 로딩된 같은 이름의 함수가 먼저 로딩된 함수를 덮어쓰게 된다.

 

이러한 것을 방지하고자 아래와 같이 js의 유효범위를 만들어 사용한다.

test라는 객체를 만들어 해당 객체에서 필요한 모든 function을 선언하는 것이다. 이렇게 되면 겹칠 위험이 사라진다.

var test ={
    init : function() {
        var _this = this;
        $('#btn-save').on('click', function() {
            _this.save();
        });
    },
    save : function() {
        var data = {
            title: $('#title').val(),
            author : $('#author').val(),
            content : $('#content').val()
        };
        $.ajax({
            type: 'POST',
            url: '/api/test',
            dataType: 'json',
            contentType: 'application/json; charset=utf-8',
            data: JSON.stringify(data)
        }).done(function() {
            alert('글이 등록되었습니다.');
            window.location.href ='/';
        }).fail(function(error) {
            alert(JSON.stringify(error));
        });
    }
};
test.init();