jQuery 사용자 정의 플러그인

jQuery 커맨드들을 사용하여 공통적으로 사용할 수 있도록 패턴화.

jQuery 유틸리티화.

 

- 잇점

사이트 전체에 (동일 플러그인을 가져다쓴 곳들에서) 일관된 jQuery 코드 스타일을 유지

jQuery의 라이브러리 구조/재사용성을 고려한 구성을 따라 설계

jQuery가 제공하는 코드들을 활용할 수 있다.

 

- 형식

$에 정의된 유틸리티 함수

jQuery 확장 집합에서 동작하는 메서드

 

- 명명

파일의 이름이 다른 파일과 충돌하지 않도록 만들어야

. 접두어로 jquery. 을 사용

. 이어서 플러그인 이름 (플러그인의 성격을 알 수 있는?)

. 확장자는 .js로

 

 

$의 변경에 영향을 받지 않는 유일한 방법은?

$를 사용하지 않는 것.

jQuery.say = function(what) { alert( what ); }

 

하지만, jQuery라고 사용하는 것보다는

$를 사용하는 것이 편하니...

 

( function($) { ... } )(jQuery);

$라는 매개변수를 정의한 함수에 jQuery를 전달하면

$는 함수안에서 jQuery의 참조임이 보장된다.

 

 

선택적인 매개변수는

이름/값 쌍 형식의 프로퍼티를 가지는 자바스크립트 Object 인스턴스로 전달한다.

complex( valueA, {p7:valueB, ...} );

 

 

function complex( p1, options ) {

   var settings = $.extend( {

      option1: defaultValue1,

      option2: defaultValue2,

      option3: defaultValue3

   }, options||{} );

}

options 객체가 null 이거나 undefined 인지를 확인

options 변수가 false라면(null과 undefined는 조건식에서 false) 빈 객체{}가 사용된다.

 

 

확장메서드는 $ namespace의 fn이라는 이름을 가진 객체의 프로퍼티로 할당해야 한다.

$.fn.wrapperFunctionName = function(params) { function-body };

 

메서드 본문에서 this는 확장집합을 나타낸다.

 

특정한 값을 return할 의도가 없다면,

항상 확장집합을 돌려주도록 만들어야 한다.

jQuery 커맨드 체인에서 사용할 수 있도록...

(그래야 더 많이 쓰일 수 있겠지?)

 

메서드에서 사용하는 변수가 유효 범위보다 길게 유지되는 경우가 많으니

클로저를 이해하고 있어야 한다.

 

 

더 많은 jQuery 플러그인 정보는...

http://jquery.com/plugins