jQuery 소스코드를 통해 자바스크립트 배우기(1)_jquery

Jquery는 워낙 인기가 많아서 뭔가 특별한 게 있는 것 같아요. 오픈 소스 코드를 통해 배우는 것도 좋은 학습 방법이죠!

저는 시뮬레이션 방법을 최대한 단순화하려고 노력합니다.

객체 C 정의(jquery의 $ 메소드와 유사) - 이것도 jquery의 매우 영리한 디자인입니다.

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

(function(){
var
_cQuery = window.cQuery,
cQuery = function(){
return new cQuery.fn.init();
};
cQuery.fn = cQuery.prototype = {
init : function() {
　　　　 console.log(this); this;
},
test : function () {
console.log('test')
}
}; fn;
window.C = window.cQuery = cQuery;

C().test()


출력 결과

코드 분석

1. cQuery를 window 속성에 등록하고 전역 변수로 사용합니다. C를 간단한 이름으로 사용합니다.
window.C = window.cQuery = cQuery;

2.
cQuery.fn.init.prototype = cQuery.fn
사진으로 대화해 보세요(현재 인쇄) object cQuery ):

이 문장의 스크린샷을 삭제하세요.​



다음 문장을 입력하세요 스크린샷:

난이도 분석: 프로토타입 전송

init의 프로토타입은 현재 함수일 뿐입니다.

도메인 간 액세스를 달성하려면 cQuery.fn.init.prototype = cQuery.fn;을 사용하여 init 생성자의 프로토타입 객체를 재정의하세요.
평가: new cQuery.fn.init()에 의해 생성된 새 개체는 init 생성자의 프로토타입 프로토타입 개체의 메서드를 사용하여 프로토타입 포인터의 포인팅을 변경합니다. cQuery 클래스를 가리킵니다. ——이렇게 생성된 개체는 cQuery.fn 프로토타입 개체에서 정의한 메서드를 상속합니다.
　3. 변수와 함수를 정의하려면 var를 사용하세요. Jquery 소스 코드는 79줄을 사용하여 일련의 변수(처음 부분)를 정의합니다.

각 방법

코드 복사 코드는 다음과 같습니다. (function(){

var

_cQuery = window.cQuery,
cQuery = function(){
return new cQuery.fn.init();
};
cQuery.fn = cQuery.prototype = {
init : function () {
return this;
},
each : function(obj, callback) { // 각각 method
var name, length = obj.length;
for (name in obj) {
if (callback.call(obj[name], name, obj[name]) === false) {
break;
}
}
},
isWindow : function(obj) {
return obj != null && obj == obj.window; >};
cQuery.fn.init.prototype = cQuery.fn;
window.C = window.cQuery =cQuery;

C().each ({ Height : 'height', Width : 'width'}, function(name, type){ console.log(this, name, type); })


출력 결과


난이도 분석: callback.call(obj[name], name, obj[name])
콜백은 function(name, type){ console.log(this, name,type);} this method

첫 번째 obj[name]은 콜백 함수에 있는 "높이" 또는 "너비" 문자열입니다.
name에서 두 번째 obj[name]은 콜백에 전달되는 매개변수입니다.

isWindow() 메서드


위 코드를 기반으로 다음과 같이 작성합니다.


코드 복사

코드는 다음과 같습니다: isWindow : function(obj) { return obj != null && obj == obj.window; > 전화:

코드 복사

코드는 다음과 같습니다.

console.log( cquery.isWindow(window)) console.log(cquery.isWindow(document))
출력 결과

창 개체에는 창 자체에 대한 참조를 포함하는 self 속성과 동일한 특수 속성인 window가 있습니다. 이 속성을 사용하여 창 개체인지 확인하세요!

요약

이제 막 조사를 시작했습니다. 어쩌면 어떤 부분은 명확하지 않을 수도 있습니다. 누군가가 나에게 몇 가지 정보를 추가할 수 있다면 좋을 것입니다.
시간이 늦어졌네요. 다음에 연구를 계속하겠습니다.