동적으로 확장되는 JQuery에 대한 대안적 관점

예: 직원 개체가 있습니다.

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

function Employee(){
this.e_id = 0;
this.e_name = "";
}

이제 동적으로 "age" 속성을 추가해야 합니다. toString()" to it 메서드,

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

var empObj = 신규 직원();
empObj["age"] = 20;
empObj["toString"] = function() { return this.e_id.toString() this.e_name };

간단한 줄 코드는 Javascript 내장에서 지원하는 이 작업을 수행하지만 종종 이를 기반으로 어느 정도 확장을 지원해야 하므로 이 간단한 코드 줄을 다음으로 추출하겠습니다. 메서드:

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

function dym_setprop(obj, key , value) {
if (obj && key) {
obj[key] = value;
}
}

이것을 보고 먼저 뛰어들어 봅시다.

객체 지향 프로그래밍에서는 모든 속성(Get/Set)이 외부에서 사용되므로 이 메서드를 Javascript로 어떻게 확인할 수 있을지 생각해 보세요. 이제 dym_setprop 함수로 돌아가 보겠습니다. 즉, obj[key]=value의 직접 할당 방법은 dym_setprop 메서드에서 사용할 수 없지만 Set은 지원되어야 합니다.

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

function dym_setprop(obj, key, value, fn) {
if (obj && key) {
fn(obj, key, value)
}
}

　 매개변수 fn, 객체가 직접 조작되지 않음 dym_setprop에서는 fn 함수를 사용하여 해당 연산 코드를 대체하고 Set을 지원하는 것 외에도 여유 공간이 많이 있습니다.
계속해서 dym_setprop 메소드를 살펴보겠습니다. 이제 매개변수 값에 중점을 둡니다. 값이 값 유형일 수도 있고 함수일 수도 있다는 것은 누구나 알고 있습니다. 값 유형의 경우 다른 사항을 고려하지 않고 직접 값을 할당하면 됩니다. , 함수에 대해서는 그리 간단하지 않습니다.

1. 새로 확장된 속성에 함수를 직접 할당합니다.

2. 함수 실행의 반환 값을 새 속성에 할당합니다. 확장 속성

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

function dym_setprop(obj, key, value, fn, exec, pass) {
if (obj && key) {
var temp = value
if (exec) {
temp = value.call(obj, key, fn( obj, key));
}
fn(obj, key, temp, pass)
}
}

이 코드에서 매개변수 exec는 다음과 같은 역할을 합니다. 위의 두 가지 역할이 이 작업에 의해 선택된 역할인 pass 매개변수는 추가 실행 매개변수입니다. 또한 fn은 위의 두 위치에서 사용되므로 fn에 대해 약간의 의문이 생길 수 있습니다. 유일한 차이점은 fn이 무엇을 의미합니까? ! C#의 속성에 대해 다시 생각해 보세요. Get/Set이 있으므로 여기서 fn(obj,key)는 Get과 동일하고 fn(obj,key,temp,pass)는 Set과 동일합니다.

예: fn의 정의와 사용에 대한 다음 코드를 살펴보세요.

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

employee.AccessProp = function(obj, key, value) {
if (value) {
obj[key] = value;
else {
return obj[key];
}
}

dym_setprop(empObj, "age", function(key, value) { 반환 값 10; }, 직원 .AccessProp, 참);
너무 많이 읽고 나면 우울해질 수도 있습니다. 왜 단순한 동적으로 확장된 객체 프로그램을 이런 식으로 작성해야 할까요? 실제로는 그렇지 않습니다. 동적으로 확장된 객체를 수행하는 경우 위의 dym_setprop 아이디어를 채택하지 말 것을 제안합니다. 그러나 보다 추상적인 관점에서 생각하고 dym_setprop의 프로그램을 프로세스 실행을 위한 템플릿으로 사용하고 싶다면 이것이 좋은 방법입니다. 왜냐하면 dym_setprop 내부적으로 특정 코드를 포함하지 않습니다(obj [key]=value 또는 obj[key]의 실행)는 함수 fn으로 대체되므로 특정 실행이 완전히 자유로워집니다.

위의 개념을 이해한 후 이 기사의 핵심으로 넘어가겠습니다. JQuery는 객체의 동적 확장을 어떻게 구현합니까? 접근 함수,

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

함수 접근(elems, key , value, exec, fn, pass ) {
var length = elems.length;

// 많은 속성 설정
if ( typeof key === "object" ) {
for ( var k in key ) {
access( elems, k, key[k], exec, fn, value )
}
return elems;
if ( value !== undefine ) {
// 선택적으로 exec가 true인 경우 함수 값이 실행됩니다.
exec = !pass && exec && jQuery.isFunction(value)

for ( var i = 0; i fn( elems[i], key, exec ? value.call( elems[i], i, fn( elems[i], key ) ) : value, pass );
return elems;
}
// 반환 길이
fn( elems[0], key ) : null; >}



액세스 함수의 코드를 주의 깊게 읽은 후에는 dym_setprop과 매우 유사하다는 것을 알 수 있습니다.

코드 복사

코드는 다음과 같습니다. if ( typeof key === "object" ) { for ( var k in key ) {

access( elems, k, key[k], exec, fn, value )

}
return elems; 실제로 객체를 지원하는 데 사용된다는 것을 쉽게 알 수 있습니다. 객체의 동적으로 확장된 속성입니다. 구체적인 실행 과정은 아래 그림과 같습니다.


여기까지 작성을 마쳤습니다. 이 글은 JQuery 개발자들이 어떻게 접근 기능을 설계하고 이를 지원하게 했는지 제 관점에서 추측해 보려고 합니다. 객체를 동적으로 확장하고 접근 실행 과정을 설명합니다. 사실 내 추측이 정확하지 않을 수도 있지만 JQuery에 대한 연구를 방해하지는 않습니다.