jQuery 플러그인 development_jquery의 전체 분석

jQuery 플러그인 개발에는 두 가지 유형이 있습니다. 하나는 클래스 수준 플러그인 개발입니다. 즉, jQuery에 새로운 전역 기능을 추가하는 것입니다. 이는 jQuery 클래스 자체에 메서드를 추가하는 것과 같습니다. jQuery의 전역 함수는 jQuery 네임스페이스에 속하는 함수이며, 다른 하나는 jQuery 개체에 메서드를 추가하는 개체 수준의 플러그인 개발입니다. 두 기능의 개발은 아래에 자세히 설명되어 있습니다.
1. 클래스 수준 플러그인 개발
클래스 수준 플러그인 개발에 대한 가장 직접적인 이해는 jQuery 클래스에 클래스 메서드를 추가하는 것으로, 이는 정적 메서드를 추가하는 것으로 이해할 수 있습니다. 대표적인 예가 jQuery 네임스페이스에 정의된 $.AJAX() 함수입니다. 클래스 수준의 플러그인 개발은 다음 형식으로 확장될 수 있습니다.
1.1 새로운 전역 함수 추가
전역 함수를 추가하려면 다음과 같이 정의하기만 하면 됩니다.
Java 코드

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

jQuery.foo = function() {
Alert('이것은 테스트입니다.');
};

1.2 여러 전역 함수 추가
여러 전역 함수를 추가하려면 다음을 사용할 수 있습니다. 정의:
Java 코드

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

