본문 바로가기
Q&A2018년 1월 15일1분 읽기

jQuery 플러그인 만드는 방법

웹
웹퍼블리셔
조회 2017댓글 3

jQuery 플러그인을 직접 만들어보고 싶은데, 기본 구조가 어떻게 되는지 궁금합니다.

$.fn.extend를 사용하는 방법과 (function($){ })(jQuery) 패턴의 차이점도 알고 싶습니다.

간단한 플러그인 예제를 보여주실 수 있나요?

댓글 3

코코딩하는민수8년 전

기본 패턴은 이렇습니다:

$.fn.myPlugin = function(options) {
var settings = $.extend({}, $.fn.myPlugin.defaults, options);
return this.each(function() {
// 플러그인 로직
});
};

this.each로 체이닝을 유지하는 게 핵심입니다.

웹웹퍼블리셔(guest)코딩하는민수8년 전
감사합니다! defaults 패턴까지 포함된 예제가 정말 도움됩니다. 바로 따라해보겠습니다.
서서버지기영호8년 전

IIFE 패턴 (function($){ })(jQuery)는 $ 변수 충돌을 방지하기 위한 것입니다. 다른 라이브러리에서도 $를 쓸 수 있으니까요. 플러그인 배포할 때는 꼭 감싸주세요.

Ctrl+Enter로 등록