jQuery 플러그인 1 - 기본적인 플러그인 만들기

jQuery 플러그인은 jQuery의 프로토타입 객체를 확장하는 새로운 메소드를 추가하는 것입니다. 우리가 새로 추가한 기능은 jQuery의 모든 기능을 상속 받아 바로 사용할 수 있습니다.

 

jQuery에 기능을 추가한다는 개념이지만, 우리가 사용할 때는 jQuery의 기능을 모두 사용할 수 있는 우리의 기능을 만든다고 생각하면 되겠습니다. 물론 jQuery 플러그인으로 기능을 만들지 않고 직접 기능을 수행하는 클래스를 만들고, 필요한 곳에  jQuery를 사용하도록 하는 방법도 있습니다. 어떤 방법으로 만들지는 자신의 선택이겠습니다. 자신이 편리한 방법으로 만들면 될 것 같습니다.

 

필요에 의해 jQuery플러그인을 만들어야 겠다고 생각을 했다면, 먼저 미리 만들어져 있는 것들중에 같은 기능을 하는 프로그램이 있는지 찾아보는것도 좋은 생각일 것입니다. 요즘 프로젝트들은 맨땅에 헤딩하면서 기간내에 끝낼 수 있는게 없는것 같습니다. 최대한 기능이 구현되어 있는 프레임웍 이나 공통 모듈들을 사용해가면서 해도 시간이 모자랄 정도로 빡빡하게 일정이 나오는것 같습니다.

 

다음 사이트와 같은 곳에서 필요한 플러그인이 있는지 찿아볼 수 있겠습니다.

 

http://plugins.jquery.com/

http://www.jqueryrain.com/

http://www.htmldrive.net/

http://www.unheap.com/

 

 

1. jQuery의 기본 동작 방식

 

플러그인 만들기를 시작하기 전에 jQuery의 기본 동작 방식을 알아 보겠습니다.

 

$("a").css("color", "red");

 

- 이 코드는 먼저 $ 함수를 사용하여 모든 <a> 태그를 선택합니다.

 

- ( $("a"); ) 이 함수는 실행후 jQuery 객체를 반환합니다. 반환된 jQuery 객체에 대해서 .css("color", "red") 를 실행해서 색깔 스타일을 red 로 지정합니다.

 

- 이때 jQuery 객체는 $.fn 객체로부터 필요한 메소드(.css() 등)를 가져오게 됩니다.

 

- 우리가 jQuery 플러그인을 만든다는 것은 $.fn 객체에 새로운 메소드를 만들어 넣는것이 됩니다.(실제 $.fn 은 $.prototype 입니다.)

 

 

2. 기본적인 플러그인 작성

 

아래 코드는 greenify() 라는 이름의 간단한 플러그인을 만드는 코드 입니다. 기능은 페이지내의 모든 <a> 태그, 즉, 모든 링크의 색깔을 green 색으로 바꾸게 됩니다.

 

// 플러그인 정의
$.fn.greenify = function() {
	this.css("color", "green");
};

// 플러그인 호출
$("a").greenify();

 

플러그인 정의 내에서 .css() 함수를 호출할때 $(this) 가 아니라 this.css() 로 호출 합니다. 이것은 greenify 함수가 .css() 함수와 같은 객체의 일부분이기 때문입니다.(여기에서 this 는 jQuery 객체가 됩니다.)

 

 

※ 참고 - $(this)와 this 의 차이점

 

this 라는 키워드는 자기 자신을 가리키는 객체 참조 입니다. 자바스크립트에서 this를 사용할 때 주의해야 할점은 현재 실행되고 있는 scope 에서의 자신을 가리킨다는 것입니다. 다음 코드를 보겠습니다. id가 btn 인 요소를 클릭했을때 실행될 코드 입니다. 클릭했을때 실행되는 function(){} 에서 this 는 클릭된 요소가 됩니다. $(this) 는 this가 가키리는 요소를 감싼 jQuery 객체를 만들기 위해서 사용됩니다.

 

