Jquery 개발 플러그인
11728 단어 jquery플러그 인jquery 플러그인
하나는 클래스 단계의 플러그인 개발입니다. 즉, jQuery에 새로운 전역 함수를 추가하는 것입니다. 이것은 jQuery 클래스 자체에 방법을 추가하는 것과 같습니다.jQuery의 전역 함수는 jQuery 명명 공간에 속하는 함수이고, 다른 하나는 대상 단계의 플러그인 개발, 즉 jQuery 대상에 추가하는 방법이다.다음은 두 가지 함수의 개발에 대해 상세한 설명을 드리겠습니다.
1. 클래스급 플러그인 개발
클래스 단계의 플러그인 개발의 가장 직접적인 이해는 jQuery 클래스에 클래스를 추가하는 방법으로 정적 방법을 추가하는 것으로 이해할 수 있다.전형적인 예는 $이다.AJAX () 함수는 jQuery의 이름 공간에 함수를 정의합니다.클래스 수준의 플러그인 개발은 다음과 같은 몇 가지 형식으로 확장할 수 있습니다.
1.1 새 전역 함수 추가
글로벌 함수를 추가하려면 다음과 같이 정의해야 합니다.
Java 코드
jQuery.foo = function() {
alert('This is a test. This is only a test.');
};
1.2 여러 글로벌 함수 증가
다음과 같이 정의할 수 있는 여러 글로벌 함수를 추가합니다. Java 코드
jQuery.foo = function() {
alert('This is a test. This is only a test.');
};
jQuery.bar = function(param) {
alert('This function takes a parameter, which is "' + param + '".');
};
:jQuery.foo();jQuery.bar(); $.foo();$.bar('bar');
1.3 jQuery를 사용합니다.extend(object);Java 코드
jQuery.extend({
foo: function() {
alert('This is a test. This is only a test.');
},
bar: function(param) {
alert('This function takes a parameter, which is "' + param +'".');
}
});
1.4 네임스페이스 사용
jQuery 이름 공간에서 자바스크립트 함수 이름과 변수 이름을 대량으로 사용하는 것을 금지합니다.그러나 일부 함수나 변수 이름이 다른 jQuery 플러그인과 충돌하는 것을 피할 수 없기 때문에, 우리는 일부 방법을 다른 사용자 정의 이름 공간에 봉인하는 습관이 있습니다.Java 코드
jQuery.myPlugin = {
foo:function() {
alert('This is a test. This is only a test.');
},
bar:function(param) {
alert('This function takes a parameter, which is "' + param + '".');
}
};
， ：
$.myPlugin.foo();
$.myPlugin.bar('baz');
이 기교 (독립된 플러그인 이름 사용) 를 통해 우리는 이름 공간 내 함수의 충돌을 피할 수 있다.
2. 개체 수준의 플러그인 개발
개체 수준의 플러그인 개발에는 다음과 같은 두 가지 형태가 필요합니다.
형식 1: Java 코드
(function($){
$.fn.extend({
pluginName:function(opt,callback){
// Our plugin implementation code goes here.
}
})
})(jQuery);
형식 2:
Java 코드
(function($) {
$.fn.pluginName = function() {
// Our plugin implementation code goes here.
};
})(jQuery);
jQuery , $， , jQuery . 。 , jQuery , $ , prototype .
2.1 JQuery 이름 공간에 이름 설명
이것은 단일 플러그인의 스크립트입니다.스크립트에 여러 플러그인이나 역플러그인 (예:. fn.doSomething () 과.fn.undoSomething ()), 여러 함수 이름을 설명해야 합니다.그러나, 보통 우리가 플러그인을 작성할 때, 하나의 이름만 사용해서 모든 내용을 포함하도록 노력한다.우리의 예시 플러그인은 "highlight"라고 명명되었다
Java 코드
$.fn.hilight = function() {
// Our plugin implementation code goes here.
};
：
$('#myDiv').hilight();
그러나 만약 우리가 우리의 실현 코드를 여러 함수로 분해해야 한다면 어떻게 해야 합니까?많은 이유가 있다. 디자인에 대한 수요,이렇게 하면 더욱 쉽거나 쉽게 읽을 수 있다.그리고 이렇게 하면 대상을 향한 것에 더욱 부합된다.이것은 여분의 명칭 공간을 늘리지 않고 기능을 여러 함수로 분해하는 것은 정말 번거로운 일이다.함수가 자바스크립트에서 가장 기본적인 클래스 대상임을 인식하고 이용하기 때문에 우리는 이렇게 할 수 있다.다른 대상과 마찬가지로 함수는 속성으로 지정할 수 있다.따라서 우리는'hilight'를 jQuery의 속성 대상으로 명시했다. 다른 속성이나 함수는 우리가 노출해야 할 것이고'hilight'함수에서 속성을 명시할 수 있다.이따가 계속해.2.2 옵션 파라미터를 받아들여 플러그인의 행동을 제어한다
플러그인에 전경색과 배경색을 지정하는 기능을 추가합니다.우리는 옵션을 옵션의 대상처럼 플러그인 함수에 전달할 수도 있습니다.예: Java 코드
// plugin definition
$.fn.hilight = function(options) {
var defaults = {
foreground: 'red',
background: 'yellow'
};
// Extend our default options with those provided.
var opts = $.extend(defaults, options);
// Our plugin implementation code goes here.
};
：
$('#myDiv').hilight({
foreground: 'blue'
});
2.3 노출 플러그인의 기본 설정
위 코드에 대한 개선은 플러그인을 노출하는 기본 설정입니다.이것은 플러그인 사용자로 하여금 비교적 적은 코드로 플러그인을 덮어쓰고 수정하기 쉽게 한다.다음에 우리는 함수 대상을 이용하기 시작한다.
Java 코드
// plugin definition
$.fn.hilight = function(options) {
// Extend our default options with those provided.
// Note that the first arg to extend is an empty object -
// this is to keep from overriding our "defaults" object.
var opts = $.extend({}, $.fn.hilight.defaults, options);
// Our plugin implementation code goes here.
};
// plugin defaults - added as a property on our plugin function
$.fn.hilight.defaults = {
foreground: 'red',
background: 'yellow'
};
：
// ， ready
$.fn.hilight.defaults.foreground = 'blue';
， ：
$('#myDiv').hilight();
보시다시피, 사용자는 플러그인의 기본 전경에 코드를 한 줄 쓸 수 있습니다.또한 사용자는 필요할 때 이 새 기본값을 덮어쓸 수 있습니다.
//플러그인의 기본 배경색 덮어쓰기
$.fn.hilight.defaults.foreground = ‘blue’;
//…
//새 기본 설정을 사용하여 플러그인 호출
$(‘.hilightDiv’).hilight();
//…
//설정 파라미터를 플러그인에 전달하는 방법으로 부족한 설정을 덮어쓰기
$(‘#green’).hilight({
foreground: ‘green’
});
2.4 적당한 함수 노출
이 단락은 한 걸음 한 걸음 앞의 코드에 대해 재미있는 방법으로 플러그인을 확장합니다. (다른 사람이 플러그인을 확장하도록 합니다.)예를 들어, 우리 플러그인은 하이라이트 텍스트를 포맷하기 위해 'format' 이라는 함수를 정의할 수 있습니다.우리의 플러그인은 현재 이렇게 보입니다. 기본format 방법의 실현 부분은hiligth 함수 아래에 있습니다.Java 코드
// plugin definition
$.fn.hilight = function(options) {
// iterate and reformat each matched element
return this.each(function() {
var $this = $(this);
// ...
var markup = $this.html();
// call our format function
markup = $.fn.hilight.format(markup);
$this.html(markup);
});
};
// define our format function
$.fn.hilight.format = function(txt) {
return '<strong>' + txt + '</strong>';
};
options 。 。 format 。 ， ， ， 。
， 。 Cycle . Cycle ， ， ， 。 ， 。 。 Cycle "transitions" ， 。 ：
$.fn.cycle.transitions = {
//…
};
이 기교는 다른 사람들로 하여금 Cycle 플러그인에 변환 설정을 정의하고 전달할 수 있게 한다.
2.5 사유 함수의 사유성을 유지한다
이런 기교는 플러그인의 일부분을 덮어쓰는 것이 매우 강하다는 것을 폭로한다.하지만 실현 과정에서 드러난 부분을 꼼꼼히 생각해야 한다.노출되면, 매개 변수나 의미에 대한 어떤 변화도 머릿속으로 유지해야 한다. 아마도 이후의 호환성을 파괴할 것이다.하나의 통리는 특정한 함수가 노출되었는지 아닌지를 확신할 수 없다면, 그렇게 할 필요가 없을지도 모른다는 것이다.
그렇다면 우리는 어떻게 더 많은 함수를 정의하여 명명 공간을 어지럽히지 않고 실현을 폭로하지 않겠는가?이것이 바로 클로즈업 기능이다.시범을 보이기 위해서, 우리는 플러그인에 다른 'debug' 함수를 추가할 것입니다.이 debug 함수는 선택한 요소를 Firebug 컨트롤러에 출력합니다.클립을 만들기 위해서, 모든 플러그인을 함수에 정의합니다.Java 코드
(function($) {
// plugin definition
$.fn.hilight = function(options) {
debug(this);
// ...
};
// private function for debugging
function debug($obj) {
if (window.console && window.console.log)
window.console.log('hilight selection count: ' + $obj.size());
};
// ...
})(jQuery);
우리의'debug'방법은 외부에서 패키지를 닫고 들어갈 수 없기 때문에 우리의 실현은 개인적인 것이다.
2.6 Metadata 플러그인 지원
당신이 쓰고 있는 플러그인을 토대로 메타데이터 플러그인에 대한 지원을 추가하면 그를 더욱 강하게 할 수 있습니다.개인적으로, 나는 이 메타데이터 플러그인을 좋아한다. 왜냐하면, 이것은 플러그인을 덮어쓰는 옵션을 많이 사용하지 않기 때문이다. (이것은 예를 만들 때 매우 유용하다.)그리고 그것을 지원하는 것은 매우 간단하다.업데이트: 주석에 최적화 제안이 있습니다.Java 코드
$.fn.hilight = function(options) {
// ...
// build main options before element iteration
var opts = $.extend({}, $.fn.hilight.defaults, options);
return this.each(function() {
var $this = $(this);
// build element specific options
var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
//...
이 변동 줄들은 몇 가지 일을 했습니다. Metadata 플러그인이 설치되었는지 테스트하는 것입니다. 만약 설치되어 있다면, 옵션의 대상을 확장할 수 있습니다. 메타데이터 추출을 통해 이 줄을 마지막 인자로 JQuery에 추가할 수 있습니다.extend, 그러면 다른 옵션 설정을 덮어씁니다.이제 "markup"에서 동작을 구동할 수 있습니다. "markup"을 선택했다면:
호출할 때 이렇게 쓸 수 있습니다: jQuery.foo(); 또는 $.foo();
Java 코드
<!-- markup -->
<div class="hilight { background: 'red', foreground: 'white' }">
Have a nice day!
</div>
<div class="hilight { foreground: 'orange' }">
Have a nice day!
</div>
<div class="hilight { background: 'green' }">
Have a nice day!
</div>
div ：
$('.hilight').hilight();
2.7 다음의 예가 완성된 코드를 통합합니다.
Java 코드
//
(function($) {
//
$.fn.hilight = function(options) {
debug(this);
// build main options before element iteration
var opts = $.extend({}, $.fn.hilight.defaults, options);
// iterate and reformat each matched element
return this.each(function() {
$this = $(this);
// build element specific options
var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
// update element styles
$this.css({
backgroundColor: o.background,
color: o.foreground
});
var markup = $this.html();
// call our format function
markup = $.fn.hilight.format(markup);
$this.html(markup);
});
};
// ：debugging
function debug($obj) {
if (window.console && window.console.log)
window.console.log('hilight selection count: ' + $obj.size());
};
// format
$.fn.hilight.format = function(txt) {
return '<strong>' + txt + '</strong>';
};
// defaults
$.fn.hilight.defaults = {
foreground: 'red',
background: 'yellow'
};
//
})(jQuery);
이 디자인은 나로 하여금 규범에 맞는 강력한 플러그인을 만들게 했다.나는 그것이 너도 할 수 있기를 바란다.
3. 총결산
jQuery는 다음과 같은 두 가지 방법으로 플러그인을 개발합니다.
jQuery.fn.extend(object); jQuery 객체에 메서드를 추가합니다.jQuery.extend(object); jQuery 클래스 자체를 확장하기 위해서입니다.클래스에 새로운 방법을 추가합니다.
3.1 jQuery.fn.extend(object);
fn이 뭐지?jQuery 코드를 보면 쉽게 찾을 수 있습니다.
jQuery.fn = jQuery.prototype = {
init: function( selector, context ) {//….
//……
};
원래 jQuery.fn = jQuery.prototype.프로토타입이 낯설지 않을 거예요.자바스크립트는 명확한 클래스 개념이 없지만 클래스로 이해하면 더욱 편리하다.jQuery는 아주 잘 봉인된 클래스입니다. 예를 들어 문장 $("#btn1") 을 사용하면 jQuery 클래스의 실례를 만들 수 있습니다.
jQuery.fn.extend(object); 그래, jQuery.prototype 확장은 jQuery 클래스에 '구성원 함수' 를 추가하는 것입니다.jQuery 클래스의 실례는 이 '구성원 함수' 를 사용할 수 있습니다.
예를 들어 우리는 플러그인을 개발하여 특수한 편집 상자를 만들어야 한다. 이 플러그인이 눌렸을 때, 현재 편집 상자의 내용을 알 수 있다.다음을 수행할 수 있습니다.
$.fn.extend({
alertWhileClick:function(){
$(this).click(function(){
alert($(this).val());
});
}
});
$(“#input1”).alertWhileClick();//페이지에서 다음을 수행합니다.
$("# input1") 은 jQuery 실례입니다. 구성원 방법인alertWhileClick을 호출하면 확장이 이루어집니다. 클릭할 때마다 현재 편집된 내용을 먼저 팝업합니다.
3.2 jQuery.extend(object);
jQuery 클래스에 클래스를 추가하는 방법은 정적 방법을 추가하는 것으로 이해할 수 있습니다.예:
$.extend({
add:function(a,b){return a+b;}
});
jQuery에dd의 '정적 방법' 을 추가하면 jQuery를 도입하는 곳에서 이 방법을 사용할 수 있습니다. $.add(3,4);//return 7
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
jQuery 전후 예이 기사에서는 jquery after() 및 before() 메소드의 예를 볼 것입니다. before() 메서드는 선택한 요소 앞에 지정된 콘텐츠를 삽입합니다. after() 메서드는 선택한 요소 뒤에 지정된 콘텐츠...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
