jQuery 학습 제7 과 확장 jQuery 기능 플러그 인 개발

jQuery 의 주 체 는 다음 과 같 습 니 다.(function(){...});자 바스 크 립 트 기반 이 좋 지 않 은 사람 에 게 는 이상 하 다.실제로 이 표현 식 은 익명 함수(첫 번 째 괄호)를 설명 한 다음 실행 합 니 다(두 번 째 괄호).이 함수 에서 jQuery 의 일련의 방법 과 대상 의 정 의 를 완성 하 였 습 니 다.24 번 째 줄 은 매우 관건 적 입 니 다
 
jQuery = window.jQuery = window.$ = function( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init( selector, context );
}
여기 서 매우 강력 한$함 수 를 정의 합 니 다.$사실은 jQuery 의 별명 입 니 다.jQuery 야 말로'정통'의 jQuery 함수 입 니 다.$의 정 의 는 프로그래머 의 타 자 를 줄 이기 위 한 것 입 니 다.$다른 라 이브 러 리 와 충돌 하기 쉽다.예 를 들 어 유명한 프로 토 타 입 라 이브 러 리 도 이 이름 을 사용 했다.그러나 jQuery 는 다른 라 이브 러 리 와 충돌 할 기회 가 훨씬 적 기 때문에 jQuery 를 사용 하 는 것 이$보다 안전 합 니 다.다음은 충돌 문 제 를 다시 이야기 하 겠 습 니 다.return 의 대상 fn 의 정 의 를 보면 35 줄
 
jQuery.fn = jQuery.prototype = {
init: function( selector, context ) { …… }, ……
};
fn 은 jQuery 의 원형 약자 일 뿐 임 이 분명 하 다.그 중에서 init 함 수 를 정의 했다.실제로 init 는 jQuery 의 구조 함수 역할 을 한다.var i=$(selector)와 같은 코드 를 사용 할 때 변 수 는 i 가 jQuery 에 의 해 감 싸 인 것 을 발견 할 수 있 습 니 다.즉,i 가 jQuery.fn 을 가 져 온 방법 입 니 다.i 의 prototype 이 jQuery.fn 을 가리 키 는 것 이 분명 하 다.자바 script 의 세계 에서 i 는 jQuery 의 인 스 턴 스 라 고 할 수 있 습 니 다.i instanceof jQuery 를 시도 해 보 세 요.true 로 돌아 갑 니 다.그러나,여 기 는 i=new$(selector)를 사용 하지 않 습 니 다.$는 이렇게 자주 사용 되 는 함수 라 고 생각 합 니 다.매번 new 를 사용 하여 대상 을 구성 하려 면 너무 번 거 롭 습 니 다.이것 이 바로 init 가 존재 하 는 이유 입 니 다.$자 체 는 아주 간단 한 함수 로 정의 되 었 습 니 다.그 내부 에는 한 줄 의 코드 만 있 고 init 대상 을 되 돌려 줍 니 다.우 리 는 매번$(selector)방법 을 호출 할 때마다 jQuery 대상 을 되 돌려 줍 니 다.공장 모드 냄새 나.물론 자바 script 에 익숙 하 다 면 부족 하 다 는 것 을 알 게 될 것 입 니 다.init 의 prototype 을 jQuery.fn,코드 541 줄 로 설정 해 야 합 니 다.jQuery.fn.init.prototype=jQuery.fn;540 줄 까지 정 의 된 jQuery 의 원형 대상 입 니 다.OO 언어 로 말 하면 인 스 턴 스 방법 에 해당 합 니 다.540 줄 부터 일련의 jQuery 방법 을 정 의 했 습 니 다.정적 방법 에 해당 합 니 다.이로써 방법의 구체 적 인 실현 을 떠 나 jQuery 의 구 조 는 기본적으로 명확 해 졌 다.확장 을 소개 하 겠 습 니 다.jQuery 확장 에 있어 서 가장 먼저 주의해 야 할 것 은 이름 충돌 을 피 하 는 것 입 니 다.특히 인기 있 는$입 니 다.주도면밀 한 jQuery 를 고려 하여 jQuery.noConflict()방법 을 설계 하여 jQuery 는$기 호 를 공수 하여 다른 라 이브 러 리 와 충돌 하지 않도록 할 수 있 으 며,프로그래머 는 완전한 기호 jQuery 를 사용 하여 jQuery 가 제공 하 는 방법 을 호출 할 수 있 습 니 다.noConflict()의 실현 은 간단 하면 서도 교묘 합 니 다.참고 로 21 번 째 줄 에서//Map over the$in case of overwrite $=window.$,jQuery 는 먼저 windows.$를 기록 합 니 다.이 코드 의 운행 시간 이 매우 빠 르 므 로 jQuery 의 모든 함수 가 실행 되 기 전에 실 행 됩 니 다.물론,이곳 의 $충돌 할 수도 있 지만 확률 은 너무 작 습 니 다.누가 이런 기괴 한 이름 을 관건 적 인 변수 로 사용 할 수 있 습 니까?이 때$가 다른 라 이브 러 리 에 점용 되 었 다 면,그 값 은 $에 보 존 됩 니 다.에서 언제든지 jQuery.noConflict 방법,619 줄 을 호출 하면 그 코드 는 다음 과 같 습 니 다
 