$("#btn").click(function() {
	this;    // id가 btn 인 요소 자체가 됩니다.
	$(this); // id가 btn 인 요소는 가지고 있는 jQuery 객체가 됩니다.
});

 

 

 

3. 메소드 체이닝(Chaining)

 

jQuery를 사용할 때 선택된 요소에 대하여 몇가지 작업을 링크하여 사용하는 경우가 많습니다. 이것은 메소드가 jQuery 자신을 반환하기 때문입니다. 우리의 플러그인이 이렇게 사용될 수 있도록 하는 방법은 메소드 끝에서 자신을 반환하도록 하면 됩니다.

 

$.fn.greenify = function() {
	this.css( "color", "green" );
	return this;
}

$("a").greenify().addClass("greenified");

 

 

4. $ 별칭을 보호하고 범위(Scope)를 추가하기

 

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

 

(function($) {
	$.fn.greenify = function() {
		this.css("color", "green");
		return this;
	};
}(jQuery));

 

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

 

(function($) {
	var shade = "#556b2f";

	$.fn.greenify = function() {
		this.css("color", shade);
		return this;
	};
}(jQuery));

 

 

5. 플러그인 풋프린터(Footprint)를 최소화

 

다음과 같이 하나의 플러그인을 위해서 여러개의 함수 이름을 사용하는 것은 다른 플러그인이 이름을 사용할 기회를 줄이므로 파라미터를 사용해서 하나의 이름으로 사용하는 것이 좋습니다.

 

(function($) {
	$.fn.openPopup = function() {
		// 팝업을 여는 코드.
	};
    
	$.fn.closePopup = function() {
		// 팝업을 닫는 코드.
	};
}(jQuery));

 

파라미터를 사용하여 하나의 이름을 사용합니다.

 

(function($) {
	$.fn.popup = function(action) {
		if(action === "open") {
			// 팝업을 여는 코드.
		}
		if(action === "close") {
			// 팝업을 닫는 코드.
		}
	};
}(jQuery));

 

 

6. each() 메소드의 사용

 

여러개의 요소가 선택되었을 경우 각 요소에 대해 작업을 수행하는데 .each() 메소드를 사용합니다.

 

$.fn.myNewPlugin = function() {
	return this.each(function() {
		// 각 요소에 대해 작업을 합니다.
	});
};

 

 

7. 옵션을 받아서 사용하기

 

플러그인을 커스터마이즈 할 수 있도록 옵션을 받아서 사용하도록 합니다.

 

(function($) {
	$.fn.greenify = function(options) {

		// 옵션에 기본값을 주는 간단한 방법입니다.
		var settings = $.extend({
			// 옵션의 기본 값입니다.
			color: "#556b2f",
			backgroundColor: "white"
		}, options );

		// settings 변수를 사용해서 작업합니다.
		return this.css({
			color: settings.color,
			backgroundColor: settings.backgroundColor
		});
	};
}(jQuery));

$("div").greenify({
	color: "orange"
});

 

 

8. 플러그인 예제

 

<a> 요소에 href 속성값을 같이 출력되게 하는 예제 입니다.

 

(function($) {
	$.fn.showLinkLocation = function() {
		this.filter("a").each(function() {
			var link = $(this);
			link.append(" (" + link.attr("href") + ")");
		});
		return this;
	};
}(jQuery));

// 플러그인 사용 예:
$( "a" ).showLinkLocation();

 

플러그인 적용 결과 입니다.

 

<!-- 플러그인 적용 전의 모습 입니다: -->
<a href="page.html">Foo</a>

<!-- 플러그인 적용후의 모습 입니다: -->
<a href="page.html">Foo (page.html)</a>

 

위의 플러그인은 다음과 갈이 최적화 할 수 있습니다.

 

(function($) {
	$.fn.showLinkLocation = function() {
		this.filter("a").append(function() {
			return " (" + this.href + ")";
		});
		return this;
	};
}(jQuery));

 

출처 : https://learn.jquery.com/plugins/basic-plugin-creation/