JQuery 동적 확장 대상 의 다른 시각

예 를 들 어 employee 대상 이 있 습 니 다

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

지금 은'age'속성 과'toString()'방법 을 동태 적 으로 추가 해 야 합 니 다

 
var empObj = new employee(); 
empObj["age"] = 20; 
empObj["toString"] = function() { return this.e_id.toString() + this.e_name; }; 

간단 한 코드 한 줄 이 이 작업 을 맡 았 습 니 다.이것 은 자바 script 내 장 된 지원 이지 만 이 를 바탕 으로 어느 정도 확장 을 지원 해 야 합 니 다.그래서 이 줄 의 간단 한 코드 를 하나의 방법 으로 뽑 을 것 이다.setprop 함수 내,dymsetprop 방법 에 서 는 obj[key]=value 의 직접 할당 방식 을 사용 할 수 없 으 며,set 를 지원 해 야 합 니 다

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

매개 변수 fn,dymsetprop 에 서 는 대상 을 직접 조작 하지 않 고 함수 fn 을 사용 하여 해당 하 는 조작 코드 를 대체 하면 여기 서 set 를 지원 하 는 것 외 에 도 매우 큰 자유 공간 이 있 습 니 다.계속 깊이 들 어가 도록 하 겠 습 니 다.setprop 방법,지금 우 리 는 관심 사 를 매개 변수 value 에 두 었 습 니 다.value 는 값 유형 일 수도 있 고 함수 일 수도 있 습 니 다.값 유형 에 있어 서 다른 것 을 고려 하지 않 고 직접 값 을 부여 하면 됩 니 다.함수 에 있어 서 이렇게 간단 하지 않 습 니 다.두 가지 조작 을 지원 합 니 다.1.함 수 를 새로운 확장 속성 2 에 직접 부여 합 니 다.함수 가 실 행 된 반환 값 을 새로운 확장 속성 에 부여 합 니 다

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

이 코드 에서 매개 변수 exec 는 위의 두 가지 조작 이 선택 한 역할 을 합 니 다.매개 변수 pass 는 추가 적 인 실행 매개 변수 입 니 다.그 밖 에 여러분 들 은 fn 에 대해 약간 의 심 스 러 울 수 있 습 니 다.위 에 두 곳 이 사용 되 었 기 때문에 차이 점 은 매개 변수 개수 만 다 릅 니 다.fn 은 도대체 무엇 을 대표 합 니까?!C\#의 속성 을 다시 생각해 보 세 요.get/set 이 있 습 니 다.그러면 여기 서 fn(obj,key)은 Get 과 비슷 하고 fn(obj,key,temp,pass)은 Set 와 비슷 합 니 다.예 를 들 어 다음 코드 를 보 세 요.fn 의 정의 와 사용 에 대해

 
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); 
} 
} 

이렇게 많이 보 았 습 니 다.여러분 들 이 답답 할 수도 있 습 니 다.간단 한 동적 확장 대상 프로그램 이 왜 이런 방식 으로 작 성 했 는 지 찾 을 일이 없 는 느낌 이 듭 니 다.그렇지 않 습 니 다.만약 에 동적 확장 대상 만 하고 싶다 면 상기 dym 을 사용 하지 않 는 것 이 좋 습 니 다.setprop 의 사고방식,하지만 당신 이 더욱 추상 적 인 관점 에서 생각 하고 싶다 면 dymsetprop 내 프로그램 이 하나의 프로 세 스 로 실 행 된 템 플 릿 입 니 다.그러면 이것 은 좋 은 방법 입 니 다.왜냐하면 dymsetprop 내부 에 서 는 구체 적 인 코드(obj[key]=value 또는 obj[key])의 실행 을 부담 하지 않 습 니 다.이 는 함수 fn 을 통 해 대 체 됩 니 다.구체 적 인 실행 에 있어 서 는 완전히 자유로운 공간 이 있 습 니 다.상술 한 사고방식 을 이해 한 후에 우 리 는 본문의 핵심 에 들 어가 게 한다.JQuery 는 어떻게 동적 확장 대상 을 실현 합 니까?access 함수,

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

dym_setprop(empObj, "age", function(key, value) { return value + 10; }, employee.AccessProp, true); 

access 함수 의 코드 를 자세히 보면 반드시 그것 과 dm 를 발견 할 수 있 습 니 다.setprop 의 시험 도 는 매우 높 습 니 다.코드 가 하나 더 생 겼 을 뿐 입 니 다

function access( elems, key, value, exec, fn, pass ) { 
var length = elems.length; 

// Setting many attributes 
if ( typeof key === "object" ) { 
for ( var k in key ) { 
access( elems, k, key[k], exec, fn, value ); 
} 
return elems; 
} 
// Setting one attribute 
if ( value !== undefined ) { 
// Optionally, function values get executed if exec is true 
exec = !pass && exec && jQuery.isFunction(value); 

for ( var i = 0; i < length; i++ ) { 
fn( elems[i], key, exec ? value.call( elems[i], i, fn( elems[i], key ) ) : value, pass ); 
} 
return elems; 
} 
// Getting an attribute 
return length ? fn( elems[0], key ) : null; 
} 

이것 은 바로 object 대상 의 동적 확장 속성 을 지원 하 는 것 임 을 쉽게 알 수 있 습 니 다.구체 적 인 실행 절 차 는 다음 그림 을 통 해 보 여 줍 니 다여기까지 이미 썼 습 니 다.본 고 는 자신의 측면 에서 JQuery 개발 자가 access 함 수 를 어떻게 디자인 했 는 지 추측 하여 동적 확장 대상 을 지원 하고 access 의 실행 절 차 를 설명 합 니 다.사실 저 에 대한 이런 추측 이 꼭 정확 한 것 은 아니 지만 JQuery 에 대한 연 구 를 방해 하지 않 습 니 다.