jQuery 플러그인 development_jquery에 대한 자세한 튜토리얼

jQuery 플러그인 및 메소드 확장은 매우 강력하며 개발 시간을 많이 절약할 수 있습니다. 이 문서에서는 jQuery 플러그인 개발의 기본, 모범 사례 및 일반적인 함정에 대해 간략하게 설명합니다.

1. 시작하기

jQuery 플러그인 작성은 jQuery.fn에 새 함수 속성을 추가하는 것으로 시작됩니다. 여기에 추가된 객체 속성의 이름은 플러그인의 이름입니다.

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

jQuery.fn.myPlugin = function(){

//직접 플러그인 코드

};

사용자들이 그토록 좋아하는 $ 기호는 어디에 있나요? 여전히 존재하지만 다른 JavaScript 라이브러리와의 충돌을 피하기 위해 jQuery를 $ 기호에 매핑되는 자체 실행 폐쇄 프로그램에 jQuery를 전달하여 다른 라이브러리가 $ 기호를 덮어쓰는 것을 방지하는 것이 좋습니다. .

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

(함수($){
$.fn .my​​​Plugin = function () {
             //자신만의 플러그인 코드
      };
})(jQuery); $ 기호를 사용하여 jQuery 함수를 나타냅니다.

2. 환경

이제 실제 플러그인 코드 작성을 시작해 보겠습니다. 하지만 그 전에 플러그인이 위치한 환경에 대한 아이디어가 있어야 합니다. 플러그인 범위에서 this 키워드는 플러그인이 실행할 jQuery 객체를 나타냅니다. 콜백을 포함하는 다른 jQuery 함수에서는 this 키워드가 기본 DOM 요소를 나타내기 때문에 여기서 일반적인 오해가 발생하기 쉽습니다. . 이로 인해 개발자는 아래와 같이 실수로 jQuery에서 this 키워드를 불필요하게 래핑하는 경우가 많습니다.

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

(함수($){

$.fn .my​​​Plugin = function () {

                 //이미 jQuery 객체이기 때문에 $(this)와 같은 $ 기호로 묶을 필요가 없습니다.                             $($('#element'));

this.fadeIn('normal', function () {

DOM 요소

});
};
})(jQuery);

$('#element').myPlugin();

3. 기초지식

이제 jQuery 플러그인의 기본 사항을 이해했으므로 몇 가지 작업을 수행하는 플러그인을 작성해 보겠습니다.

코드 복사

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

