jQuery 플러그인 개발 가이드_jquery

먼저 가장 정통적인 jQuery 플러그인 정의 방법을 간략하게 살펴보겠습니다.

코드 복사 코드는 다음과 같습니다.

(함수($) { 
$.fn.플러그인 이름 = 기능(설정) {                                           //기본 매개변수 
var defaultSettings = {

~ ~                                   /* 기본 매개변수와 사용자 정의 매개변수 병합
설정 = $.extend(defaultSettings, 설정);

this.each(함수() 반환 {                                                                                                  ~                                                 
} })(jQuery);



먼저 템플릿의 첫 번째 코드 줄을 살펴보겠습니다. (물론 이 코드 줄의 후반부를 꺼내서 함께 읽어야 합니다. 그렇지 않으면 첫 번째 줄은 완전히 의미가 없게 됩니다.)

코드 복사 코드는 다음과 같습니다. (함수($) {

})(jQuery);



이 코드 줄은 실제로 익명 함수를 만드는 데 사용됩니다. 익명 함수와 클로저를 이해하지 못한다면 이런 종류의 코드에 대해 매우 혼란스러울 것이므로 이 글 [

JavaScript 익명 함수 및 클로저에 대해 자세히 알아보기]를 꼭 읽어 보시기 바랍니다.

jQuery의 상속 방식인 $.extend —— $.extend는 매개변수를 병합하는 데 사용되는 jQuery 플러그인 개발에서 매우 중요한 역할을 합니다.

코드 복사 코드는 다음과 같습니다. $.fn.tip = 기능(설정) { 

var defaultSettings = {                                          //색상

색상: '노란색', 
//지연
시간 초과: 200 }
/* 기본 매개변수와 사용자 정의 매개변수 병합 */
설정 = $.extend(defaultSettings, 설정)
경고(설정.입력)
}



jQuery 플러그인은 두 번째 방법을 정의합니다.

코드 복사

코드는 다음과 같습니다.

(함수($) {
    //插件定义--更换이름
    $.fn.tabpanel = 함수(메서드) {
        var 메소드 = $.fn.tabpanel.methods;
        if (메서드[메서드]) {
            반환 메서드[메서드].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (메서드 유형 === '객체' || !method) {
            return 메소드.init.apply(this, 인수);
        } 그 밖의 {
 
        }
    }
    //좋은 방법
    $.fn.tabpanel.methods =
    {
        //初始화
        초기화: 함수(p_options) {
            tabpanelBind(p_options, this);
        },
        추가: 함수(p_options) {
            addTab(p_options, this);
            tabpanelBind(p_options, this);
            // 디버거
        }    }
    함수 추가(p_options) {
        var _defaults = {
            아이디: ""
        }
   
　　　　//内part实现略......
        return _index;
    }

})(jQuery);

调사용  $("#team").tabpanel('add',"");