jQuery의 동작 메커니즘과 디자인 개념 분석_jquery

짧고 간결하며 사용하기 쉽고 성능이 효율적이며 개발 효율성을 크게 향상시킬 수 있는 웹 애플리케이션 개발을 위한 최고의 보조 도구 중 하나입니다. 따라서 대부분의 개발자는 웹 개발을 위해 Prototype을 포기하고 jQuery를 선택하고 있습니다.

일부 개발자가 jQuery를 사용할 때 jQuery 문서 내에서 사용하는 방법만 알고 jQuery가 어떻게 작동하는지 이해하지 못하기 때문에 많은 문제에 직면하는 경우가 많습니다. 이러한 문제의 대부분은 부적절한 사용으로 인해 발생하며 일부는 jQuery 버그입니다. 작동 메커니즘과 핵심 소스 코드를 이해하지 못하면 jQuery 클래스 라이브러리를 기반으로 고성능 프로그램을 작성하기 어려울 것입니다.

jQuery 기반 프로그램을 디버깅할 때 대부분의 경우 실행 상태를 분석하기 위해 jQuery 개체를 추적해야 합니다. 그러나 jQuery 코드는 Ext 및 YUI만큼 표준이 아닙니다. 모호하다. 이해하기 어렵다. 즉, jQuery를 잘 사용하려면 해당 소스코드를 알아야 한다는 것이다.

jQuery의 디자인 컨셉

jQuery를 사용하기 전에 우리 모두는 jQuery가 무엇인지 묻습니다. jQuery는 프로토타입, mootools 및 기타 클래스 라이브러리와 마찬가지로 웹에서 JavaScript 개발을 위한 보조 기능을 제공하는 클래스 라이브러리입니다. 그렇다면 왜 jQuery를 선택해야 할까요? jQuery가 등장하기 전에 Prototype과 YUI는 모두 매우 성숙한 JS 프레임워크였으며 각각 고유한 특성을 가지고 있었습니다. 왜 그것들을 버리고 떠오르는 별인 jQuery를 사용합니까? 개발자의 관심을 끌 만한 뛰어난 기능은 무엇입니까?

이 질문에 대답하려면 jQuery의 디자인 개념을 이해해야 합니다. 웹 개발에서 JavaScript를 어떻게 사용하는지 기억하거나 상상해 보세요. 대부분의 경우 getElementById는 Dom 문서에서 DOM 요소를 찾은 다음 값을 얻거나 설정하는 데 사용되며 innerHTML은 해당 내용을 얻거나 설정하거나 이벤트(예: 클릭)를 모니터링하는 데 사용됩니다. 스타일을 제어하면서 시각적 효과를 얻기 위해 높이, 너비, 디스플레이 등을 변경합니다. Ajax의 경우 데이터를 가져와 페이지의 특정 요소에 콘텐츠를 추가합니다.

요약하자면 DOM 요소를 기반으로 작업하고 있습니다. 이 요소는 하나 이상일 수 있습니다. 이 요소는 문서, 창 또는 DOM 요소일 수 있습니다. 이러한 방식으로 우리의 작업은 두 부분으로 구성됩니다. 하나는 DOM 요소를 찾는 것이고, 다른 하나는 DOM 요소에 대해 작업하는 것입니다.

좀 더 능숙하게 사용하는 사람들에게는 getElementById와 같은 직접 검색 방법이나 Element.lastChild와 같은 간접 검색 방법을 사용하는 것이 어렵지 않습니다. DOM 요소의 경우 DOM 작업도 매우 풍부합니다. 사용법은 어렵지 않나요? 그렇다면 클래스 라이브러리의 용도는 무엇입니까? 가장 어려운 문제는 브라우저 호환성입니다. 모든 JavaScript 프레임워크는 이 문제를 해결하고 JavaScript 자체의 작업을 단순화해야 합니다.

프로토타입은 JS 클래스 라이브러리를 개척해 신선한 느낌을 주었다고 할 수 있습니다. 대부분의 브라우저 호환성 문제를 해결합니다. 동시에 원래 함수 이름이 길고 기억하기 어려울 때 자주 발생하는 쓰기 오류 문제를 단순화하고(getElementById 대신 $(xx) 사용) Ajax 액세스 방법을 제공하며 Array, Object와 같은 JavaScript 기본 객체를 확장합니다. , 함수 및 이벤트.

