jQuery(객체 구성)_jquery 중 하나 읽기

특히 Prototype의 $를 사용한 후 jQuery를 작성하는 방법에 대해 매우 혼란스러워서 한동안 jQuery의 $를 이해할 수 없었습니다. 현재 프론트엔드를 공부하는 학생들에게는 jQuery가 가장 먼저 접하게 될 것이며 매우 익숙하고 자연스럽다고 느낄 것입니다.

그때의 API 문서가 아직도 내 컴퓨터에 저장되어 있어서 감사의 마음을 표현하기 위해 사진을 올려보겠습니다

이 기간 동안 저의 초보 선생님은 모모 선생님이셨습니다. 사실 그는 지금도 제가 존경하는 동료 중 한 분입니다. 그의 프로그래밍 실력은 매우 높으며, 그는 이미 프로그래밍 언어의 한계를 극복했다고 믿습니다. 모두가 Prototype.js를 사용하고 있었고 jQuery가 중국에서 아직 대중화되기 전에 그는 이미 jQuery를 프로젝트에 도입했습니다.

본론으로 돌아가서, 현재 jQuery 버전은 1.6.1에 이르렀습니다. 당시 약 2,000라인에서 9,000라인으로 확장되었습니다. 조만간 1w선을 돌파할 것으로 믿습니다. 일부 간단한 웹 페이지의 경우 jQuery를 도입하는 것은 더 이상 그렇게 가볍지 않습니다. 여기 연구는 1.6.1 버전인데, 읽고 쓰기를 동시에 하고, 최종적으로 약 1,000줄의 "미니 jQuery"를 작성하게 됩니다.

다음은 jQuery 1.6.1 코드입니다

코드를 복사하세요 코드는 다음과 같습니다

var jQuery = function( selector, context ) {
// jQuery 객체는 실제로 'enhanced' 초기화 생성자일 뿐입니다.
return new jQuery.fn.init( selector, context, rootjQuery );
},
...
class2type = {};

jQuery.fn = jQuery.prototype = {
생성자: jQuery,
init: function(selector, context, rootjQuery){
}
}

// 나중에 인스턴스화하기 위해 init 함수에 jQuery 프로토타입 제공
jQuery.fn.init.prototype = jQuery.fn; 🎜>

얼핏 보면
프로토타입 메서드
를 사용하여 jQuery(별칭 $) 클래스를 작성하는 것처럼 보이지만 실제로 사용할 때는 함수 호출을 사용합니다. $("#id"), 새로운 $("# id")가 아닙니다. 식별자
jQuery는 init 함수의 새 인스턴스를 생성한 후 반환하는 함수입니다. 지금까지 우리는 실제 생성자가 jQuery.fn.init라는 것을 알고 있습니다. jQuery를 작성하는 방법은 정말 이상합니다. jQuery 프로토타입에 init가 걸려 있어 읽기가 다소 혼란스럽습니다. jQuery.fn.init.prototype = jQuery.fn;

이 핵심 문장입니다. 이 문장은 jQuery 함수의 프로토타입을 init 함수의 프로토타입에 할당합니다. $("#id")를 호출할 때 반환되는 개체는 두 부분으로 구성됩니다. 1, init 함수에서 가져온 것(예: this.context) 2, 함수 jQuery의 프로토타입에서 가져온 것(예: this.size/this.toArray);
jQuery를 흉내내어

코드 복사 코드는 다음과 같습니다. / / zchain-0.1 .js

function $(selector){

return new $.prototype.init(selector)
}
$.prototype={
init:function(selector) {
if(selector === 정의되지 않음){
this.length = 0;
return this
}
if(selector.nodeType==1){
this[ 0] = 선택기 ;
}else{
this[0]=document.getElementById(selector);
}
this.length=1;
css:function (name,value ){
this[0].style[name] = value;
return this;//체인 호출
},
hide:function(){
var self =this;
setTimeout(function(){
self[0].style.display="none";
},3000)
return this;//체인 호출
}
}
$.prototype.init.prototype=$.prototype;


간단함을 위해 여기의 선택기는 html 요소 또는 요소 ID만 전달합니다. 미래에는 모든 CSS 선택기가 구현되지 않습니다)), 길이 속성이 여기에 첨부되고 값 1이 할당됩니다.
호출할 때

코드 복사

코드는 다음과 같습니다. var obj = $( ); console.dir(obj);

$()는 실제로 호출 후 obj 구성을 테스트하는 데 의미가 없습니다. Firebug 콘솔 출력은 다음과 같습니다:
length:0;
init:function

attr:function
hide:function

즉, obj 객체는 다음과 같이 구성됩니다. function $ in function init으로 구성됩니다.
$.prototype의 메소드를 보면 CSS와 hide 메소드만 추가했는데 이 두 메소드의 구현도 매우 간단합니다.




코드 복사

코드는 다음과 같습니다.

3초 후에 숨깁니다.

먼저 CSS를 호출하여 글꼴 색상을 빨간색으로 설정하고 3초 후에 숨깁니다.
요약하자면:
jQuery 객체는 단순히 새로운 jQuery.prototype.init인 jQuery.prototype.init의 인스턴스를 참조합니다. 여기서 jQuery.prototype.init의 타입은 function으로 클래스라고 볼 수 있다.

jQuery 객체는 다음 부분으로 구성됩니다.
1. jQuery.prototype.init에 있는 속성 또는 메서드입니다.
2, jQuery.prototype.init.prototype에 매달려 있는 속성 또는 메서드.
3. jQuery.prototype은 jQuery.prototype.init.prototype에 할당되므로 jQuery.prototype에 있는 속성과 메서드도 jQuery 개체의 일부입니다.
4. jQuery.fn.extend({...})를 통해 확장된 속성 또는 메서드(나중에 언급)
/201106/yuanma/zchain.rar