$.fn.maxHeight = function () {

var max = 0;

this.each(function () {
max = Math.max(max, $ (this).height());
      });

                                                       // 높이를 반환합니다. 높이가 가장 높은 div 요소


이것은 .height()를 사용하여 페이지에서 높이가 가장 높은 div 요소의 높이를 반환하는 간단한 플러그인입니다.


4. 연쇄성 유지


플러그인의 목적은 단순히 수집된 요소를 어떤 방식으로든 수정하고 이를 체인의 다음 메소드로 전달하는 것인 경우가 많습니다. 이것이 jQuery 디자인의 아름다움이자 jQuery가 인기를 끄는 이유 중 하나입니다. 따라서 플러그인의 연결성을 유지하려면 플러그인이 this 키워드를 반환하는지 확인해야 합니다.

코드 복사

코드는 다음과 같습니다.

(함수($) {

$.fn.lockDimensions = 함수(유형) {

return this.each(함수() {

var $this = $(this);

if (!type || type == 'width') {
$this.width($this.width());
}

if (!type || type == 'height') {
$this.height($this.height());
}

});

};
})(jQuery);

$('div').lockDimensions('width').CSS('color', 'red');

플러그인은 이 키워드를 반환하므로 jQuery에서 수집한 요소를 .css와 같은 jQuery 메서드로 계속 제어할 수 있도록 연결성을 유지합니다. 따라서 플러그인이 고유 값을 반환하지 않는 경우 해당 범위 내에서 항상 this 키워드를 반환해야 합니다. 또한 플러그인에 전달된 매개변수가 플러그인 범위 내에서 전달될 것이라고 추론할 수 있습니다. 따라서 이전 예에서는 문자열 'width'가 플러그인의 유형 매개변수가 됩니다.

5. 기본값 및 옵션

사용자 정의 가능한 옵션을 많이 제공하는 보다 복잡한 플러그인의 경우 플러그인을 확장할 수 있는 옵션을 갖는 것이 가장 좋습니다. 기본 설정($.extend 사용) 따라서 여러 매개변수를 사용하여 플러그인을 호출하는 대신 재정의하려는 설정이 포함된 개체 매개변수를 사용하여 플러그인을 호출할 수 있습니다.

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

(함수($){

$.fn.tooltip = function (options) {

//기본값을 생성하고 제공된 옵션을 확장합니다.
var settings = $.extend({
'location' : 'top',
                                                                                                ~                     . >
});

};
})(jQuery);

$('div').tooltip({
'위치': '왼쪽'
});


이 예에서는 툴팁 플러그인을 호출하면 기본 설정의 위치 옵션을 덮어쓰고 배경색 옵션은 기본값으로 유지되므로 최종 호출되는 설정 값은

코드 복사

코드는 다음과 같습니다.

{ '위치': '왼쪽', 'Background-color': ' blue'}

이는 개발자가 사용 가능한 모든 옵션을 정의하지 않고도 고도로 구성 가능한 플러그인을 제공할 수 있는 매우 유연한 방법입니다.

6. 네임스페이스

플러그인 이름을 올바르게 지정하는 것은 플러그인 개발에서 매우 중요한 부분입니다. 올바른 네임스페이스를 사용하면 동일한 페이지에 있는 다른 플러그인이나 다른 코드가 플러그인을 덮어쓸 가능성이 매우 낮다는 것을 보장할 수 있습니다. 네임스페이스는 메소드, 이벤트 및 데이터를 더 잘 추적하는 데 도움이 되기 때문에 플러그인 개발자로서의 삶을 더 쉽게 만들어줍니다.

7. 플러그인 방식

어떤 경우에도 단일 플러그인이 jQuery.fnjQuery.fn 객체 내에 여러 네임스페이스를 가져서는 안 됩니다.

코드 복사

코드는 다음과 같습니다.

(함수($){ $.fn.tooltip = 기능(옵션) {                                                                                 > = 기능 (내용) { // !!!

};

})(jQuery);

$.fn이 $.fn 네임스페이스를 복잡하게 만들기 때문에 이는 권장되지 않습니다. 이 문제를 해결하려면 해당 플러그인의 메소드를 모두 객체 텍스트에 모아서 메소드의 문자열 이름을 플러그인에 전달하여 호출해야 합니다.

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

(함수($){

var 메소드 = {
init: 함수(옵션) {
},
show: 함수() // is
},
hide: 함수() {
// 좋음
},
업데이트: 함수(내용) {
// !!!
}
}

$. ) {

                                                                                                                                                                                    // 메소드 호출(인수, 1));
      } else if (메서드 유형 === '객체' || !method) {
               returnmethods.init.apply( 이, 인수); 🎜>                                                                                                                                  >//init 메서드 호출
$('div').tooltip();

//init 메서드 호출
$('div') tooltip({
foo: ' bar'
});

//hide 메소드 호출
$('div').tooltip('hide');

//Update 메소드 호출
$('div').tooltip('update', '새로운 툴팁 내용입니다!');


이 유형의 플러그인 아키텍처를 사용하면 상위 패키지의 모든 메소드를 캡슐화하고 메소드의 문자열 이름과 이 메소드에 필요한 추가 매개변수를 전달하여 호출할 수 있습니다. 이러한 유형의 캡슐화 및 아키텍처는 jQuery 플러그인 커뮤니티의 표준이며 jQuery UI의 플러그인 및 위젯을 포함한 수많은 플러그인에서 사용됩니다.


8. 이벤트


바인드 메소드의 잘 알려지지 않은 기능은 이벤트 네임스페이스 바인딩을 허용합니다. 플러그인이 이벤트를 바인딩하는 경우 이 이벤트에 네임스페이스를 지정하는 것이 좋습니다. 이렇게 하면 바인딩을 해제할 때 이미 바인딩되었을 수 있는 동일한 유형의 다른 이벤트를 방해하지 않습니다. '.'를 통해 바인딩해야 하는 이벤트에 네임스페이스를 추가하면 됩니다.

코드 복사

코드는 다음과 같습니다.

(함수($) {

    var 메서드 = {
        init: 함수(옵션) {

            return this.each(function () {
$(window).bind('resize.tooltip',methods.reposition);
            });

        },
        destroy: function () {

            이것을 반환하세요. Each(function () {
               $(window).unbind('.tooltip');
            })

        },
        위치 변경: function () {
            // . ..
        },
        표시: 기능() {
            //...
        },
        숨기기: 기능() {
            //...
        } ,
        업데이트: 함수(내용) {
            //...
        }
    };

    $.fn.tooltip = 함수(메서드) {

        if (메서드[메서드]) {
            return 메소드[메서드].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof 메소드 === '객체 ' || !method) {
            returnmethods.init.apply(this, 인수);
        } else {
            $.error('메소드 ' 메소드 '가 jQuery.tooltip에 존재하지 않습니다');
        }
    };

})(jQuery);

$('#fun').tooltip();
//一段时间之后... ...
$('#fun').tooltip('destroy');

여기에는 도구 설명을 통해 초기화 방법이 있습니다.发人员需要销毁툴팁의 时候，저희는 같은 방법으로 위치를 조정하고 중앙 위치를 조정하고 크기를 조정했습니다.到此插件는 외부 유형으로 결정됩니다.

九、数据

일반적으로 사용 가능한 jQuery 데이터 방법은 다음과 같습니다.一个很好的基于元素的记录变weight的途径。尽管如此，上对于记录大注는 서로 다른 이름의 분할 데이터입니다. 좋은 방법입니다.

复主代码 代码如下:

(함수($) {

    var 메서드 = {
        init: 함수(옵션) {

            return this.each(function () {

               var $this = $(this),
                   data = $this.data('tooltip'),
                 도구 설명 = $('

' {
                        텍스트: $ this.attr('title')
                   });

              // 플러그인이 아직 초기화되지 않은 경우
              if (!data) {

                    /*
                   여기에서 추가 설정 작업을 수행하세요
                   */

                  $(this).data('tooltip' {
                       대상: $this,
                        도구 설명: 도구 설명
                   });

              }
            });
        },
        destroy: function () {

            return this.each(function ()
                var $this = $(this),
                   data = $this.data('tooltip');

               // 네임스페이스 FTW
               $(window).unbind('.tooltip');
data.tooltip.remove();
                $this.removeData('tooltip');

            })

       },
        위치 변경: 함수() {
            / / ...
        },
        표시: 기능 () {
            // ...
        },
        숨기기: 기능 () {
            // ...
        },
        업데이트: 함수(내용) {
            // ...
        }
    };

    $.fn.tooltip = 함수(메서드) {

        if (메서드[메서드]) {
            return 메소드[메서드].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (메소드 유형 === '객체' || !method) {
            returnmethod.init.apply(this, 인수);
        }else {
               $.error('JQuery.tooltip에 '메서드' 메소드가 존재하지 않습니다.') >

네임스페이스를 통해 개체의 데이터를 캡슐화하면 중앙 위치에서 모든 플러그인 속성을 더 쉽게 읽을 수 있습니다.


10. 요약 및 모범 사례

jQuery 플러그인을 작성하면 가장 유용한 기능을 재사용 가능한 코드에 통합하는 라이브러리를 만들어 개발자의 시간을 절약하고 개발 효율성을 높일 수 있습니다. jQuery 플러그인을 개발할 때 다음 사항에 유의하세요.

1. 항상 닫힌 플러그인으로 래핑:

코드 복사

코드는 다음과 같습니다. (function ($) {/* 여기에 플러그인 */})(jQuery);2. 플러그인의 함수 범위 내에서 이 키워드를 중복해서 래핑하지 마세요.

3. 플러그인이 특정 값을 반환하지 않는 한, 그렇지 않으면 연결 가능성을 유지하기 위해 this 키워드가 항상 반환됩니다.

4. 많은 수의 매개변수 대신 확장 가능한 기본 개체 매개변수를 플러그인에 전달합니다.
5. 플러그인에서 서로 다른 메서드 이름을 여러 번 지정하지 마세요.
3. 항상 메소드, 이벤트 및 데이터에 네임스페이스를 지정하세요.