jQuery는 많은 플러그인들이 존재한다.

그 자체로도 대단한 라이브러리이지만 많은 플러그인들이 더 대단하도록 만들어 준다.


자..

jQuery 플러그인!

나도 만들어 보자.



◎ 플러그인에서 $ 별칭 사용


= 플러그인을 사용하기 위해서는 jQuery 라이브러리가 로드됐다고 가정할 수 있다. 그렇다고 해서 $ 별칭을 사용할 수 있다라는 점에 대해서는 가정할 수 없다. $.noConflict() 메서드로 별칭에 대한 제어를 양도할 수 있기 때문.

= $를 플러그인 내부의 지역 변수로 정의해 사용하는 것이 좋다.


(funtion($) {

// 코드 표시

})(jQuery);


= 위와 같이 정의하여 사용하도록 한다. 이렇게 함수를 정의해 바로 사용하는 문법을 즉석 호출 함수 표현식(IIFE, Immediately Invoked Function Expression)이라 한다.



 새 전역함수 추가


= jQuery 자체 기능 중 일부는 전역함수. jQuery 객체의 메서드지만, 현실적으로 보면 jQuery 네임스페이스(namespace)의 함수다.

= 일반 전역함수일 경우 충돌할 가능성을 염두에 둬야 하지만 jQuery 네임스페이스에 함수를 두면 jQuery만 신경쓰면 되므로 충돌 염려를 줄일 수 있다.


예) sum 메서드 추가하기

(function ($) {

$.sum = function(obj) {

// 코드 표시

};

})(jQuery);




◎ 여러 함수 추가하기


= 플러그인이 하나 이상의 전역함수를 가질 때는 따로 선언해 주면 된다.


예) sum, avg 메서드 추가하기

(function ($) {

$.sum = function(obj) {

// 코드 표시

};

$.avg = function(obj) {

// 코드 표시

};

})(jQuery);


= $.extend() 함수를 이용하여 함수를 정의할 수도 있다.


(function ($) {

$.extend({

sum : function(obj) {

// 코드 표시

},

avg : function(obj) {

// 코드 표시

}

});

})(jQuery);


= 하지만 아직도 다른 jQuery 플러그인에 정의된 함수 이름과 충돌할 가능성이 있다. 이런 문제를 해결하는 가장 좋은 방법은 정해진 플러그인에서 선언할 모든 전역함수를 하나의 객체로 캡슐화(encapsulation) 하는 것이다. - 함수와 그 함수와 연관된 함수를 하나로 묶어주도록 한다.


(function ($) {

$.mathUtils = {

sum : function(obj) {

// 코드 표시

},

avg : function(obj) {

// 코드 표시

}

});

})(jQuery);


= 여기에서 선언하는 전역함수를 위한 별도의 네임스페이스 mathUtils를 생성

= 호출시에 $.mathUtils.sum(), $mathUtils.avg() 형식으로 사용한다.

= 고유한 플러그인 이름을 사용하여 전역함수 이름이 충돌하는 일을 막도록 한다.




◎ jQuery 객체 메서드 추가


= DOM 일부를 조작하는 함수를 작성하려 한다면 객체 메서드를 새로 추가하는 방식이 적절


jQuery.fn.myMethod = function() {

// do Something

}


= jQuery.fn 객체는 jQuery.prototype의 별칭

= $('div').myMethod() 형식으로 사용가능


객체 메서드 컨텍스트


= 플러그인 메서드에서 this 키워드는 현재 jQuery 객체를 가리킨다.

= this 키워드를 사용해 임의의 jQuery 메서드를 호출하거나 DOM 노드 작업 가능


묵시적 반복


= jQuery 선택자 표현식이 0개, 또는 1개 이상의 여러개의 요소와 매치될 수 있기 때문에 플러그인 메서드를 설계할 때는 이런 시나리오를 감안해야 한다.

= 매치되는 요소의 개수와 관계없이 모두에게 적용하는 가장 간단한 방법은 메서드 컨텍스트에 항상 .each()를 호출 하는 것

= .each() 메서드는 묵시적인 반복(implicit iteration)을 수행, 이는 플러그인과 jQuery의 기본 메서드 사이의 일관성을 유지하는 데 중요하다.

= .each() 내부의 this는 각 DOM 요소를 차례로 가리킨다

※ this의 의미 : 객체 메서드 자체에서는 jQuery 객체, .each() 호출에서는 DOM 요소


메서드 체인


= jQuery 사용자는 체인 기능을 사용할 수 있어야 한다.

= this에 대해 .each()를 적용한 후 해당 결과를 반환(return)하면 된다.




◎ 메서드 파라미터


파라미터 맵


= 맵은 각 파라미터에 대해 시각적인 레이블을 제공, 파라미터의 순서를 지키지 않아도 된다.

= jQuery API와 유사하므로 사용상의 일관성을 더 높이는 효과


기본 파라미터 값


= 맵에서 값을 지정하지 않은 파라미터는 기본값으로 대체

= 메서드 내부에 새로운 맵(예 - defaluts)을 정의, 유틸리티 함수 $.extend()를 사용하여 전달받은 맵(예 - opts)을 defaluts 맵에 덮어쓰며 opts에서 지정하지 않은 값은 그대로 두고 지정된 값만 덮어쓴다.


콜백 함수


= 플러그인 자체에 지나친 부담을 줄여주면서 많은 유연성을 부여

= 콜백 함수를 사용하려면 파라미터를 함수 객체를 전달받아 적당한 방식으로 호출하도록 구현해야 함


커스터마이즈할 수 있는 기본값


= 기본값에 대한 정의를 메서드 밖으로 옮기고, 메서드 밖에서도 접근할 수 있는 곳에 위치시킨다.


(function($) {

$.fn.shadow = function(opts) {

var options = $.extend({}, $.fn.shadow.defaults, opts);

// ...

};


$.fn.shadow.defaults = {

copies : 5,

opacity : 1,

copyOffset : function(index) {

return {x : index, y : index}

}

};

})(jQuery);


= $.fn.shadow.defaults로 직접 참조

= 또한 $.extend()를 호출하는 방식도 달라져야 한다. 비어있는 맵 {}을 $.extend()에 첫 번째 인자로 전달해 새로운 맵이 변경되게 해야 한다.






jQuery 1.7: 작고 강력한 자바스크립트 라이브러리

저자
조나단 채퍼, 칼 스웨드버그 지음
출판사
위키북스 | 2012-07-20 출간
카테고리
컴퓨터/IT
책소개
jQuery라는 이 작고 가벼운 라이브러리만 내려받거나 더 간단...
가격비교









Posted by Mooki

댓글을 달아 주세요

  1. BlogIcon 라스모르 2014.04.09 10:36  댓글주소  수정/삭제  댓글쓰기

    learing jquery의 내용이네요. 원문 중 쉽게 이해하기 힘든 부분이 있어 검색했더니 이렇게 한 챕터를 정리해놓으셨네요. 도움받고 갑니다. ^^