jquery 프레임워크 디자인

이것은 일부 jquery 프레임워크를 분석한 문자로 jquery 1.3.2 버전을 대상으로 하는 독자는 다음과 같은 요구를 갖추어야 한다.HTML2.자바스크립트 문법 지식을 잘 알고 있습니다.자바스크립트 대상에 대한 지식 익히기 4.jquery 프레임워크 숙련
본론으로 들어가다.jquery 대상의 초기화는 익명 함수에 쓰여 있습니다. 이렇게 합니다.

(function(){alert("jquery    ")})();

첫 번째 괄호는 함수를 설명하고 두 번째 괄호는 이 함수를 실행합니다. 즉, jquery 프레임워크가 페이지를 불러올 때 이미 몇 가지 일을 했습니다. (이 익명 함수는 이미 실행되었습니다.) 이 일들은 $("# your Id") 이나 $(". your Class") 등 방식으로 페이지 요소를 가져오고 가져오는 요소를 jquery 대상으로 포장할 수 있습니다.
익명 함수는 어떻게 이런 기능을 실현합니까?우선 프레임워크는 두 핵심 대상을 정의했다

jQuery = window.jQuery = window.$ = function( selector, context ) {}

하나는 jQuery 하나는 $두 대상이 하나의 함수를 가리킨다. 이 함수는 우리가 $() 또는 jQuery () 방법을 사용할 때의 입구이다. 이 방법은 jQuery를 되돌려준다.fn.init( selector, context );실례
jquery 대상은 어떤 대상입니까?jquery 대상은 사실javascript의 수조입니다. 이 수조 대상은 125개의 방법과 4개의 속성을 포함합니다. 4개의 속성은 각각 jquery 현재 jquery 프레임워크 버전 번호length입니다.yourClass 등
$("# your Id") 방법으로 jquery 대상을 가져오고, 페이지에 your Id 요소가 하나만 있다면 $("# your Id") [0] 는 Html Element 요소와 문서입니다.getElementById ("yourId") 에서 가져온 요소는 같습니다.
jquery 대상은 어떻게 만들어졌나요?이 대상은 바로 방금 우리가 언급한 것이다

jQuery = window.jQuery = window.$ = function( selector, context ) {}

프레임워크는 이 대상에 대한 방법뿐만 아니라 원형(prototype)도 정의한다.

jQuery.fn = jQuery.prototype = {//   json  }

원형의 정의는 json 대상을 통해 정의된 것이다.

{

init: function( selector, context ) {//   },

jquery: "1.3.2",//  

size: function() {//   },

//......

}

앞에서 언급한 125개 방법 4개의 속성 중 일부는 이 json 대상에서 정의를 완성했다
이 json 대상 중 첫 번째 방법은 init 방법, 즉 입구 방법 중의 jQuery입니다.fn.init( selector, context );이 방법은 정규 표현식 대상과 결합하여 jquery 대상을 구성합니다. 이 정규 표현식은 다음과 같습니다.

quickExpr = /^[^<]*(<(.|\s)+>)[^>]*$|^#([\w-]+)$/

 
다음은 init 방법의 실현 논리에 대해 말씀드리겠습니다. 이 방법은 두 가지 파라미터가 있습니다. 하나는 selector (선택기) 이고 하나는 context (상하문) selector는 $("# your Id") 또는 jQuery (".your Class") 로 전달되는 변수입니다. 이 파라미터는 반드시 문자열이 아닙니다.다른 형식의 변수일 수도 있어요. 이따가 context 파라미터를 소개할 거예요. 저희가 jquery를 사용할 때 거의 사용하지 않았어요. 이 두 파라미터가 되돌아오는 jquery 대상에서 나타났어요.
다음은 이 방법체 내부의 실현 논리를 살펴본다//선택기가 없거나 선택기가 비어 있으면 문서 대상에게 값을 부여한다

selector = selector || document; 

//만약 selector 매개 변수가dom 요소라면 jquery 대상을 직접 되돌려줍니다//즉 $(document.getElementById ("allen")) 는 당신의 요소를 jquery 대상으로 봉할 수 있습니다.

if ( selector.nodeType ) {

this[0] = selector;

this.length = 1;

this.context = selector;

return this;

} 

//typeof 대상의 유형을 추출하고 세 개의 등호로 효율이 높으며 유형 변환이 필요 없습니다. 두 개의 등호는 기본적으로 유형 변환이 있습니다.

if ( typeof selector === "string" ) { 

//여기 앞서 언급한 정규 표현식quick Expr//match는 사실 하나의 수조//0번째 요소는 정규 표현식과 일치하는 텍스트//첫 번째 요소는 정규 표현식의 첫 번째 하위 표현식과 일치하는 텍스트(있으면)//두 번째 요소는 두 번째 하위 표현식이 일치하는 텍스트(있으면)//3번째 요소는 3번째 서브표현식이 일치하는 텍스트(있을 경우) 여기서 요소의 ID이며 #은 포함되지 않습니다.

var match = quickExpr.exec( selector ); 

//정규 표현식이 내용과 일치하고 match[1]이 비어 있지 않거나 context가 비어 있지 않을 때//match[1]가 비어 있지 않을 때 selector는 HTML 문자열로 $("
xland
") 대상을 jquery 대상으로 포장//context가 비어 있을 때 selector는 페이지 요소 ID입니다
 

if ( match && (match[1] || !context) ) { 

//선택기가 html 문자열인 경우 당분간 표시하지 않음

if ( match[1] ){

selector = jQuery.clean( [ match[1] ], context );} 

//선택기는 ID

else {

//요소 얻기

var elem = document.getElementById( match[3] ); 

//만약 이 원소를 얻었지만 원소의 ID 속성이 match[3]가 아니라면 지점으로 들어갑니다.지부 안의 물건이 무슨 일을 했는지 당분간 표명하지 않겠다

if ( elem && elem.id != match[3] ){

return jQuery().find( selector );} 

//얻은 페이지 요소를 jquery 대상으로 봉함//elem이 비어 있으면 빈 그룹으로 전송하고 프레임워크는 이 빈 그룹을 어떻게 처리하는지 당분간 표시하지 않습니다//비어 있지 않으면 앞에서 말한 inf(selector.nodeType) 지점으로 뛰어들어 jquery 대상을 구성합니다

var ret = jQuery( elem || [] ); 

//jquery 대상의 context 속성 설정

ret.context = document; 

//jquery 대상의 selector 속성 설정

ret.selector = selector; 

//이 대상을 호출자에게 되돌려줍니다

return ret;

} 

여기서 var obj = $("#yourId");jquery 대상을 구축하는 초보적인 작업은 끝났습니다.