고품질 JQuery Plugin_jquery를 만드는 방법-JS 튜토리얼-php.cn

JQuery 플러그인 플러그인, JQuery 플러그인이 무엇인지 또는 작성 방법을 이해하지 못하는 경우 공식 웹사이트를 확인하세요. jQuery Authoring Guideline
자, 여기에 몇 가지가 있습니다. 좋은 플러그인을 만들고 싶다면 다음과 같은 요구 사항이 필요하다고 생각합니다.
1. JQuery 네임스페이스에 단일 이름만 선언합니다.
2. 플러그인의 동작을 제어하려면 옵션 매개변수를 수락합니다.
3. 외부에서 접근 가능하도록 플러그인 기본 설정 노출
4. 외부 접근 호출에 하위 기능을 적절하게 제공
5. 비공개 기능 유지
6. 메타데이터 플러그인 지원
다음은 하나씩 살펴보겠습니다.
이름 하나만 선언하세요.
이는 별도의 플러그인 스크립트를 나타냅니다. 스크립트에 여러 플러그인이나 보완 플러그인(예: $.fn.doSomething() 및 $.undoSomething())이 포함된 경우 필요에 따라 여러 이름을 선언할 수 있습니다. 그러나 일반적으로 플러그인 현실의 모든 세부 사항을 유지하려면 단일 이름을 사용하도록 노력하십시오.
이 예에서는 "hilight"라는 이름을 선언하겠습니다

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

 
// 플러그인 정의 
$.fn.hilight = function( options ){ 
// 플러그인 구현 코드는 다음과 같습니다... 
 }; 
다음과 같이 호출할 수 있습니다. 
$("divTest").hilight() 

는 옵션 매개변수를 허용하여 플러그인

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

 
$.fn.hilight = function(options){ 
var defaults = { 
foreground : 'red', 
Background : 'yellow' 
}//기본값을 해당 권한으로 확장합니다. 기본값을 확장합니다. settings 
$.extend(defaults,options ) 
}; 

 

다음과 같이 사용할 수 있습니다:

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

$('#myDiv').hilight({ 
foreground: 'blue' 
}); 🎜>
 

노출된 플러그인 외부에서 접근할 수 있도록 기본 설정
플러그인의 개선 및 최적화로 위의 코드를 다음과 같이 노출해야 합니다. 플러그인의 기본 설정입니다. 이는 플러그인 사용자가 최소한의 코드로 플러그인을 다시 작성하거나 사용자 정의하는 것을 매우 쉽게 만들기 때문에 매우 중요합니다. 그러나 JavaScript 함수 개체를 활용할 수 있습니다.

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

$ .fn.hilight = function(options){

//제공된 옵션으로 기본 옵션 확장 
//확장할 첫 번째 인수는 빈 객체라는 점에 유의하세요 
//이것은 "기본값" 객체를 재정의하지 마세요. 
var opts = $.extend({},$.fn.hilight.defaults,options) 
} 
$.fn.hilight.defaults = { 
foreground : ' red', 
 background : 'yellow' 
}; 

 
여기서 $.extend()의 첫 번째 매개변수가 빈 객체라는 점에 주목할 가치가 있습니다. 플러그인의 기본 설정을 다시 작성할 수 있습니다. 

사용자는 다음과 같이 플러그인을 사용할 수 있습니다.

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

// 플러그인 기본 전경색 재정의

$.fn.hilight.defaults.foreground = 'blue'// .. . 
// 새로운 기본값을 사용하여 플러그인 호출 
$( '.hilightDiv').hilight() 
// ... 
// 플러그인 메소드에 옵션을 전달하여 기본값 무시 
 $('#green').hilight({ 
foreground: 'green' 
}); 

 

외부 액세스 호출에 대한 하위 기능을 적절하게 제공

이 예는 이전 예를 계속하며, 플러그인을 확장하는 흥미로운 방법을 찾을 수 있습니다(그리고 다른 사람들이 당신의 플러그인을 확장하도록 허용할 수도 있습니다 :)). 예를 들어, 텍스트를 표시하기 위해 플러그인에서 "format"이라는 함수를 선언합니다. 플러그인 구현 코드는 다음과 같습니다.

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

 
$.fn.hight = function(options){ 
//매칭된 각 요소를 반복하고 형식을 다시 지정합니다. 
return this.each(function(){ 
var $this = $(this ); 
//... 
var markup = $this.html(); 
//형식 함수 호출 
markup = $.fn.hilight.format(markup); >$this.html(markup); 
}); 
}; 
//형식 함수 정의 
$.fn.hilight.format = function(txt){ 
return ' txt ''; 
}; 

 

