jQuery - $.fn 확장 (사용자 정의 메소드)

1. $.fn 확장이란

jQuery 셀렉터를 이용하여 메소드를 추가할 때 사용되며, $.fn.메소드명으로 정의합니다.

$.fn.test = function() {
	// 키워드 this는 $("셀렉터")를 통해 들어온 jQuery Object입니다.
    if(this.is("button")) {
    	$(this).css("background-color", "red");
    }
}

위의 클릭한 태그가 버튼일 경우 버튼의 바탕색이 빨강색으로 변하는 예제입니다.

 

 

 

2. $.fn 확장의 주의할 점

1) 다른 jQuery 라이브러리와 사용 중일 경우 $.fn의 변수가 충돌할 수 있습니다. 이러한 충돌을 피하기 위해서 즉시 호출 함수 표현을 사용합니다.

(function ($) {

} (jQuery));

즉시 호출 함수 표현을 사용하여 $.fn 확장(사용자 정의 메소드)가 private변수를 가질 수 있게 합니다.

(function ($) {
  $.fn.test = function() {
      // 키워드 this는 $("셀렉터")를 통해 들어온 jQuery Object입니다.
      if(this.is("button")) {
          $(this).css("background-color", "red");
      }
  }
} (jQuery));

 

2) return this 유무

$.fn 확장에 return this 구문이 없어도 되지만, 없다면 jQuery 메소드를 이어서 호출할 수 없습니다.

예시) $.fn.test.css("color", "blue"); 와 같이 $.fn.test뒤의 메소드를 실행할 수 없습니다.

(function ($) {
  $.fn.test = function() {
      // 키워드 this는 $("셀렉터")를 통해 들어온 jQuery Object입니다.
      if(this.is("button")) {
          $(this).css("background-color", "red");
      }
      return this;
  }
} (jQuery));

위와 같이 return this; 반환하면 이어서 메소드를 호출할 수 있습니다.

 

 

 

3. $.fn.메소드와 $.메소드의 차이점

$.fn.메소드는 사실 프로토타입 추가 기능이다. $.fn === jQuery.prototype가 true이며, 사용자 정의 함수란jQuery.prototype에 함수를 추가하는 것입니다.

반면, $.메소드 형식은 jQuery에 함수를 추가하는 것이지 프로토타입을 선언하는 것이 아닙니다.

var jq = new jQuery();와 같이 제이쿼리를 선언해서 사용할 경우 $.fn.메소드는 호출할 수 있지만, $.메소드 형식은 호출할 수 없습니다. 

또 다른 차이점은 $.fn.메소드은 제이쿼리 셀렉터(선택자) 이용해서 사용할 수 있지만 $.메소드는 제이쿼리선택자를 사용하지않습니다. 그렇기에 $.메소드는 선택자없이 호출할 경우 사용하시면 됩니다.

$.setColor = funtion() {
	$("button").css("background-color", "blue");
};

위와 같이 $.메소드 형식을 사용하면, 셀렉터(선택자) 없이 모든 button의 배경색을 파랑색으로 변경할 수 있습니다.

 

 

 

 

devmg.tistory.com/129