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

나만의 jQuery 메소드를 만들어 사용해보자!

웹 개발을 하시면서 대부분 유틸리티성 코드들을 한두가지씩 보유하고 계실겁니다.

이번 포스팅에서는 자바스크립트 객체를 만들어서 함수를 추가하는 방법이 아닌,

jQuery 객체에 사용자 정의 메소드를 추가하여 사용하는 방법을 써내려가 보겠습니다.

$.fn

우리는 다음과 같이 jQuery 를 통해 미리 제작된 다양한 메소드를 간편하게 사용 하고 있습니다.

$("button").eq(0).text("첫번째버튼");

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

다음 소스코드는 서버에서 특정 문자열이 XSS 필터링되어 변환된 문자열을 다시 복원하는 메소드의 예시입니다.

$.fn.HTMLTagRestore = function(){
	var value = this.val();

	if(this.is("input") || this.is("textarea")){
		this.val(
				value.replaceAll('& lt;', '<')
					 .replaceAll('& gt;', '>')
		);
	}

	return this;
};

(& 문자열 다음의 띄어쓰기는 티스토리에서 자동으로 치환하여 의도된 띄어쓰기입니다)

보시는 바와 같이 input 또는 textarea 태그일 경우 해당 기능을 수행합니다.

다른 부분은 아시는 부분일테니 넘어가고, 핵심만 설명 드리겠습니다.

메소드 바디를 보시면, this 라는 키워드가 존재하는데,

이 키워드가 가리키는 부분은 $("셀렉터")를 통해 들어온 jQuery Object 를 뜻합니다.

그래서 this 키워드를 통해 jQuery 메소드를 사용 하실 수 있으며,

맨 마지막에 return this; 를 통하여 최종적으로 리턴하게 됩니다.

리턴이 필요 없는 메소드라면 적어주지 않으셔도 되지만,

적지 않을 경우, 당연히 다음과 같이 jQuery 메소드를 이어서 호출 할 수 없습니다 :(

$("input").HTMLTagRestore().show();
// Cannot read property 'show' of undefined(…)

앞서 설명드린 것처럼,

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

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

$.HTMLTagRestoreAll = function(){
	$("input, textarea").each(function(){
		var value = $(this).val();
		$(this).val(
					value.replaceAll('& lt;', '<')
						 .replaceAll('& gt;', '>')
		);
	});
};

$.fn.메소드명이 아닌 $.메소드명 으로 정의해주시면 됩니다.

이 경우 $.HTMLTagRestoreAll(); 과 같이 사용 하실 수 있습니다.

간단한 내용이라 크게 설명해 드릴 부분은 없네요.

이번 포스팅의 내용을 처음 보셨던 분들은 앞으로 jQuery 를 사용하시면서

보다 더 유연하게 소스코드를 작성 하실 수 있으실 겁니다.

작년 9월 이후로 정말 오랫만에 새로운 포스팅인데,

도움이 되셨을지 모르겠네요.

감사합니다.