noConflict: function( deep ) {
window.$ = _$;
if ( deep )
window.jQuery = _jQuery;
return jQuery;
},
그러면$는 다시 돌려 줍 니 다.플러그 인 개발 자로 서 우 리 는$가 공수 되 었 는 지 여 부 를 보장 할 수 없습니다.가장 안전 한 것 은 jQuery 방법 을 호출 하 는 것 입 니 다.그러나 다른 부분 에 영향 을 주지 않 고 간단 한$를 유지 할 수 있 는 기술 이 있 습 니 다.그것 은 바로
 
(function($){

// plugin code goes here, you can use $ safely.

})(jQuery);
플러그 인 에 관 한 js 파일 의 이름 입 니 다.보통 jquery.pluginname.js 입 니 다.jQuery 도구 함수(정적 함수)를 확장 하 는 것 은 매우 쉽 습 니 다.다음 예 는 숫자 를 고정 자릿수 로 확장 하 는 문자열 의 함 수 를 실현 합 니 다
 
(function($) {
$.toFixedWidth = function(value, length, fill) {
var res = value.toString();
if (!fill) fill = 0;
var padding = length - res.length;
if (padding < 0) {
res = res.substr(-padding);
} else {
for (var n = 0; n < padding; n++)
res = fill + res;
}
return res;
}
})(jQuery);
포장 집 을 작성 하 는 방법 도 쉽 습 니 다.다음은 폼 요 소 를 읽 기 전용 으로 하 는 방법 을 실현 합 니 다
 
$.fn.setReadOnly = function(readonly) {
return this.find('input:text').attr('readonly', readonly).css('opacity', readonly ? 0.5 : 1.0);
}
아래 작은 페이지 를 작성 하여 테스트 합 니 다.이 페이지 는 주문 제출 페이지 를 모 의 한 것 입 니 다.사용자 가 영수증 이 필요 하 다 면 영수증 정 보 를 작성 해 야 합 니 다.그렇지 않 으 면 영수증 정 보 를 작성 할 수 없습니다
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Extension</title>
<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script src="jquery.yinzixin.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#OrderID').val($.toFixedWidth('123', 8));
$('#InvoiceRequired').click(function() {
$('.InvoiceInfo').setReadOnly(!this.checked);
});
$('.InvoiceInfo').setReadOnly(false);
}
);
</script>
</head>
<body>
<form>
Order ID:<input type="text" id="OrderID" /> <br />
<input type="checkbox" id="InvoiceRequired" />Invoice Required<br />
<div class="InvoiceInfo">
Inovice Tilte:<input type="text" id="Text1" />
Invoice Content:<input type="text" id="Text2" />
</div>
<input type="button" value="Submit" />
</form>
</body>
</html>

좋은 웹페이지 즐겨찾기