jQuery. foo = function() {
alert( '이것은 테스트입니다. 이것은 단지 테스트일 뿐입니다.')
}
jQuery.bar = function(param) {
alert('This 함수는 "' param '"이라는 매개변수를 사용합니다.
};

은 함수와 동일하게 호출됩니다. jQuery.foo();jQuery.bar(); 또는 $.foo();$.bar ('bar');
1.3 jQuery.extend(object) 사용
Java 코드

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

jQuery.extend({
foo: function() {
alert('This is a test.');
},
bar: function(param) {
alert('이 함수는 "' param '"이라는 매개변수를 사용합니다.'); 🎜>}
});

1.4 네임스페이스 사용
jQuery 네임스페이스에서는 다수의 JavaScript 함수 이름과 변수 이름의 사용을 금지합니다. 그러나 일부 함수 또는 변수 이름이 다른 jQuery 플러그인과 충돌하는 것은 여전히 ​​불가피하므로 일부 메소드를 다른 사용자 정의 네임스페이스로 캡슐화하는 데 익숙합니다.
Java 코드

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

1.jQuery. myPlugin = {
2.foo:function() {
3.alert('이것은 테스트입니다. 이것은 단지 테스트일 뿐입니다.')
4.},
5.bar: function(param ) {
6.alert('이 함수는 "' param '"인 매개변수를 사용합니다.')
7.}
8.}; 🎜>9 .네임스페이스를 사용하는 함수는 여전히 전역 함수이며 호출 시 사용되는 메서드는 다음과 같습니다.
11.$.myPlugin.bar('baz'); >Passed 이 트릭(별도의 플러그인 이름 사용)을 사용하면 네임스페이스 기능 충돌을 피할 수 있습니다.
2. 객체 수준 플러그인 개발

객체 수준 플러그인 개발에는 다음 두 가지 형식이 필요합니다.
양식 1:
Java 코드




코드 복사

코드는 다음과 같습니다. 1.(function($){ 2.$.fn.extend( { 3.pluginName:function(opt,callback){ 4. // 플러그인 구현 코드는

5.}

6.})
7.})( jQuery);


양식 2:
Java 코드

코드 복사

코드는 다음과 같습니다. 다음은 다음과 같습니다: 1.(function($) { 2.$.fn.pluginName = function() { 3. // 플러그인 구현 코드는 여기에 있습니다. 4.};

5 .})(jQuery)

위에서 정의한 jQuery 함수이며 형식 매개변수는 $입니다. 함수 정의가 완료된 후 jQuery 실제 매개변수를 전달하면 즉시 호출되어 실행됩니다. 이것의 장점은 jQuery 플러그인을 작성할 때 프로토타입과 충돌을 일으키지 않고 $ 별칭을 사용할 수도 있다는 것입니다.
2.1 JQuery 네임스페이스에 이름을 선언하세요
이것은 단일 플러그인입니다. 스크립트. 스크립트에 여러 플러그인 또는 상호 플러그인(예: $.fn.doSomething() 및 $.fn.undoSomething())이 포함된 경우 여러 함수 이름을 선언해야 합니다. 그러나 일반적으로 플러그인을 작성할 때 모든 내용을 포함하기 위해 하나의 이름만 사용하려고 노력합니다. 예제 플러그인의 이름은 "highlight"입니다.
Java 코드

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

1.$.fn.hilight = function() {
2. // 플러그인 구현 코드는 다음과 같습니다.
3.}
4. 🎜 >5.$('#myDiv').hilight();

하지만 구현 코드를 여러 기능으로 분해해야 하는 경우에는 여러 가지 이유가 있습니다. 또는 구현하기가 더 쉽고 객체 지향적입니다. 불필요한 네임스페이스를 추가하지 않고 기능을 여러 기능으로 나누는 것은 정말 번거로운 일입니다. 이는 JavaScript의 가장 기본적인 클래스 객체인 함수를 인식하고 활용함으로써 가능합니다. 다른 객체와 마찬가지로 함수도 속성으로 지정할 수 있습니다. 따라서 우리는 "hilight"를 jQuery 속성 개체로 선언했습니다. 노출해야 하는 다른 속성이나 함수는 "hilight" 함수에서 속성으로 선언할 수 있습니다. 나중에 계속하세요.
2.2 플러그인 동작을 제어하기 위해 옵션 매개변수 허용
플러그인에 전경색과 배경색을 지정하는 기능을 추가해 보겠습니다. 옵션을 옵션 객체로 플러그인 함수에 전달할 수도 있습니다. 예:
Java 코드

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

1 .// 플러그인 정의
2.$.fn.hilight = function(options) {
3.var defaults = {
4. 전경: '빨간색',
5. '
6. };
7. // 제공된 옵션으로 확장합니다.
8. var opts = $.extend(defaults, options); // 플러그인 구현 코드는 여기에 있습니다.
10.};
11. 우리의 플러그인은 다음과 같이 호출할 수 있습니다:
12.$('#myDiv').hilight({
13. foreground: ' blue'
14 .});


2.3 플러그인의 기본 설정 노출

위 코드에서 개선해야 할 한 가지는 플러그의 기본 설정을 노출하는 것입니다. -안에. 이를 통해 플러그인 사용자는 더 적은 코드로 플러그인을 덮어쓰고 수정할 수 있습니다. 다음으로 함수 객체를 사용하기 시작합니다.
자바 코드

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

1.// 플러그인 정의

2.$.fn.hilight = function(options) {
3. // 제공된 옵션으로 기본 옵션을 확장합니다.
4 // 확장할 첫 번째 인수는 비어 있습니다. object -
5. // "기본값" 개체를 재정의하지 않도록 합니다.
6. var opts = $.extend({}, $.fn.hilight.defaults, options); 7. / / 플러그인 구현 코드는 여기에 있습니다.
8.};
9.// 플러그인 기본값 - 플러그인 기능에 속성으로 추가됨
10.$.fn.hilight.defaults = {
11. 전경: '빨간색',
12. 배경: '노란색'
13.}
14. 이제 사용자는 스크립트에 다음과 같은 줄을 포함할 수 있습니다.
15. //이것은 한 번만 호출하면 되며 준비 블록에서는 호출할 필요가 없습니다.
16.$.fn.hilight.defaults.foreground = 'blue'17. 전경색을 파란색으로 설정하는 이 방법과 같은 플러그인:
18.$('#myDiv').hilight()


이제 사용자는 다음과 같은 줄을 포함할 수 있습니다. 해당 스크립트는 여기에 있습니다:

코드 복사

코드는 다음과 같습니다.

//이것은 한 번만 호출하면 되며 준비 블록에서는 호출할 필요가 없습니다.
$.fn.hilight.defaults.foreground = 'blue'
다음으로 할 수 있습니다. 다음과 같이 사용하세요. 플러그인의 메서드는 결과적으로 파란색 전경색을 설정합니다.
$('#myDiv').hilight()
보시다시피 사용자가 다음 줄을 작성할 수 있습니다. 플러그인의 기본 전경색을 설정하는 코드입니다. 그리고 사용자는 필요할 때 이러한 새로운 기본값을 선택적으로 재정의할 수 있습니다.
// 플러그인의 기본 배경색 재정의
$.fn.hilight.defaults.foreground = 'blue'
// ...
// 새로운 기본 설정으로 플러그인 호출
$('.hilightDiv').hilight()
// ...
// 구성 매개변수 전달 기본 설정을 무시하는 플러그인 메소드
$('#green').hilight({
foreground: 'green'
})

2.4 일부 기능 노출
이전 코드에 대해 흥미로운 방식으로 플러그인을 단계별로 확장합니다(그리고 다른 사람들이 플러그인을 확장하도록 합니다). 예를 들어, 플러그인 구현에서는 강조 표시된 텍스트의 형식을 지정하기 위해 "format"이라는 함수를 정의할 수 있습니다. 이제 우리 플러그인은 다음과 같습니다. 기본 형식 방법의 구현은 hiligth 함수 아래에 있습니다.
자바 코드

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

1.// 플러그인 정의
2.$.fn.hilight = function(options) {
3. // 일치하는 각 요소를 반복하고 다시 포맷합니다.
4. return this.each(function() {
5. var $this = $(this);
6. // ...
7. var markup = $this.html()
8. // 형식 함수 호출
9. markup = $ .fn.hilight.format(markup);
11.})
13.// 형식 함수
14.$.fn.hilight.format = function(txt) {
15.return '' txt ''
16.}; >

콜백 함수가 기본 설정을 재정의하도록 허용하여 옵션 개체의 다른 속성을 쉽게 지원합니다. 이는 플러그인을 수정하는 또 다른 좋은 방법입니다. 여기에 표시된 기술은 재정의될 수 있도록 형식 함수를 더욱 효과적으로 노출하는 것입니다. 이 기술을 사용하면 다른 사람들이 자신의 설정을 전달하여 귀하의 플러그인을 무시할 수 있습니다. 즉, 다른 사람들이 귀하의 플러그인에 대한 플러그인을 작성할 수 있습니다.
이 기사에서 우리가 만든 쓸모없는 플러그인을 고려하면 이것이 정확히 언제 유용할지 궁금할 것입니다. 실제 예는 Cycle 플러그인입니다. 이 Cycle 플러그인은 스크롤, 슬라이드, 페이드 어웨이 등 다양한 내부 변환 효과를 지원할 수 있는 슬라이딩 디스플레이 플러그인입니다. 그러나 실제로 슬라이딩 변경에 적용될 수 있는 모든 유형의 효과를 정의할 수 있는 방법은 없습니다. 바로 이런 확장성이 유용합니다. Cycle 플러그인은 사용자에게 "전환" 개체를 노출하여 사용자가 자신의 변환 정의를 추가할 수 있도록 합니다. 플러그인의 정의는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다. $.fn.cycle .transitions = {

// ...

};


이 트릭을 사용하면 다른 사람들이 변환 설정을 정의하고 Cycle 플러그인에 전달할 수 있습니다.
2.5 비공개 기능을 비공개로 유지

이 기술은 재정의할 플러그인의 일부를 노출하는 데 매우 강력합니다. 하지만 구현 시 노출된 부분에 대해 신중하게 생각해야 합니다. 일단 노출되면 매개변수나 의미 체계를 변경하면 이전 버전과의 호환성이 손상될 수 있다는 점을 명심해야 합니다. 일반적인 경험 법칙은 특정 기능을 노출할지 여부가 확실하지 않은 경우 그렇게 할 필요가 없다는 것입니다.
그렇다면 네임스페이스를 엉망으로 만들거나 구현을 노출하지 않고 더 많은 함수를 정의하려면 어떻게 해야 할까요? 이것이 바로 클로저의 기능입니다. 시연을 위해 플러그인에 또 다른 "디버그" 기능을 추가하겠습니다. 이 디버그 기능은 선택한 요소 형식을 Firebug 콘솔에 출력합니다. 클로저를 생성하기 위해 전체 플러그인 정의를 함수로 래핑합니다.
Java 코드

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

2. // 플러그인 정의

3. $.fn.hilight = function(options) {
4. debug(this); // ...
6 };
7. // 디버깅을 위한 전용 함수
8. function debug($obj) {
9.if (window.console && window.console.log)
10 .window.console.log('선택 횟수: ' $obj.size());
12.// ...
13.}); 🎜>

우리의 "디버그" 메소드는 외부 클로저에서 접근할 수 없으므로 우리 구현에만 적용됩니다.
2.6 메타데이터 플러그인 지원
작성 중인 플러그인에 따라 메타데이터 플러그인 지원을 추가하면 더욱 강력해질 수 있습니다. 개인적으로 저는 이 메타데이터 플러그인을 좋아합니다. 몇 가지 "마크업" 옵션을 사용하여 플러그인을 재정의할 수 있기 때문입니다(예제를 만들 때 매우 유용함). 그리고 이를 지원하는 것은 매우 간단합니다. 업데이트: 댓글에 약간의 최적화 제안이 있습니다.
Java 코드

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

1.$. fn.hilight = function(options) {
2. // ...
3. // 요소 반복 전 기본 옵션 빌드
4. var opts = $.extend({}, $.fn .hilight.defaults, options);
5. return this.each(function() {
6. var $this = $(this);
7. // 요소별 옵션 빌드
8. var o = $.meta ? $.extend({}, opts, $this.data()) : opts
9. //...

몇 가지 작업: 메타데이터 플러그인이 설치되어 있는지 테스트합니다. 메타데이터 줄을 추출하고 이를 JQuery.extend에 마지막 매개변수로 추가하여 옵션 개체를 확장할 수 있습니다. 이는 이제 다른 옵션 설정을 재정의합니다. "markup"을 선택하면 "markup"에서 동작을 구동할 수 있습니다.
호출할 때 다음을 작성할 수 있습니다. jQuery.foo() 또는 $.foo();
Java code

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

1. 2.

3. 좋은 하루 보내세요!
4.

< ;div class="hilight { 전경: 'orange' }">
6. 좋은 하루 보내세요
7.

8.

9. 좋은 하루 보내세요!
10.

11. 이제 한 줄만 사용하여 어떤 div를 강조 표시할 수 있습니다. 스크립트:
12.$('.hilight').hilight();

2.7 통합
다음 코드로 예제가 완성됩니다.
Java 코드

코드 복사 코드는 다음과 같습니다. 1.// 클로저 생성

2.(function( $) {

3. // 플러그인 정의
4. $.fn.hilight = function(options) {
5. debug(this); 요소 반복 전 옵션
7. var opts = $.extend({}, $.fn.hilight.defaults, options)
8. // 일치하는 각 요소를 반복하고 형식을 다시 지정합니다.
9. .each(function () {
10. $this = $(this);
11. // 요소별 옵션 빌드
12. var o = $.meta ? $.extend({}, opts, $this .data()) : opts;
13. // 요소 스타일 업데이트
14. $this.css({
15. backgroundColor: o.ground,
16. : o.foreground
17. });
18. var markup = $this.html()
19. // 형식 함수 호출
20. .format(markup);
22.
24. function debug($ obj) {
26. if (window.console && window.console.log)
27.window.console.log('hilight 선택 횟수: ' $obj.size()); 🎜>28. };
29. // 노출된 형식 함수를 정의합니다.
30.$.fn.hilight.format(txt) {
31. ';
33. // 플러그인 기본값
$.fn.hilight.defaults = {
35.
36. 배경 : '노란색'
37.// 종료 종료
39.})


이 디자인 덕분에 사양에 맞는 강력한 플러그인을 만들 수 있었습니다. 나는 그것이 당신도 똑같이 할 수 있기를 바랍니다.
3. 요약
jQuery는 플러그인 개발을 위한 두 가지 방법, 즉
jQuery.fn.extend(object)를 제공합니다.
jQuery.extend(object); jQuery 클래스 자체를 확장하려면 클래스에 새 메서드를 추가합니다.
3.1 jQuery.fn.extend(object)
fn이 무엇인가요? jQuery 코드를 보면 찾기가 어렵지 않습니다.
jQuery.fn = jQuery.prototype = {
init: function( selector, context ) {//....
//......
}
원본 jQuery.fn = jQuery.prototype. 당신은 확실히 프로토타입에 익숙합니다. JavaScript에는 클래스에 대한 명확한 개념이 없지만 이를 이해하려면 클래스를 사용하는 것이 더 편리합니다. jQuery는 매우 잘 캡슐화된 클래스입니다. 예를 들어 $("#btn1") 문을 사용하면 jQuery 클래스의 인스턴스가 생성됩니다.
jQuery.fn.extend(object); jQuery.prototype을 확장하려면 jQuery 클래스에 "멤버 함수"를 추가해야 합니다. jQuery 클래스의 인스턴스는 이 "멤버 함수"를 사용할 수 있습니다.
예를 들어, 특수 편집 상자를 생성하는 플러그인을 개발하고 싶습니다. 클릭하면 현재 편집 상자의 내용이 경고됩니다. 이렇게 할 수 있습니다:

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

$.fn. 확장({
alertWhileClick:function(){
$(this).click(function(){
alert($(this).val());
});
}
});
$("#input1").alertWhileClick(); //페이지에서:

$("#input1")은 jQuery 인스턴스입니다. 멤버 메소드를 호출합니다. AlertWhileClick 이후에는 클릭할 때마다 현재 편집 내용이 먼저 팝업됩니다.
3.2 jQuery.extend(object);
jQuery 클래스에 클래스 메소드를 추가합니다. 이는 정적 메소드를 추가하는 것으로 이해할 수 있습니다. 예:

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

1.$.extend( {
2.add:function(a,b){return a b;}
3.})

은 jQuery에 add라는 "정적 메서드"를 추가합니다. jQuery의 경우 $.add(3,4) //return 7 메서드를 사용하세요.