jQuery 플러그인 3 - 확장 기능 제공

플러그인에서 외부에서 접근 가능한 기능을 서브 함수로 제공하도록 합니다. 이렇게 공개된 기능으로 제공하게 되면 사용자가 쉽게 기능을 재정의해서 사용할 수 있습니다.

 

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
//<![CDATA[
// 확장 기능 제공 합니다.
(function($) {
	// 플러그인을 정의합니다.
	$.fn.hilight = function(options) {
		debug(this);

		// 기본 값 제공 합니다.
		var opts = $.extend({}, $.fn.hilight.defaults, options);

		// 각 선택된 요소에 대해 재포맷을 수행합니다.
		this.each(function() {
			var elem = $(this);

			// 하이라이트 기능을 수행합니다.
			elem.css({
				color: opts.foreground,
				backgroundColor: opts.background
			});

			var markup = elem.html();

			// format 함수를 호출합니다.
			markup = $.fn.hilight.format(markup);
			elem.html(markup);
		});

		// 함수 체인을 만듭니다.
		return this;
	};

	// 공개 기본 설정을 지정합니다.
	$.fn.hilight.defaults = {
		foreground: "red",
		background: "yellow"
	};

	// format 함수를 정의합니다.
	// 이 함수가 공개 함수로 사용자가 재정의 할 수 있습니다.
	$.fn.hilight.format = function(txt) {
		return "<strong>" + txt + "</strong>";
	};

	// 비공개 함수 정의
	// 이 함수는 자기 호출 함수 밖에서 접근할 수 없습니다.
	function debug(obj) {
		if(window.console && window.console.log) {
			window.console.log("hilight selection count: " + obj.length);
		}
	};
}(jQuery));

$(function() {
	$("div").hilight();
});
//]]>
</script>

<h1>jQuery 플러그인 테스트</h1>
<div id="test1">1. 테스트용 DIV 입니다.</div>
<div id="test2">2. 테스트용 DIV 입니다.</div>
<div id="test3">3. 테스트용 DIV 입니다.</div>

 

함수를 공개로 제공하는 것이 항상 좋은 것은 아닙니다. 필요에 따라 비공개 함수로 유지할 필요가 있는것도 있습니다.  예제에서와 같은 debug 함수는 비공개로 두는 것이 나을 것입니다.

 

플러그인 내에서 DOM에 추가할 요소를 만드는 경우 플러그인 사용자에게 이러한 요소에 액세스 할 수 있는 방법을 제공하는 것이 좋습니다.

 

플러그인 내에서 다음과 같이 추가적인 요소를 생성하게 되면 추가 요소의 클래스를 사용자가 수정하기 어렵게 됩니다.

 

$('<div class="gallery-wrapper">').appendTo("body");

$(".gallery-wrapper").append("...");</div>

 

다음과 같이 내부에 추가되는 요소의 class를 설정값으로 부터 가져오게 되면 사용자가 플러그인에 의해 DOM에 추가 되는 요소의 모양을 쉽게 커스터마이징 할 수 있게 됩니다.

 

var wrapper = $("<div />")
	.attr( settings.wrapperAttrs )
	.appendTo( settings.container );

wrapper.append( "..." );

 

플러그인이 이벤트에 의해 동작하는 경우 이벤트에 대해 콜백(callback) 기능을 제공하는 것이 좋습니다.(콜백은 나중에 호출되는 함수로 일반적으로 이벤트가 발생 할때 호출되는 함수 입니다.)

 

사용자 정의 이벤트를 만들고 해당 이벤트에 대한 콜백을 제공하는 것도 좋은 방법입니다.

 

var defaults = {
	// 이미지가 보여질 때 실행될 기본 콜백 함수 입니다.
	onImageShow : function() {},
	// ... 나머지 설정부분	...
};

// 플러그인의 나머지 부분 코드 입니다.

// 다음 버튼 클릭시 실행되는 코드 정의
nextButton.on( "click", showNextImage );

function showNextImage() {
	// 다음 보여줄 이미지 노드의 참조를 반환합니다.
	var image = getNextImage();

	// ... 이미지를 보여주는 코드가 여기 옵니다 ...

	// 여기에서 콜백을 호출 합니다.
	settings.onImageShow.call(image);
}

 

이제 플러그인의 기본값을 재정의할 때 onImageShow 함수도 재정의 할 수 있습니다. 사용자가 재정의할 수 있는 콜백 함수를 제공함으로써 더욱 확장성 있는 플러그인을 만들 수 있습니다. 함수가 가지는 call() 메소드의 사용법은 "자바스크립트 함수(Function)와 함수의 call() 메소드" 를 참조 하세요.

 

출처 : https://learn.jquery.com/plugins/advanced-plugin-concepts/