>웹 프론트엔드 >JS 튜토리얼 >jQuery 플러그인 추천 template_jquery

jQuery 플러그인 추천 template_jquery

WBOY
WBOY원래의
2016-05-16 16:21:26978검색

저는 꽤 오랫동안 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 플러그인 템플릿도 마음에 드실 겁니다. 매우 유연합니다.

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.