비공개 기능 유지
노출된 플러그인에 재작성을 제공하는 일부 콘텐츠가 있습니다. . 매우 강력해 보이지만 플러그인의 어느 부분을 노출해야 하는지 신중하게 고려해야 합니다. 일단 노출되면 이러한 변화점을 고려해야 합니다. 일반적으로 어떤 부분을 노출해야 할지 확실하지 않으면 이렇게 할 필요가 없습니다. 그럼 노출하지 않고 어떻게 더 많은 함수를 정의할 수 있을까요? 이 작업은 종료하도록 하겠습니다. 확인을 위해 플러그인에 "debug"라는 기능을 추가합니다. 이 디버그 기능은 선택된 요소 수를 FireBug 콘솔에 기록합니다. 클로저를 생성하기 위해 플러그인 정의의 전체 부분을 래핑합니다.

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

//클로저 생성 
(function($){ 
//플러그인 정의 
$.fn.hilight = function(options){ 
debug(this); 
/ /... 
}; 
//debuggin용 비공개 함수 
function debug($obj){ 
if(window.console && window.console.log){ 
 window.console .log('hilight 선택 횟수:' $obj.size()); 
} 
} 
//... 
//종료 종료 
})( jQuery); 

 

이 방법은 클로저 외부에서 "debug" 메서드를 호출할 수 없습니다.

메타데이터 플러그인 지원 플러그인 유형에 따라 다름 메타데이터를 작성하고 지원하므로 데이터 플러그인이 더욱 강력해집니다. 개인적으로 저는 별도의 태그로 플러그인 구성을 재정의할 수 있는 데이터 플러그인을 좋아합니다(이 기능은 데모와 예제를 작성할 때 특히 유용합니다). 가장 중요한 것은 그것을 실현하는 것이 매우 쉽다는 것입니다!

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

$.fn.hilight = function(options ){ 
//요소 상호작용 전에 기본 옵션 빌드 
var opts = $.extend({},$.fn.hilight.defaults,options) 
return this.each(function(){ 
var $this = $(this); 
//빌드 요소별 옵션 
var o = $.meta ? $.extend({},opts,$this.data()) : opts; 🎜>/ /일반적으로 메타데이터 기능을 지원합니다. 
}) 
} 

 
몇 줄만 변경하면 다음과 같은 효과가 나타납니다. 

1. 메타데이터가 구성되었습니다
2. 구성된 경우 추가 메타데이터로 구성 속성을 확장

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

좋은 하루 되세요!메타데이터입니다

좋은 하루 보내세요
< ;/div>

좋은 하루 보내세요

스크립트를 통해 메타데이터 구성에 따라 이러한 div 태그를 별도로 강조 표시할 수 있습니다.

코드 복사

코드는 다음과 같습니다. $('.hilight').hilight();

마지막으로 모든 코드를 합칩니다.

코드 복사

코드는 다음과 같습니다.

 
// 
//클로저 생성 
// 
(function($){ 
// 
// 플러그인 정의 
// 
$ .fn.hilight = function(options){ 
debug(this); 
//요소 반복 전에 기본 옵션 빌드 
var opts = $.extend({}, $.fn.hilight.defaults, options);//일치하는 각 요소를 반복하고 형식을 다시 지정합니다. 
return this.each(function(){ 
$this = $(this); 
//요소별 옵션 빌드 
var o = $.meta ? $.extend({}, opts, $this.data()) : opts; 
//요소 스타일 업데이트 
$this.css({ 
BackgroundColor: , 
color: o.foreground 
}); 
var markup = $this.html() 
//형식 함수 호출 
} 
 // 
// 디버깅을 위한 전용 함수 
// 
function debug($obj){ 
if(window.console && window.console.log){ 
window.console.log ('hilight Selection count: ' $obj.size()); 
} 
}; 
// 
// 형식 함수 정의 및 노출 
// 
$. fn.hilight.format = function(txt){ 
return '' txt '' 
}; 
// 
// 플러그인 기본값 
 // 
$.fn.hilight.defaults = { 
전경 : '빨간색', 
배경 : '노란색' 
}; 
// 
// 클로저 종료 
// 
})(jQuery); 


转载请注明处