그러나 이는 여전히 개발 요구 사항을 충족할 수 없습니다. 예를 들어 DOM 트리에서 DOM 요소를 검색하는 것은 해당 요소의 ID로만 수행할 수 있지만 우리는 보다 편리한 검색 방법을 원하며 또한 이를 희망합니다. 통일성을 갖습니다. 입구가 너무 일반적이어서는 안 되며, 학습 곡선이 너무 높거나 사용하기 어려워서도 안 됩니다.

jQuery는 여기에서 시작하여 jQuery 객체의 모든 것을 통합합니다. jQuery를 사용한다는 것은 jQuery 객체를 사용한다는 것을 의미합니다. 실제로 jQuery의 선구적인 작업은 이름에서 알 수 있듯이 정확히 쿼리입니다. 강력한 검색 기능은 모든 프레임워크를 부끄럽게 만듭니다. jQuery는 본질적으로 쿼리입니다. 쿼리를 기반으로 검색된 요소에 대한 연산 기능도 제공됩니다. 이런 방식으로 jQuery는 쿼리와 작업이 통합된 것입니다. 쿼리는 항목이고 작업은 결과입니다.

jQuery의 구현도 두 부분으로 나눌 수 있습니다. 한 부분은 유틸리티 메서드 또는 도구 메서드라고도 할 수 있는 jQuery의 정적 메서드이며 jQuery의 jQuery 네임스페이스를 통해 직접 참조됩니다. 트리플 엑스(). 두 번째 부분은 jQuery 인스턴스 메소드로, jQuery(xx) 또는 $(xx)를 통해 jQuery 인스턴스를 생성한 후 이 인스턴스를 통해 참조하는 메소드입니다. 이 부분에 나오는 대부분의 메서드는 정적 메서드 프록시를 사용하여 기능을 완성합니다. 실제 기능적 작업은 jQuery의 정적 메서드로 구현됩니다. 이러한 기능은 다음과 같은 부분으로 나눌 수 있습니다:

1. 선택기, 요소 찾기. 이 검색에는 CSS1~CSS3 기반의 CSS Selector 기능뿐만 아니라 직접 검색이나 간접 검색까지 확장된 일부 기능도 포함되어 있습니다.

2. Dom 요소의 속성 연산. Dom 요소는 html 태그로 간주될 수 있으며 속성의 작동은 태그의 속성에 대해 작동하는 것입니다. 이 속성 작업에는 추가, 수정, 삭제, 값 가져오기 등이 포함됩니다.

3. Dom 요소의 CSS 스타일 작동. CSS는 페이지 표시를 제어합니다. CSS 작업에는 높이, 너비, 표시 및 기타 일반적으로 사용되는 CSS 기능이 포함되어야 합니다.

4. Ajax 운영. Ajax의 기능은 서버에서 비동기적으로 데이터를 가져온 다음 관련 작업을 수행하는 것입니다.

5. 이벤트 운영. 이벤트 호환성이 통합되었습니다.

6. 애니메이션(Fx) 작업. CSS 스타일의 확장으로 볼 수 있습니다.

jQuery 객체 생성

jQuery 객체를 생성하거나 빌드하는 것은 실제로 쿼리(선택기)를 빌드하고 실행하는 것입니다. 쿼리이므로 반드시 결과(DOM 요소)를 검색한 후 해당 결과를 연산합니다. 그렇다면 이러한 검색 결과는 어디에 저장됩니까? 물론 가장 좋은 장소는 이 jQuery 객체 내부입니다. 검색 결과는 하나의 요소일 수도 있고 (NodeSet 컬렉션의 형태로)와 같은 여러 요소일 수도 있습니다. 즉, jQuery 객체 내부에 컬렉션이 있습니다. 이 컬렉션은 발견된 DOM 요소를 저장합니다.

그러나 이전 섹션에서 언급한 jQuery 개체는 모든 작업의 ​​통합 입구이므로 해당 구성은 DOM 문서에서 DOM 요소를 찾는 것으로 제한될 수 있을 뿐만 아니라 다른 컬렉션에서 전송될 수도 있습니다. 이는 HTML 문자열에서 생성된 DOM 요소일 수도 있습니다.

