jQuery 플러그인 2 - 기본값 사용자 재정의

아래의 예제는 이전 글 "jQuery 플러그인 1 - 기본적인 플러그인 만들기" 에서 마지막에 보았던 플러그인에 기본값을 제공하는 예제 입니다.

 

(function($) {
	$.fn.greenify = function( options ) {
		// 기본 옵션을 제공하는 가장 간단한 방법입니다.
		var settings = $.extend({
			// 이것이 기본값들입니다.
			color: "#556b2f",
			backgroundColor: "white"
		}, options );

		// 설정 변수를 기반으로 스타일을 지정합니다.
		return this.css({
			color: settings.color,
			backgroundColor: settings.backgroundColor
		});
	};
}(jQuery));

 

이 플러그인을 $("#div1").greenify(); 처럼 사용하면 기본값이 적용됩니다. 다음 처럼 인자에 값을 주어서 기본값을 오버라이드 할 수 있습니다. $("#div2").greenify({color:"red", backgroundColor:"yellow"});

 

위 코드에서 개선할 수 있는 점은 기본값을 사용자가 재정의 할 수 있도록 하는 것입니다. 이 간단한 예제에서는 큰 의미가 없을 수 있지만 플러그인의 기본 기능을 사용자가 재정의 할 수 있도록 하는 것은 중요한 것입니다.

 

(function($) {
	$.fn.greenify = function(options) { 
		// 기본값과 사용자의 옵션을 이용해서 값을 생성합니다.
		var settings = $.extend({}, $.fn.greenify.defaults, options);

		// 설정값을 사용해서 기능을 수행합니다.
		return this.css({
			color: settings.color,
			backgroundColor: settings.backgroundColor
		});
	};

	// 기본값을 지정합니다.
	$.fn.greenify.defaults = {
		color: "red",
		backgroundColor: "yellow"
	};
}(jQuery));

 

위의 예에서는 $.fn.greenify.defaults로 기본값을 지정합니다. 그리고 기본값의 사용은 아래 코드에서 처럼 $.extend() 함수를 사용하여 기본값과 사용자 옵션을 병합하여 처리할 값을 만듭니다. $.extend() 함수의 첫 번째 인자로 빈 객체({}) 를 사용한 것은 옵션으로 기본값을 덮어 버리지 않기 위해서 입니다.

 

var settings = $.extend({}, $.fn.greenify.defaults, options);

 

다음은 사용 예 입니다.

 

$(function() {
	// 옵션을 주어서 실행합니다.
	$("#test1").greenify({color: "orange",backgroundColor:"lightgreen"});

	// 기본값이 사용되어 실행됩니다.
	$("#test2").greenify();

	// 기본값 중의 글자색을 변경합니다.
	$.fn.greenify.defaults.color = "blue";

	// 기본값이 변경된것을 확인할 수 있습니다.
	$("#test3").greenify();
});

<div id="test1">1. 테스트용 DIV 입니다.</div>
<div id="test2">2. 테스트용 DIV 입니다.</div>
<div id="test3">3. 테스트용 DIV 입니다.</div>

 

실행 결과 입니다. 첫 번째는 옵션을 주어 일시적으로 값을 변경한 것입니다. 두 번째는 기본값이 사용된 것입니다. 세 번째는 기본값을 변경하여 글자색만이 변경된 것입니다.

 

 

지금까지 jQuery 플러그인에 기본값을 사용자에 의해 재정의 할 수 있도록 기능을 추가하는 방법을 알아 보았습니다.