jQuery 플러그 인 개발 상세 강좌
13225 단어 jquery 플러그 인
jQuery 플러그 인과 방법 을 확장 하 는 역할 은 매우 강력 하 며, 대량의 개발 시간 을 절약 할 수 있 습 니 다.이 글 은 jQuery 플러그 인 개발 의 기본 지식, 최선 의 방법 과 흔히 볼 수 있 는 함정 을 개술 할 것 이다.
입문
jQuery 플러그 인 을 만 드 는 것 은 jQuery. fn 에 새로운 기능 속성 을 추가 하 는 것 입 니 다. 여기에 추 가 된 대상 속성의 이름 은 플러그 인의 이름 입 니 다.
jQuery.fn.myPlugin = function(){
//
};
사용자 가 매우 좋아 하 는 $기호 가 어디 갔 습 니까?이것 은 여전히 존재 합 니 다. 그러나 다른 자바 스 크 립 트 라 이브 러 리 와 충돌 하지 않도록 jQuery 를 실행 하 는 폐쇄 프로그램 에 전달 하 는 것 이 좋 습 니 다. jQuery 는 이 프로그램 에서 $기호 로 표시 하면 $번호 가 다른 라 이브 러 리 에 복사 되 는 것 을 피 할 수 있 습 니 다.
(function ($) {
$.fn.myPlugin = function () {
//
};
})(jQuery);
이 폐쇄 프로그램 에서 우 리 는 jQuery 함 수 를 표시 하기 위해 $기 호 를 무제 한 사용 할 수 있 습 니 다.
2. 환경 은 이제 실제 플러그 인 코드 를 작성 할 수 있 습 니 다.그러나 그 전에 플러그 인 이 처 한 환경 에 대해 개념 을 가 져 야 합 니 다.플러그 인의 범위 내 에서 this 키 워드 는 이 플러그 인 이 실행 할 jQuery 대상 을 대표 합 니 다. 여기 서 일반적인 오류 가 발생 하기 쉽 습 니 다. callback 을 포함 한 jQuery 함수 에서 this 키 워드 는 원래 의 DOM 요 소 를 대표 하기 때 문 입 니 다.이 로 인해 개발 자 들 이 this 키 워드 를 jQuery 에 잘못 포함 시 킬 수 있 습 니 다. 다음 과 같 습 니 다.
(function ($) {
$.fn.myPlugin = function () {
// this $ $(this)， this jQuery 。
//$(this) $($('#element'));
this.fadeIn('normal', function () {
// callback this DOM
});
};
})(jQuery);
$('#element').myPlugin();
기초 지식
이제 jQuery 플러그 인의 기본 지식 을 이해 하고 플러그 인 을 써 서 뭔 가 를 하 자.
(function ($) {
$.fn.maxHeight = function () {
var max = 0;
this.each(function () {
max = Math.max(max, $(this).height());
});
return max;
};
})(jQuery);
var tallest = $('div').maxHeight(); // div
이것 은 간단 한 플러그 인 입 니 다. height () 를 이용 하여 페이지 에서 가장 높 은 div 요소 의 높이 를 되 돌려 줍 니 다.
4. 유지 보수 Chainability
한 플러그 인의 의 도 는 수집 한 요 소 를 특정한 방식 으로 수정 하고 체인 의 다음 방법 에 전달 하 는 경우 가 많 습 니 다.이것 은 jQuery 의 디자인 의 아름다움 으로 jQuery 가 이렇게 인기 있 는 이유 중의 하나 이다.따라서 플러그 인의 chainability 를 유지 하려 면 플러그 인 이 this 키 워드 를 되 돌려 주 는 지 확인 해 야 합 니 다.
(function ($) {
$.fn.lockDimensions = function (type) {
return this.each(function () {
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');
플러그 인 이 this 키 워드 를 되 돌려 주기 때문에 chainability 를 유지 합 니 다. 그러면 jQuery 가 수집 한 요 소 는 jQuery 방법, 예 를 들 어. css 에 의 해 계속 제 어 될 수 있 습 니 다.따라서 플러그 인 이 고유 한 가 치 를 되 돌려 주지 않 는 다 면, 항상 그 역할 범위 내 에서 this 키 워드 를 되 돌려 야 합 니 다.또한 플러그 인 에 전 달 된 매개 변 수 는 플러그 인의 역할 범위 내 에서 전 달 될 것 으로 추정 할 수 있 습 니 다.따라서 앞의 예 에서 문자열 'width' 는 플러그 인의 형식 매개 변수 가 되 었 습 니 다.
5. 기본 값 과 옵션 은 비교적 복잡 하고 맞 춤 형 플러그 인 을 제공 합 니 다. 플러그 인 이 호출 될 때 확장 할 수 있 는 기본 설정 ($. extend 사용) 이 있 는 것 이 좋 습 니 다.따라서 대량의 매개 변수 가 있 는 플러그 인 을 호출 하 는 것 보다 대상 매개 변 수 를 호출 할 수 있 습 니 다. 덮어 쓰 고 싶 은 설정 을 포함 합 니 다.
(function ($) {
$.fn.tooltip = function (options) {
// ，
var settings = $.extend({
'location': 'top',
'background-color': 'blue'
}, options);
return this.each(function () {
// Tooltip
});
};
})(jQuery);
$('div').tooltip({
'location': 'left'
});
이 예 에서 tooltip 플러그 인 을 호출 할 때 기본 설정 의 location 옵션 을 덮어 썼 습 니 다. background - color 옵션 은 기본 값 을 유지 하기 때문에 최종 적 으로 호출 된 설정 값 은:
{
'location': 'left',
'background-color': 'blue'
}
이것 은 개발 자가 사용 할 수 있 는 모든 옵션 을 정의 하지 않 고 고도 로 설정 할 수 있 는 플러그 인 을 제공 하 는 유연 한 방식 이다.
6. 네 임 스페이스
정확 한 네 임 스페이스 의 플러그 인 은 플러그 인 개발 의 매우 중요 한 부분 입 니 다.정확 한 네 임 스페이스 는 플러그 인 이 다른 플러그 인 이나 같은 페이지 의 다른 코드 에 덮어 쓸 수 있 는 아주 낮은 기 회 를 보장 할 수 있 습 니 다.네 임 스페이스 는 플러그 인 개발 자로 서 의 생활 을 더욱 쉽게 할 수 있 습 니 다. 왜냐하면 그것 은 당신 의 방법, 사건 과 데 이 터 를 더욱 잘 추적 하 는 데 도움 을 줄 수 있 기 때 문 입 니 다.
7. 플러그 인 방법
어떠한 경우 에 도 하나의 단독 플러그 인 은 jQuery. fnjQuery. fn 대상 에 여러 개의 네 임 스페이스 가 있어 서 는 안 됩 니 다.
(function ($) {
$.fn.tooltip = function (options) {
// this
};
$.fn.tooltipShow = function () {
// is
};
$.fn.tooltipHide = function () {
// bad
};
$.fn.tooltipUpdate = function (content) {
// !!!
};
})(jQuery);
$. fn 이 $. fn 네 임 스페이스 를 혼 란 스 럽 게 하기 때문에 격려 되 지 않 습 니 다.이 문 제 를 해결 하기 위해 서 는 대상 텍스트 의 모든 플러그 인 방법 을 수집 하고 이 방법 을 전달 하 는 문자열 이름 을 통 해 플러그 인 에 호출 해 야 합 니 다.
(function ($) {
var methods = {
init: function (options) {
// this
},
show: function () {
// is
},
hide: function () {
// good
},
update: function (content) {
// !!!
}
};
$.fn.tooltip = function (method) {
//
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method' + method + 'does not exist on jQuery.tooltip');
}
};
})(jQuery);
// init
$('div').tooltip();
// init
$('div').tooltip({
foo: 'bar'
});
// hide
$('div').tooltip('hide');
// Update
$('div').tooltip('update', 'This is the new tooltip content!');
이러한 유형의 플러그 인 구 조 는 부모 패키지 에 모든 방법 을 패키지 할 수 있 습 니 다. 이 방법 을 전달 하 는 문자열 이름과 추가 적 인 이 방법 에 필요 한 매개 변 수 를 통 해 호출 할 수 있 습 니 다.이러한 방법의 패 키 징 과 구조 유형 은 jQuery 플러그 인 커 뮤 니 티 의 표준 으로 jQuery UI 의 플러그 인과 widgets 를 포함 하여 수많은 플러그 인 에 의 해 사용 되 고 있 습 니 다.
8. 이벤트 의 잘 알려 지지 않 은 bind 방법 은 이벤트 네 임 스페이스 를 연결 하 는 것 을 허용 합 니 다.플러그 인 이 이 벤트 를 연결 하면 이 이벤트 의 이름 공간 을 부여 하 는 것 이 좋 습 니 다.이러한 방식 을 통 해 바 인 딩 을 해제 할 때 바 인 딩 된 다른 유형의 사건 에 방해 가 되 지 않 습 니 다. 바 인 딩 이 필요 한 이벤트 에 추가 네 임 스페이스 를 통 해 '. < namespace >' 를 통과 할 수 있 습 니 다.
(function ($) {
var methods = {
init: function (options) {
return this.each(function () {
$(window).bind('resize.tooltip', methods.reposition);
});
},
destroy: function () {
return this.each(function () {
$(window).unbind('.tooltip');
})
},
reposition: function () {
//...
},
show: function () {
//...
},
hide: function () {
//...
},
update: function (content) {
//...
}
};
$.fn.tooltip = function (method) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist on jQuery.tooltip');
}
};
})(jQuery);
$('#fun').tooltip();
// ... ...
$('#fun').tooltip('destroy');
이 예 에서 tooltip 이 init 방법 으로 초기 화 될 때 reposition 방법 을 resize 이벤트 에 연결 하고 reposition 비 그 방법 에 네 임 스페이스 를 추가 로 부여 합 니 다. tooltip.잠시 후, 개발 자가 tooltip 을 소각 해 야 할 때, 우 리 는 그 중의 reposition 방법 과 resize 이벤트 의 연결 을 동시에 해제 하고, reposition 의 네 임 스페이스 를 통 해 플러그 인 에 게 전달 할 수 있 습 니 다.이것 은 우리 로 하여 금 이벤트 의 바 인 딩 을 안전하게 해제 할 수 있 게 하 며 이 플러그 인 이외 의 바 인 딩 에 영향 을 주지 않 습 니 다.
데이터
보통 플러그 인 을 개발 할 때 플러그 인 이 요소 에 초기 화 되 었 는 지 기록 하거나 확인 해 야 할 수도 있 습 니 다.jQuery 의 data 방법 을 사용 하 는 것 은 요소 기반 변 수 를 기록 하 는 좋 은 방법 입 니 다.그럼 에 도 불구 하고 다양한 이름 의 분 리 된 데 이 터 를 기록 하 는 것 보다 하나의 단독 대상 을 사용 하여 모든 변 수 를 저장 하고 하나의 단독 네 임 스페이스 를 통 해 이 대상 을 읽 는 것 이 더 좋 은 방법 입 니 다.
(function ($) {
var methods = {
init: function (options) {
return this.each(function () {
var $this = $(this),
data = $this.data('tooltip'),
tooltip = $('<div />', {
text: $this.attr('title')
});
// If the plugin hasn't been initialized yet
if (!data) {
/*
Do more setup stuff here
*/
$(this).data('tooltip', {
target: $this,
tooltip: tooltip
});
}
});
},
destroy: function () {
return this.each(function () {
var $this = $(this),
data = $this.data('tooltip');
// Namespacing FTW
$(window).unbind('.tooltip');
data.tooltip.remove();
$this.removeData('tooltip');
})
},
reposition: function () {
// ...
},
show: function () {
// ...
},
hide: function () {
// ...
},
update: function (content) {
// ...
}
};
$.fn.tooltip = function (method) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist on jQuery.tooltip');
}
};
})(jQuery);
데 이 터 를 네 임 스페이스 를 통 해 한 대상 에 밀봉 하면 한 집중 적 인 위치 에서 모든 플러그 인의 속성 을 쉽게 읽 을 수 있 습 니 다.10. 총화 와 최선 의 방법
jQuery 플러그 인 을 작성 하면 라 이브 러 리 를 만 들 수 있 습 니 다. 가장 유용 한 기능 을 재 활용 가능 한 코드 로 통합 하면 개발 자의 시간 을 절약 하고 개발 을 더욱 효율 적 으로 할 수 있 습 니 다.jQuery 플러그 인 을 개발 할 때 명심 하 세 요:
1. 닫 힌 플러그 인 에 항상 감 싸 기:
(function($) {
/* plugin goes here */
})(jQuery);
2. 플러그 인의 기능 범위 내 에서 this 키 워드 를 불필요 하 게 감 싸 지 마 십시오.
3. 플러그 인 이 특정 값 을 되 돌려 주지 않 으 면 항상 this 키 워드 를 되 돌려 chainability 를 유지 합 니 다.
4. 플러그 인 에 대량의 인자 가 아 닌 확장 가능 한 기본 대상 인 자 를 전달 합 니 다.
5. 한 플러그 인 에서 여러 번 다른 방법 을 명명 하지 마 세 요.
3. 항상 네 임 스페이스 의 방법, 사건 과 데이터.
좋은 웹페이지 즐겨찾기