jQuery 문서는 jQuery(표현식, [컨텍스트]), jQuery(html), jQuery(요소) 및 jQuery(콜백) 등 jQuery 객체를 구성하는 네 가지 방법을 제공합니다. jQuery는 $로 대체될 수 있습니다. 이 4가지가 자주 사용됩니다. 실제로 jQuery 매개변수는 어떤 요소라도 될 수 있으며 jQuery 객체를 구성할 수 있습니다.

몇 가지 예:

1.$($("P"))는 해당 매개변수가 jQuery 객체 또는 ArrayLike 컬렉션일 수 있음을 볼 수 있습니다.

2. $()는 $(document)의 약자입니다.

3. $(3)은 3을 jQuery 객체 컬렉션에 넣습니다.

DOM 요소가 아닌 $(3)(예: ArrayLike 컬렉션의 요소)와 같은 요소의 경우 jQuery 객체를 생성하지 않는 것이 가장 좋습니다. jQuery 객체의 메서드는 모두 DOM 객체를 대상으로 합니다. 사용법을 모르시면 오류가 발생할 수 있습니다. 위에서도 많이 말했지만, 여전히 그 원리를 이해하기는 어렵습니다. 소스 코드 관점에서 자세히 분석해 보겠습니다.

jQuery(xxx)를 호출해도 객체가 생성되지 않으며 이것이 포인트입니다. Window 객체에. 그렇다면 jQuery의 인스턴스 메소드는 어떻게 상속됩니까? 살펴보세요:

var jQuery = window.jQuery = window.$ = function(selector, context)
{ return new jQuery.fn.init(selector, context)
}; 🎜 >이것은 jQuery의 일반적인 입구입니다. jQuery 객체는 실제로 new jQuery()를 통해 프로토타입의 메서드를 상속합니다. jQuery 객체는 실제로 jQuery.fn.init 함수에 의해 생성된 객체입니다. 여기서 우리는 jQuery.prototype에 일부 함수 세트 객체를 추가하는 것이 별로 의미가 없다는 것을 알 수 있습니다. 새로운 jQuery()는 괜찮지만 생성된 jQuery 객체는 반환될 때 삭제됩니다. 따라서 jQuery 개체를 빌드하는 데 new jQuery()를 사용하지 않는 것이 가장 좋습니다. jQuery 객체는 실제로 새로운 jQuery.fn.init입니다. 그러면 jQuery.fn.init.prototype은 jQuery 객체의 작업 방법입니다. 예를 들어

jQueryjQuery.fn.init.prototype = jQuery.fn;
때때로 589행에서 함수를 구현하고 jQuery.fn의 함수를 jQuery.fn.init에 넣는 것이 걱정될 수 있습니다. 프로토타입. 그러면 jQuery.fn.extend 메소드를 통해 무엇을 해야 합니까? 이는 실제로 jQuery.fn에 대한 참조입니다. jQuery를 확장할 때 해당 기능을 jQuery.fn으로 확장하면 됩니다. 이제 jQuery.fn.init가 작업을 수행하는 방법을 살펴보겠습니다.

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

init : function(selector, context) {
selectorselector = selector || document;// 선택기가 존재하는지 확인하세요

// 첫 번째 경우는 Handle $(DOMElement ) 컨텍스트를 무시하는 단일 Dom 요소

if (selector.nodeType) {
this[0] = selector;
this.length = 1
return this; }

if ( typeof selector == "string") {//selector는 문자열입니다.
var match = QuickExpr.exec(selector)
if (match && (match[1] || !context)) {
if (match[1])// 두 번째 경우는 $(html) -> $(array)
selector = jQuery.clean([match[1]], context );
else {// 세 번째 경우: HANDLE: $("#id")//Processing $("#id")
var elem = document.getElementById(match[3])
if (elem) {
// IE는 name=id인 요소를 반환합니다. 그렇다면 document.find(s)
if (elem.id != match[3])
return jQuery ().find(selector) ;
// 새로운 jQuery(elem) 빌드
return jQuery(elem)
selector = []
}
} else

// 네 번째 경우: $(expr, [context])==$(content).find(expr) 처리
return jQuery(context).find(selector)
} else if (jQuery.isFunction(selector)) //다섯 번째 상황: $(function)7문서 준비에 대한 단축키 처리
return jQuery(document)[jQuery.fn.ready ? "ready" : "load"](selector );

// 여섯 번째 경우: $(elements) 처리
return this.setArray(jQuery.makeArray(selector))
}