jquery 플러그인 만들기 (1)

 

jQuery 에 대한 기본적인 문법적 이해가 있다는 가정하에 문서를 작성합니다.

약 1년간 jQuery를 사용하면서 jQuery가 제공하는 자바스크립트 사용의 편의성에도 매우 감탄했지만, 정말 매력적이었던 부분은 플러그인에 대한 지원이었다.

한동안 남들이 만들어놓은 플러그인 들을 고맙게 가져다 썼지만, 어느 시점에서 부터 요구사항에 맞는 플러그인을 찾기가 쉽지 않았다. (이는 우리 사이트에서 jQuery를 필요로 하는 부분이 그만큼 많아졌다는 것에 대한 반증이기도 하다.) 

요구사항에 맞춰서 UI를 만들다 보니 기존에 사용하던 플러그인을 대충 수정하면서 사용했지만, 점점 더 높아지는 요구사항에 아예 플러그인을 새로 만드는게 더 나아보였다.

겸사겸사 간단하게 플러그인을 만드는 방법을 작성해볼까 한다.

기본적으로 jQuery를 사용함에 있어서 사용하는 플러그인의 타입은 크게 아래 두 종류 이다.

1. $('div').plugin_name();
2. $.plugin_name();

1번은 셀렉터를 이용하여 메소드체인을 생성할 수 있고, 2번은 그냥 function 이다.

1. $('div').plugin_name(); 를 만들어보자.

jquery.test-plugin.js

$.fn.Alert = function() {
	return alert(this[0].id);
}

div tag를 셀렉터로 하여 정보를 출력하는 간단한 플러그인이다.

위와 같이 작성하면 간단하게 끝난다.

위 메소드에서 두가지를 살펴볼 수 있는데, 하나는 this 이고, 나머지 하나는 그 this를 리턴하는 것이다.

this는 예상하는대로 div 엘리먼트에 대한 참조이고, this를 리턴하는 이유는 메소드체인을 사용하기 위함이다.

this 에 대한 프로퍼티를 확인해보면, 할당된 Method 들이 있고, 이 div 엘리먼트에 대한 프로퍼티를 담고있는 배열( [0] )이 있다. 

div 엘리먼트가 하나라고 가정할 수 없으니, 배열로 엘리먼트를 구분하는 것이다. (현재는 html 상의 div가 한개 뿐이므로, 배열도 한개만 나온다. div 엘리먼트가 여러개라면 배열 또한 그에 상응하게 나타난다.)

jquery의 강점중 하나는 메소드 체인을 사용할 수 있다는 것인데, 예를 들어서 $("div").Alert().fadeOut(); 과 같은 코드를 사용할 수 있다는 것이다.

메소드 체인이 끊어지지 않게 하기 위해서는 jquery 객체 (여기서는 this) 가 리턴되어 유지되는 것이 중요하다.

$.fn.Alert = function() {
	return this.each(function(i,k) {
		alert(k.id);
	});
}

그리고 div 와 같은 엘리먼트들은 배열(오브젝트) 이기 때문에 each 와 같은 순환문을 통하여 "사용하고 리턴될 수" 있어야 한다.

2. $.plugin_name(); 를 만들어보자.

jquery.test-plugin2.js

$.Alert = function() {
	alert("plugin-test");
}

1번과 비교해서 fn 부분이 제거되고, return 되는 부분도 없다. 그냥 일반적인 함수 작성하듯 만들면 된다.(함수니까!) 하나의 기능만을 담당하는 것이라면 문제는 없다.

이는 아래와 같이 사용된다.