jQuery 구현 원리의 시뮬레이션 코드 -1 핵심 part_jquery

핵심 부분은 ID와 태그 이름을 사용하여 두 개의 선택기를 구현하고 CSS 설정 및 텍스트 설정도 제공할 수 있습니다.

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

// # jQuery 1.4에서 해당함을 나타냅니다. .2 줄 수
// 편의를 위해 변수 정의되지 않음
var undefine = undefine;
// jQuery는 함수이고, 사실 객체를 생성하기 위해 jQuery.fn.init가 호출됩니다.
var $ = jQuery = window.$ = window.jQuery // #19
= function (selector, context) {
return new jQuery.fn.init(selector, context)
}; >// ID인지 확인하는 데 사용됩니다.
idExpr = /^#([w-] )$/;
// 모든 jQuery 객체에서 공유할 jQuery의 프로토타입 객체를 설정합니다.
jQuery. fn = jQuery.prototype = { // #74
length: 0, // #190
jquery: "1.4.2", // # 187
// 이는 예시이며, 두 개만 제공됩니다. 선택 방법: ID 및 태그 이름
init: function (selector, context) { // #75
// HTML 문자열 처리
if (typeof selector === "string") {
/ / HTML 문자열 또는 ID를 다루고 있습니까?
match = idExpr.exec(selector)
// 일치를 확인하고 #id에 대해 컨텍스트가 지정되지 않았는지
if (match && match[ 1]) {
var elem = document.getElementById(match[1]);
if (elem) {
this.length = 1;
this[0] = elem; }
}
else {
// 태그 이름을 직접 사용
var node = document.getElementsByTagName(selector)
for (var l = node.length, j = 0; j < ; l; j ) {
this[j] = 노드[j];
this.length = node.length;
this.context = 문서; this.selector = selector;
return this;
}
},
//표현된 DOM 객체 수
size: function () { // #193
return this .length
} ,
// CSS 스타일을 설정하는 데 사용됩니다.
css: function (name, value) { // #4564
this.each(
function (name, value) {
this.style [name] = value;
},
arguments // 실제 매개변수는 배열 형식으로 전달됩니다.
)
return this; ,
// 텍스트 Content를 설정하는 데 사용됩니다
text: function (val) { // #3995
if (val) {
this.each(function () {
this. innerHTML = val;
},
arguments // 실제 매개변수는 배열 형식으로 전달됩니다.
)
}
return this;
},
// 모든 DOM 객체에 대해 작동
// 콜백 맞춤형 콜백 함수
// args 맞춤형 매개변수
each: function (callback, args) { // #244
return jQuery.each(this, callback , args);
}
}
// init 함수의 프로토타입은 jQuery의 프로토타입이기도 합니다.
jQuery.fn.init.prototype = jQuery.prototype; >//
jQuery.each = function (object, callback, args) { // #550
var i = 0, length = object.length
/의 요소가 포함된 jQuery 객체를 탐색하는 데 사용됩니다. / 제공된 매개변수 없음
if (args === undefine) {
for (var value = object[0];
i < length && callback.call(value, i, value) !== false;
value = object[ i ])
{ }
}
else {
for (; i < length; ) {
if (callback.apply(object[ i ], args) === false) {
break;
}
}
}
}


jQuery에서 jQuery 객체는 실제로 선택기를 나타내는 배열 유사 객체 모든 DOM 객체의 획득된 컬렉션은 표현된 DOM 객체의 수를 나타내는 배열과 같은 길이 속성을 가지며 아래 첨자를 통해 탐색할 수도 있습니다.

95행의 jQuery.each는 jQuery에서 이 모방 배열을 탐색하고 그 안에 있는 각 요소를 탐색하는 데 사용되는 기본 메서드입니다. 콜백은 이 DOM 개체를 처리하는 함수를 나타냅니다. 일반적으로 이 메소드를 사용하지 않고 jQuery 객체의 각 메소드를 사용하여 순회합니다. 내부적으로 jQuery 개체의 CSS 및 텍스트 메서드는 실제로 jQuery 개체의 각 메서드를 사용하여 선택한 요소를 처리합니다.

이러한 함수와 개체 간의 관계는 다음을 참조하세요. jQuery 프로토타입 관계 다이어그램

다음 스크립트는 이 스크립트 라이브러리를 사용합니다.



코드 복사


코드는 다음과 같습니다.

// 프로토타입 연산$( "h1" ).text("안녕하세요, 세상.").css("color", "green")