jQuery 체인 call_jquery의 각 기능에 대한 간략한 분석

그런데 jQuery를 통해 점점 더 많은 사람들이 프론트엔드 기술을 배우게 되었지만(학교 도서관에서 우연히 jQuery 기본 튜토리얼(2)을 접했기 때문에 프론트엔드 기술을 깊이 배우고 싶었습니다.) jQuery에 대한 블로그 게시물은 심지어 JavaScript 이상으로 프로그래밍 임계값을 크게 낮추지만 $('#id').append('

xxx

').clone( ).appendTo(와 같은 너무 많은 세부 정보를 숨깁니다. x).end().css(...).............이 작업 모드는 기존 자바스크립트의 그림자를 찾기 어렵게 만들었습니다. 브라우저 간의 차이점은 사라지자마자 사라지는 것 같습니다. 이 편안한 환경에서 JavaScript가 어떻게 다른 브라우저에서 일관되게 작동할 수 있는지에 대해 생각하는 것만으로는 대부분 돌아갈 수 없을 것 같습니다. 축복인가 저주인가.
본론으로 돌아가서... 진지하게
$() 함수는 네이티브 DOM 객체의 배열을 래핑하는 객체를 반환하므로 이 객체의 프로토타입에 확장된 함수는 모두 연산을 위한 것입니다. 기본 dom 객체이므로 루프 순회 작업이 필수적입니다. jquery 라이브러리에 익숙한 사람들은 jquery 객체와 관련된 대부분의 함수가 이 함수를 사용한다는 것을 알고 있습니다. 간단한 구현은 다음과 같습니다. 🎜>(다시 말하지만 단순한 구현 원칙일 뿐, 구체적인 기능적 문제는 고려하지 마세요)

코드 복사 코드는

if (!window['$'])
window['$'] = window['jQuery']
/*여기 위 영역은 이전 기사 닫기 패키지 내용
* 들어오는 객체를 기반으로 작업을 수행하도록 jQuery.each를 정의합니다.
* @param {Object} obj
* @param {Object} func
* For 단순함, 배열과 jQuery 객체만 고려했습니다. 이전 기사와 동일하며 원칙은 동일해야 합니다.
*/
window['jQuery']['each']=function(obj,func){
if( obj.constructor==Array){
for(var i=0;ifunc.call(obj[i],i,obj[i] );//예 들어오는 func는 function(i,item) 형식이어야 함을 알 수 있습니다. i는 순회된 첨자를 나타내고 item은 배열에서 순회된 객체를 나타냅니다.
}
}else if( obj.elements&&obj.elements .constructor==Array){//여기에서는 jQuery의 인스턴스인지 여부를 결정하는 대신 전설적인 오리 규칙이 사용됩니다. Array 유형 요소가 있는 한 제가 작업하겠습니다
for(var i=0;i< ;obj.elements.length;i ){
func.call(obj.elements[i],i,obj.elements[i]);//들어오는 것을 볼 수 있습니다 func는 함수(i, item) 형식이어야 합니다. i는 탐색된 첨자를 나타내고, item은 배열에서 탐색된 객체를 나타냅니다.
}
}else{
return null; }


이 함수를 기반으로 _jQuery의 프로토타입을 먼저 확장하고 래퍼 개체가 직접 호출할 수 있는 메서드를 작성할 수 있습니다. (이것은 반복이 아닙니다.) 그런 다음 이 각 함수를 호출하여 완료합니다. 객체 배열을 순회하는
예:

코드 복사 코드는 다음과 같습니다. 다음: / /Write 어제 이름 지정 충돌이 있었던 jQuery 생성자의 이름이 _jQuery

_jQuery.prototype = {

each: function으로 변경되었습니다. (func){
jQuery.each(this, func) ;
return this;
},
attr: function(key, value){
//예제는 다음을 결합하는 함수를 정의합니다. 속성을 설정하고 조작합니다.
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){
//여기 각각의 메소드를 재정의함으로써 얻을 수 있는 이점을 확인할 수 있습니다. 두 번째: 내부 함수에서는 여전히 window
item.setAttribute(key, value)
}) 대신 호출 래퍼 객체를 가리킵니다. 🎜>}
}
/*
* 여기에서 다른 방법을 소개할 수 있습니다.
*/
}

몇 가지 간단한 테스트를 해보겠습니다. (이전 기사의 테스트 html)

　입력:

　　　　 var k= $('#header');
                                               var k= $('#header'); ));

출력:

테스트 제목!

등 각 방법을 활용하면 래퍼 방법을 효과적으로 확장할 수 있습니다.

앞서 언급한 jQuery의 체인 호출에 영향을 미치는 세 가지 핵심 사항이 있습니다. 사실 나중에 생각해보면 jQuery의 내부 코드 유지 관리가 일부 라이브러리보다 좋지는 않습니다. 운영 측면에서 매우 사용하기 쉽습니다(물론 일부 소규모 작업에만 해당되며 대규모 프로젝트에는 한동안 접근할 수 없으며 일부 성인의 의견을 따르기가 쉽지 않습니다). 순회 작업만 보면 이 라이브러리가 세련된 플러그인에만 의존할 수 있다는 것을 알 수 있습니다. 확장하면 크기가 커질 뿐입니다.

참고:

jquery 소스 코드를 주의 깊게 분석한 사람이라면 내 소위 구현이 형편없다고 비웃을 것입니다. 저는 실제로 javascript dom Advanced 프로그래밍 및 javascript 고급과 같은 책을 몇 권 읽었을 뿐입니다. 프로그래밍 패턴은 좋은 책을 읽고 나서 얻은 영감을 바탕으로 한 것입니다. 가능하다면 제이쿼리의 구체적인 구현과는 상당히 다를 수 있습니다.