'Plug-In'에 해당되는 글 2건

  1. 2010.10.01 jquery 플러그인 만들기 (2)
  2. 2010.08.31 jquery 플러그인 만들기 (1)















 

2010/08/31 - [Review/IT] - jquery 플러그인 만들기 (1)
jquery 플러그인 만들기 (1) 편에 이은 연재글입니다.

이전에 만들었던 플러그인에는 작은 단점이 있다. 바로 범용성이 떨어진다는 것인데, 플러그인은 어떤 환경에서 쓰일지 모르기 때문에 보편적으로 만들어야 한다.

간혹 jquery와 prototype.js 등의 프레임워크를 동시에 사용하는 환경이 있는데, 이런 경우 jquery의 $ 를 다른 표현으로 사용하기도 한다. 하지만 우리가 만들어놓은 플러그인은 $ 를 사용하기 때문에 충돌이 날 수 있다.

해결책으로 자신이 만든 플러그인 메소드를 래핑하는 방법이 있다.

우선 형식은 다음과 같다. (function() { statement })() 
자신이 만든 메소드를 유효범위로 감싸면서 내부의 변수와 함수들을 private 하게 만드는 것이다.

(function() { statement })()  빨간색으로 되어 있는 부분을 하나의 함수명 이라고 생각하면 좀 더 쉽다.
function() 이 될텐데, 이는 마찬가지로 인자를 넘길 수 있다는 뜻이 된다.
(function() { statement }) == function 

우리는 일전에 아래와 같은 플러그인을 만들었다.
$.fn.Alert = function() {
	return alert(this[0].id);
}
이걸 유효범위로 만들기 위해 아래와 같이 수정한다.
(function($) {
    $.fn.Alert = function() {
	return alert(this[0].id);
    }
})(jQuery);
이렇게 되면 $ (여기서는 jQuery) 변수를 익명함수의 인자값으로 넘기고, 익명함수는 jQuery 를 $로 받아서 플러그인에서는 계속 $를 사용할 수 있다.


신고
Posted by onionmen

댓글을 달아 주세요
















 
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 되는 부분도 없다. 그냥 일반적인 함수 작성하듯 만들면 된다.(함수니까!) 하나의 기능만을 담당하는 것이라면 문제는 없다.

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



신고
Posted by onionmen

댓글을 달아 주세요

이전버튼 1 이전버튼

블로그 이미지
손을 따뜻하게 만들어 주고 싶은 애인이 있습니다.
onionmen

달력

 « |  » 2017.12
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31            
DNS Powered by DNSEver.com

최근에 올라온 글

Yesterday140
Today112
Total1,625,747

티스토리 툴바