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

jQuery의 본체는 다음과 같습니다.

(function(){ ……})();

은 Javascript를 잘 모르는 사람에게는 낯설습니다. 실제로 이 표현식은 익명 함수(첫 번째 대괄호)를 선언한 다음 이를 실행합니다(두 번째 대괄호). 이 함수에서는 일련의 jQuery 메서드 및 개체 정의가 완료됩니다. 24행이 중요합니다.

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

jQuery = window. jQuery = window.$ = function( selector, context ) {
// jQuery 객체는 실제로 '향상된' 초기화 생성자입니다.
return new jQuery.fn.init( selector, context )
}

여기서 매우 강력한 $ 함수가 정의됩니다. $는 실제로 jQuery의 별칭입니다. jQuery는 "진정한" jQuery 함수이고, $의 정의는 단지 프로그래머가 입력하는 양을 줄이기 위한 것입니다. $는 다른 라이브러리와 쉽게 충돌할 수 있습니다. 예를 들어 유명한 프로토타입 라이브러리도 이 이름을 사용합니다. 그러나 jQuery가 다른 라이브러리와 충돌할 가능성이 훨씬 적으므로 jQuery를 사용하는 것이 $보다 훨씬 안전합니다. 다음에는 갈등에 대해 이야기해 보겠습니다. 반환 객체 fn의 35행 정의를 보세요.

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

jQuery.fn = jQuery.prototype = {
init: function( selector, context ) { … }, …
}

분명히 fn은 jQuery의 프로토타입일 뿐입니다. 약어. 초기화 함수가 정의됩니다. 실제로 init은 jQuery의 생성자 역할을 합니다. var i=$('selector')와 같은 코드를 사용하면 변수 i가 jQuery로 래핑되어 있음을 알 수 있습니다. 즉, i는 jQuery.fn 메서드를 가져옵니다. 분명히 i의 프로토타입은 jQuery.fn을 가리키고 있습니다. Javascript의 세계에서는 i가 jQuery의 인스턴스라고 말할 수 있습니다. i 인스턴스of jQuery를 시도하면 true가 반환됩니다. 그러나 여기서는 i=new $(selector)가 사용되지 않습니다. $가 일반적으로 사용되는 함수인 것으로 추정됩니다. 매번 객체를 생성하기 위해 new를 사용해야 한다면 이것이 너무 번거로울 것입니다. init 이 존재하면 $ 자체는 init 객체를 반환하는 코드 한 줄만 포함된 매우 간단한 함수로 정의됩니다. $(selector) 메소드를 호출할 때마다 jQuery 객체가 반환됩니다. 공장모드 냄새가 좀 나네요. 물론, Javascript에 익숙하다면 이것이 충분하지 않다는 것을 알 것입니다. init의 프로토타입을 jQuery.fn의 코드 541번째 줄로 설정해야 합니다.

jQuery.fn.init.prototype = jQuery.fn ;

540번째 줄까지는 모두 정의된 jQuery 프로토타입 객체입니다. OO 언어에서는 540번째 줄부터 일련의 jQuery 메서드가 정의됩니다. 정적 메서드와 동일합니다. 이 시점에서는 메소드의 특정 구현(일부는 너무 어렵습니다)에 관계없이 jQuery의 구조는 기본적으로 명확합니다. 확장부터 시작하겠습니다.

jQuery를 확장할 때 가장 먼저 주의해야 할 점은 이름 충돌, 특히 인기 있는 $를 피하는 것입니다. jQuery는 jQuery가 다른 라이브러리와의 충돌을 피하기 위해 $ 기호를 포기하고 프로그래머가 jQuery에서 제공하는 메서드를 호출하기 위해 완전한 기호 jQuery를 사용할 수 있도록 jQuery.noConflect() 메서드를 신중하게 설계했습니다. noContribute()의 구현은 간단하고 영리합니다. 그런데 우선 21번째 줄에서

// 덮어쓸 경우 $를 매핑합니다.
_$ = window.$, jQuery 첫 번째 기록은 windows .$입니다. 이 코드 줄은 매우 일찍 실행되며 jQuery 함수가 실행되기 전에 실행됩니다. 물론 여기서 갈등의 가능성도 있지만, 그런 이상한 이름을 누가 핵심변수로 삼겠는가? 이때 $가 다른 라이브러리에 의해 점유된 경우 해당 값은 언제든지 _$에 유지됩니다.

코드를 사용하여 619행의 jQuery.noConfluence 메서드를 호출하면 됩니다. 코드 복사 코드는 다음과 같습니다.

noConflect: function( deep ) {
window.$ = _$; 🎜>if ( deep )
window.jQuery = _jQuery;
return jQuery;


이런 식으로 $가 반환됩니다.

플러그인 개발자로서 $가 제공되는지 여부를 보장할 수 없습니다. 가장 안전한 방법은 jQuery 메서드를 호출하는 것입니다. 하지만 다른 부분에 영향을 주지 않고 간단한 $를 유지하는 방법이 있습니다. :

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

(function($){

// 플러그인 코드가 여기에 있으므로 $를 안전하게 사용할 수 있습니다.


플러그인의 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); >}


아래에 테스트용 작은 페이지를 작성하세요. 이 페이지는 주문 제출 페이지를 시뮬레이션합니다. 사용자가 송장 정보를 입력해야 합니다. 그렇지 않으면 송장 정보를 입력할 수 없습니다. 채워지다.

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

<스크립트 유형 ="text /javascript">
$(function() {
$('#OrderID').val($.toFixedWidth('123', 8));
$('#InvoiceRequired ').click(function() {
$('.InvoiceInfo').setReadOnly(!this.checked);
});
}
)

주문 ID:<입력 유형= "text" id="OrderID" />

송장 필수

Inovice Tilte:
송장 내용:

;