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

$.fn

$("a").text("바로가기");

이렇게 jQuery Selector 를 이용하는 메소드를 추가하려면 $.fn.메소드명 을 통해 추가하면 된다.

예제) 값을 콘솔로 출력하는 함수 만들기

(function($) {
  $.fn.getPrint = function(){
      var value = this.val();
      console.log(value)
      //return this; 생략 가능.
  };
}(jQuery));

jQuery 에서 사용하는 $ 변수는 다른 라이브러리들도 많이 사용한다. 그래서 변수가 충돌하여 동작을 하지 않을 가능성이 항상 있다.(jQuery의 경우 $ 변수는 jQuery 변수의 별칭 임) 우리가 만드는 플러그인이 이러한 충돌을 피할 수 있도록 즉시 호출 함수 표현을 사용해서 감싸 준다.

(function ($) {

}(jQuery));

즉시 호출 함수표현을 사용하는 또 다른 주된 목적은 플러그인 자신의 private변수를 가질 수 있다는 것이다.

 

this란 $("셀렉터")를 통해 들어온 jQuery Object 를 뜻한다.

return 이 없는 함수는 return this를 생략해도 되지만 다음과 같이 jQuery 메소드를 이어서 호출 할 수 없다.

$("input").getPrint().show();

 

$.fn 의 최종 목적은 셀렉터를 이용할 수 있는 확장 메소드를 구현하는 것이다.

셀렉터를 이용하지 않는 $.ajax 와 같은 메소드 구현은 다음과 같다.

$.getPrint = function(){
	console.log('no Selector Fn');
};

 

출처: https://annotations.tistory.com/89