jQuery (제이쿼리) - jQuery extend()

제이쿼리에는 이미 존재하는 함수를 재정의해서 사용하거나 함수를 새로 추가할 수 있는 extend() 함수가 존재한다.

사실 두 가지 사용 방법이 다른 건 아니고 똑같은 사용 방법이지만 어떻게 사용하냐에 따라서

함수를 재정의 하게 되거나 함수를 새로 추가 하게 되는 결과가 나온다. 마찬가지로 간단한 예제로 살펴보자.

$(function() {
	alert($("p").eq(1).html());
});

function changeMethod() {
	$.fn.extend({
    	eq : function(num) {
        	return "선택된 인덱스는 " + num + "입니다.";
        }
    });
    
    alert($("p").eq(1));
    // eq() 의 기능을 재정의했기 때문에 밑의 함수는 사용할 수 없다. 
    //alert($("p").eq(1).html());
}

어서오세요!
루 프란체님의 제국입니다!

위의 소스는 제이쿼리 함수 중 eq() 함수의 기능을 재정의 한 것이다.

document.ready 구문에서 사용한 eq() 함수는 아직 재정의가 되지 않은 시점이기 때문에 루 프란체님의 제국입니다! 라는 alert 창이 발생하고

변경 버튼을 눌러 eq() 함수를 재정의 한 시점부터는 선택된 인덱스는 1 입니다. 라는 alert 창이 발생한다.

여기에서 주의할 점이 있는데 eq() 함수를 재정의하면서 String 값을 리턴하도록 변경했기 때문에 기존 html() 함수는 사용할 수 없게 된다.

사실 새로운 기능이 필요할 때 기존 함수를 재정의 하는 것보다 새로운 함수를 추가하는 것이 기존의 기능에 영향을 미치지 않고

유지보수 측면에서도 좋기 때문에 새로운 함수를 추가해서 사용하는 것이 효율이 더 좋다.

이번에는 새로운 함수를 추가해보도록 하자.

$(function() {
    $.fn.extend(
        {
            new_eq : function(a) { 
                    return this[a].innerHTML;
                }
        }
	);
    
    alert($("p").new_eq(1));
});

위 소스는 확장 기능을 통해 새로운 함수를 추가한 것인데 new_eq() 라는 함수를 정의하면서 a 라는 파라미터를 받도록 했고

또한 선택자에 해당 함수를 사용하면서 1 이라는 파라미터를 넘겼기 때문에 $("p").eq(1).html() 과 같은 효과가 나도록 했다.