저는 꽤 오랫동안 jQuery를 사용해왔고, 이를 위한 플러그인을 자주 작성합니다. 다양한 방법으로 작성해 보았지만 지금은 이 템플릿이 가장 마음에 듭니다.
;(함수($) {
// 여기에 여러 플러그인을 넣을 수 있습니다
(함수(플러그인이름) {
var 기본값 = {
색상: '검은색',
testFor: function(div) {
true를 반환합니다.
}
};
$.fn[pluginName] = 기능(옵션) {
옵션 = $.extend(true, {}, 기본값, 옵션);
~
return this.each(function() {
var elem = 이것,
$elem = $(elem);
// 플러그인의 내용은 다음과 같습니다
If (options.testFor(elem)) {
$elem.css({
국경 너비: 1,
borderStyle: '단색',
borderColor: options.color
});
}
});
};
$.fn[pluginName].defaults = 기본값
})('테두리화');
})(jQuery);
//사용법은 다음과 같습니다
$('div').borderize();
$('div').borderize({color: 'red'});
제가 이 템플릿을 좋아하는 이유는 다음과 같습니다
1. 재정의된 경우에도 내부의 기본 옵션에 계속 액세스할 수 있습니다(단순히 상위 속성을 통해 액세스).
2.pluginName을 수정하여 플러그인 이름을 변경할 수 있습니다. (이 방법은 코드 압축에도 매우 유용합니다)
포인트 #1은 매우 강력합니다. 예를 들어 이 메서드를 재정의하고 싶지만 여전히 원래 메서드를 유지하려는 경우 다음 예를 볼 수 있습니다.
$('.borderize').borderize({
TestFor: 함수(elem) {
var $elem = $(elem);
If (elem.is('.inactive')) {
false를 반환합니다.
} else {
// "상위" 함수 호출
return $.fn.borderize.defaults.testFor.apply(this, 인수);
}
}
});
이와 같은 일반 속성으로도 이를 수행할 수 있습니다
var someVarThatMayBeSet = false;
/* 코드 ... */
$('.borderize').borderize({
색상: someVarThatMayBeSet ? 'red': $.fn.borderize.defaults.color
});
친구 여러분, 이 jQuery 플러그인 템플릿도 마음에 드실 겁니다. 매우 유연합니다.