jQuery 의 체인 호출 each 함수 분석

그 나 저 나 jQuery 는 전단 기술 을 배 우 는 것 이 점점 많아 졌 지만(본인 은 학교 도서관 에서 우연히 jQuery 기초 튜 토리 얼(2)을 만 났 기 때문에 전단 기술 을 깊이 공부 하고 싶 었 습 니 다)jQuery 에 관 한 박문 은 자바 script 보다 많 았 습 니 다.프로 그래 밍 의 문턱 을 크게 낮 추 었 지만 너무 많은 세부 사항 을 숨 겼 습 니 다.$('\#id').append('xxx').clone().appendTo(x).end().css(...................................................................브 라 우 저의 차 이 는 마치 가 자마자 사라 진 것 같 습 니 다.저 는 대부분 이 편안 한 환경 에서 자바 script 이 어떻게 서로 다른 브 라 우 저 에서 일치 하 는 지 등 문 제 를 다시 고려 할 수 있다 고 생각 하지 않 습 니 다.복 은 화 라 고 말 하기 어렵 습 니 다.다음은 본론 으로...................................................................................대부분의 jquery 대상 과 관련 된 함 수 는 이 함수 에 사 용 됩 니 다.간단 한 실현 은 이렇게 해 야 합 니 다.(다시 한 번 말씀 드 리 지만 간단 한 실현 원리 일 뿐 구체 적 인 기능 성 문 제 를 고려 하지 마 세 요)

 
if (!window['$']) 
window['$'] = window['jQuery']; 
/*                    
*   jQuery.each             
* @param {Object} obj 
* @param {Object} func 
*             jQuery      ，      ，         
*/ 
window['jQuery']['each']=function(obj,func){ 
if(obj.constructor==Array){ 
for(var i=0;i<obj.length;i++){ 
func.call(obj[i],i,obj[i]);//       func      function(i,item) i        ,item              
} 
}else if(obj.elements&&obj.elements.constructor==Array){//            ,         jQuery        Array   elements         
for(var i=0;i<obj.elements.length;i++){ 
func.call(obj.elements[i],i,obj.elements[i]);//       func      function(i,item) i        ,item              
} 
}else{ 
return null; 
} 
} 

이 함수 의 기초 위 에서 확장 을 시작 할 수 있 습 니 다jQuery 의 prototype 입 니 다.먼저 포장 기 대상 이 직접 호출 할 수 있 는 방법 을 작성 하 는 것 입 니 다.each:(이것 은 중복 이 아 닙 니 다)그리고 이 each 함 수 를 호출 하면 대상 배열 을 옮 겨 다 닐 수 있 습 니 다.예 를 들 어

 
//                 jQuery        _jQuery 
_jQuery.prototype = { 
each: function(func){ 
jQuery.each(this, func); 
return this; 
}, 
attr: function(key, value){ 
//      set get            
if (arguments.length == 0) { 
return null; 
} 
else 
if (arguments.length == 1) { 
return this.elements[0].getAttribute(key); 
} 
else if(arguments.length == 2){ 
this.each(function(i, item){ 
//          each      ：     ， ：      this                window 
item.setAttribute(key, value); 
}) 
} 
} 
/* 
*              
*/ 
} 

다음은 몇 가지 간단 한 테스트 를 하 겠 습 니 다.(아니면 전편 의 테스트 html)
입력:
　　　　　　 var k= $('#header');                  consoles.write(k.attr('title','test title!').attr('title'));     //체인 호출 
출력:   
                   test title！
이에 따라 each 방법 으로 포장 기 를 효과적으로 확장 할 수 있 는 방법 으로 추정 된다.
앞에서 말 한 jQuery 의 체인 호출 에 영향 을 미 치 는 요점 은 세 가지 가 있 습 니 다.사실은 사후에 생각해 보면 전혀 간단 하지 않 습 니 다.jQuery 내부 코드 의 유지 느낌 은 일부 라 이브 러 리 보다 좋 지 않 습 니 다.적어도 조작 에 있어 서 사용 하기에 매우 편리 하지만(물론 작은 조작 만 있 을 뿐 큰 프로젝트 는 일시 적 으로 접 할 수 없습니다.큰 사람들 을 따라 다 니 기 는 쉽 지 않다).하지만 옮 겨 다 니 는 것 만으로 도 이 라 이브 러 리 는 세분 화 된 플러그 인 에 의존 할 수 밖 에 없 으 며 확장 하면 비대 해 보일 수 밖 에 없다.
주:jquery 소스 코드 를 자세히 분석 한 사람 이 있다 면 저 에 게 이렇게 졸렬한 이른바 실현 에 코 웃음 을 칠 것 입 니 다.저 는 자바 script dom 고급 프로 그래 밍 디자인 과 자바 script 고급 프로 그래 밍 디자인 모델 등 좋 은 책 을 몇 권 본 후에 느 꼈 을 뿐 구체 적 인 jquery 의 실현 과 큰 차이 가 있 을 수 있 습 니 다.가능 하 다 면 지적 해 주 셨 으 면 좋 겠 습 니 다.