jQuery 의 운영 체제 와 디자인 이념 분석

짧 고 간결 하 며 사용 이 간단 하고 편리 하 며 성능 이 효율 적 이 며 개발 효율 을 크게 향상 시 킬 수 있 으 며 웹 응용 을 개발 하 는 가장 좋 은 보조 도구 중 하나 이다.그래서 대부분의 개발 자 들 은 Prototype 을 버 리 고 jQuery 를 선택 하여 웹 개발 을 하고 있 습 니 다.일부 개발 자 들 은 jQuery 를 사용 할 때 jQuery 문서 의 사용 방법 만 알 고 있 기 때문에 jQuery 의 운행 원 리 를 모 르 고 많은 문제 에 부 딪 힐 수 있 습 니 다.이 문제 들 은 대부분 부적 절 한 사용 으로 발생 하 며,극소수 가 jQuery 의 Bug 이다.운영 메커니즘 과 핵심 소스 코드 를 모 르 면 jQuery 라 이브 러 리 를 기반 으로 한 고성능 프로그램 을 쓰기 도 어렵다.jQuery 기반 프로그램 을 디 버 깅 할 때,우 리 는 대부분의 시간 을 jQuery 대상 에 들 어가 서 실행 상 태 를 분석 해 야 하지만,jQuery 코드 는 Ext,YUI 처럼 중 격 되 지 않 고,코드 가 좀 까다 롭 고 이해 하기 어렵다.jQuery 를 잘 쓰 려 면 소스 코드 를 잘 알 아야 한 다 는 것 이다.jQuery 의 디자인 이념 이 jQuery 를 사용 하기 전에 jQuery 가 무엇 인지 물 어 봅 니 다.jQuery 는 prototype,mootools 등 라 이브 러 리 와 마찬가지 로 웹 의 자바 스 크 립 트 개발 에 보조 기능 을 제공 합 니 다.그런데 왜 jQuery 를 선 택 했 을까요?jQuery 가 등장 하기 전 까지 Prototype,YUI 는 모두 성숙 한 Js 의 프레임 워 크 였 고 각자 의 특징 이 있 었 다.왜 버 리 고 후발 주자 인 jQuery 를 사용 하 는 것 일 까?개발 자 들 을 끌 어 들 이 는 우수한 특성 이 있 을 까?이 질문 에 대답 하려 면 jQuery 의 디자인 이념 을 알 아야 합 니 다.웹 개발 에서 자 바스 크 립 트 를 어떻게 사용 하 는 지 기억 하거나 상상 해 보 세 요.절대 다수의 시간 은 getElement ById 를 사용 하여 Dom 문서 에서 DOM 요 소 를 찾 은 다음 에 값 을 추출 하거나 설정 합 니 다.innerHTML 로 내용 을 추출 하거나 내용 을 설정 하거나 사건 의 감청(예 를 들 어 click)을 합 니 다.스타일 을 제어 하 는 데 있어 저 희 는 height,width,display 등 을 바 꾸 어 시각 적 인 효 과 를 얻 습 니 다.Ajax 에 있어또한 데 이 터 를 가 져 와 페이지 의 특정한 요소 에 내용 을 추가 합 니 다.다시 말 하면 우 리 는 DOM 요 소 를 조작 하고 있다.이 요 소 는 하나 이상 일 수 있 습 니 다.이 요 소 는 Document,Window 또는 DOM 요소 일 수 있 습 니 다.이렇게 해서 우리 의 임 무 는 두 가지 부분 이다.하 나 는 DOM 요 소 를 찾 는 것 이 고,다른 하 나 는 DOM 요 소 를 조작 하 는 것 이다.능숙 하 게 사용 하 는 데 있어 서 getElement ById 와 같은 직접 검색 방식 을 사용 하 든 Element.last Child 와 같은 간접 검색 방식 을 사용 하 든 어렵 지 않 습 니 다.DOM 요소 에 대해 서도 DOM 의 조작 이 풍부 하고 사용 하기 어렵 지 않 습 니까?그럼 라 이브 러 리 는 무엇 에 쓰 입 니까?가장 어 려 운 문 제 는 브 라 우 저의 호환성 이다.모든 자 바스 크 립 트 프레임 워 크 는 이 문 제 를 해결 하 는 동시에 자 바스 크 립 트 자체 의 자체 조작 을 간소화 해 야 한다.Prototype 은 JS 라 이브 러 리 를 개척 한 선구자 라 고 할 수 있 으 며 새로운 느낌 을 준다.그것 은 대부분의 브 라 우 저의 호 환 문 제 를 해결한다.또한 원시 함수 이름 이 기억 하기 어 려 운 자주 쓰 는 오류(getElement ById 대신$(xx)를 사용)를 간소화 하고 Ajax 의 접근 방식 을 제공 하 며 Array,Object,Function,Event 등 JavaScript 원생 대상 을 확장 했다.그러나 이런 것들 은 개발 의 수 요 를 만족 시 키 지 못 한다.예 를 들 어 DOM 트 리 에서 DOM 요 소 를 찾 는 것 은 요소 의 ID 를 통 해서 만 가능 하 다.그러나 우 리 는 더욱 편리 하 게 방법 을 찾 는 동시에 통 일 된 입구 가 있 기 를 바란다.너무 광범 위 하지 않 고 학습 곡선 이 너무 높 거나 사용 하기 어렵다.jQuery 는 여기 서 출발 하여 모든 것 을 jQuery 대상 에 통일 시 키 는 것 이다.jQuery 를 사용 하 는 것 은 jQuery 대상 을 사용 하 는 것 입 니 다.사실 jQuery 의 창의 적 인 작업 은 이름 그대로 query 입 니 다.그것 의 강력 한 검색 기능 은 모든 프레임 을 무색 하 게 한다.jQuery 는 실질 적 으로 검색 기 입 니 다.검색 기 를 바탕 으로 찾 은 요 소 를 조작 하 는 기능 도 제공 합 니 다.이렇게 말 하면 jQuery 는 조회 와 조작의 통일 이다.조 회 는 입구 이 고 조작 은 결과 입 니 다.jQuery 는 실현 에 있어 서도 두 부분 으로 나 눌 수 있 습 니 다.일 부 는 jQuery 의 정적 방법 이 고 실 용적 인 방법 이나 도구 방법 이 라 고도 할 수 있 습 니 다.jQuery.xxx()의 jQuery 네 임 스페이스 를 통 해 직접 참조 할 수 있 습 니 다.두 번 째 부분 은 jQuery 의 인 스 턴 스 방법 입 니 다.jQuery(xx)또는$(xx)를 통 해 jQuery 인 스 턴 스 를 생 성 한 다음 이 인 스 턴 스 를 통 해 참조 하 는 방법 입 니 다.이 부분의 방법 은 대부분 정적 방법 으로 대리 하여 기능 을 완성 하 는 것 이다.진정한 기능 성 조작 은 jQuery 의 정적 방법 에서 이 루어 진다.이러한 기능 을 세분 화하 면 다음 과 같은 몇 가지 부분 으로 나 눌 수 있다.1.Selector,요 소 를 찾 을 수 있다.이 검색 은 CSS 1~CSS 3 를 기반 으로 한 CSS Selector 기능 뿐만 아니 라 직접 찾 거나 간접 적 으로 찾 아 확장 하 는 기능 도 포함 하고 있 습 니 다.2.Dom 요소 의 속성 조작.Dom 요 소 는 html 의 탭 으로 볼 수 있 습 니 다.속성 에 대한 조작 은 탭 의 속성 을 조작 하 는 것 입 니 다.이 속성 작업 은 증가,수정,삭제,수치 추출 등 을 포함 합 니 다.3.Dom 요소 의 CSS 스타일 동작 입 니 다.CSS 는 페이지 의 표 시 를 제어 하 는 효과 입 니 다.CSS 작업 은 높이,너비,display 등 자주 사용 하 는 CSS 기능 을 포함해 야 합 니 다.4.Ajax 의 조작.Ajax 의 기능 은 비동기 적 으로 서버 에서 데 이 터 를 가 져 와 관련 작업 을 하 는 것 입 니 다.5.이벤트 의 조작.이벤트 의 호 환 에 대해 통 일 된 처 리 를 하 였 다.6.애니메이션(Fx)의 동작.CSS 스타일 의 확장 으로 볼 수 있 습 니 다.jQuery 대상 의 구축 생 성 또는 jQuery 대상 을 구축 하 는 것 은 검색 기(selector)를 구축 하고 실행 하 는 것 입 니 다.조회 인 만큼 반드시 찾 을 결과(DOM 요소)가 있어 야 이 결 과 를 조작 할 수 있다.그럼 이 검색 결 과 는 어디 에 저장 합 니까?가장 좋 은 곳 은 당연히 이 jQuery 대상 내 면 이다.찾 은 결 과 는 하나의 요소 일 수도 있 고 여러 개의 요소 일 수도 있 습 니 다.(NodeSet 의 집합 형식)그 러 니까 jQuery 대상 안에 집합 이 있다 는 거 야.이 집합 저장 소 는 DOM 요 소 를 찾 을 수 있 습 니 다.그러나 지난 소절 에서 언급 한 jQuery 대상 은 모든 작업 의 통 일 된 입구 입 니 다.그러면 구축 은 DOM 문서 에서 DOM 요 소 를 찾 는 데 국한 되 지 않 고 다른 집합 에서 옮 겨 온 Dom 요소 일 수도 있 습 니 다.HTML 문자열 에서 생 성 된 DOM 요소 일 수도 있 습 니 다.jQuery 문서 에서 jQuery(expression,[context]),jQuery(html),jQuery(elements),jQuery(callback)네 가지 jQuery 대상 을 구성 하 는 방식 을 제공 합 니 다.그 중 jQuery 는$로 대체 할 수 있 습 니 다.이 네 가 지 는 자주 쓰 인 다.사실 jQuery 의 인 자 는 모든 요소 일 수 있 고 jQuery 대상 을 구성 할 수 있 습 니 다.몇 가지 예 를 들 어:1,$("P")는 jQuery 대상 이나 Array Like 의 집합 을 알 수 있 습 니 다.2.$()는$(document)의 약자 입 니 다.3.$(3)는 3 을 jQuery 대상 에 집합 합 니 다.$(3)와 같은 요소(예 를 들 어 Array Like 집합 요소)는 DOM 요소 가 아 닙 니 다.jQuery 대상 을 구축 하지 않 는 것 이 좋 습 니 다.jQuery 대상 의 방법 은 모두 DOM 대상 을 대상 으로 합 니 다.잘 모 르 겠 습 니 다.사용 하면 오류 가 발생 할 수 있 습 니 다.위 에서 이렇게 많이 말 했 지만 그 원 리 를 이해 하기 어렵다.지금 은 소스 코드 의 측면 에서 자세히 분석 했다.jQuery(xxx)의 호출 을 통 해 생 성 대상 이 없 는 것 을 실현 하고 그의 this 는 Window 대상 을 가리 키 는 것 이다.그렇다면 jQuery 의 그 실례 적 인 방법 들 은 어떻게 계승 되 었 습 니까?보기:var jQuery=window.jQuery=window.$=function(selector,context){return new jQuery.fn.init(selector,context);};jQuery 의 전체 입구 입 니 다.jQuery 대상 은 사실상 new jQuery()를 통 해 prototype 을 계승 하 는 방법 이 아 닙 니 다.jQuery 대상 은 실제 jQuery.fn.init 함수 생 성 대상 입 니 다.이 안에서 우 리 는 jQuery.prototype 에 함수 집합 을 추가 한 대상 에 대한 의미 가 크 지 않다 는 것 을 알 수 있다.우리 new jQuery()는 가능 하지만 생 성 된 jQuery 대상 은 return 시 버 려 집 니 다.그 러 니 뉴 jQuery()로 jQuery 대상 을 구축 하지 않 는 것 이 좋다.jQuery 대상 은 사실 new jQuery.fn.init 입 니 다.그럼 jQuery.fn.init.prototype 에 jQuery 대상 이 걸 려 있 는 조작 방법 입 니 다.예 를 들 어 jQueryjQuery.fn.init.prototype=jQuery.fn;시간 이 있 으 면 589 줄 에서 jQuery.fn 의 함 수 를 jQuery.fn.init.prototype 에 올 리 는 것 을 걱정 할 수 있 습 니 다.그러면 그 다음 에 jQuery.fn.extend 를 통과 하 는 방법 은 어떻게 합 니까?여 기 는 실제 jQuery.fn 에 대한 인용 입 니 다.jQuery 를 확장 할 때 관련 함 수 를 jQuery.fn 까지 확장 하면 됩 니 다.이제 jQuery.fn.init 가 어떻게 일 을 완 성 했 는 지 봅 시다.