jQuery 구조 함수 init 매개 변수 분석 (1)

9190 단어 jquery
지난 에세이에서 jQuery의 구조 함수를 분석했는데 jQuery 대상 중 하나의 원형 방법인 init가 진정한 구조 함수이다. init의 원형 대상과 jQuery의 원형 대상이 인용 관계를 유지함으로써 init의 실례가 jQuery의 원형 방법을 정상적으로 호출할 수 있게 한다. 마치 jQuery의 실례와 같다.다음은 init라는 배후의 구조 함수가 어떻게 쓰여 있는지 살펴보자.
init: function( selector, context, rootjQuery ) {

...

}

 
이 방법은 세 개의 매개 변수를 받아들이는 것을 볼 수 있는데, 그 앞의 두 개의 매개 변수는 jQuery 방법으로 전달된 것이다
var jQuery = function( selector, context ) {

// The jQuery object is actually just the init constructor 'enhanced'

return new jQuery.fn.init( selector, context, rootjQuery );

},

 
Selector는 원칙적으로 임의의 값을 입력할 수 있지만 모든 값이 의미가 있는 것은 아니다. undefined,DOM 요소, 문자열, 함수, jQuery 대상, 일반JavaScript 대상 등 몇 가지 유형만 유효하다. 이 매개 변수는 보통 기입하지만 쓰지 않아도 틀리지 않는다.
console.log($());

//[constructor: function, init: function, selector: "", jquery: "1.7.1", size: function…]

 
Context는 실행 상하문이나 실행 범위로 전송되지 않거나 DOM 요소, jQuery 대상, 일반 자바스크립트 대상 중 하나로 전송될 수 있습니다
파라미터 루트jQuery: 문서 대상을 포함하는 jQuery 대상입니다. 문서에 사용됩니다.getElementById () 검색에 실패했습니다. selector는 선택기 표현식이고 context가 지정되지 않았으며, selector가 함수인 경우 $(document) 입니다.
다음은 매개 변수에 따라 12가지 상황으로 나누어 하나씩 토론한다
1.selector는 false로 변환할 수 있습니다.
// Handle $(""), $(null), or $(undefined)

if ( !selector ) {

return this;

}

 
원본 코드의 주석은 이미 매우 명확하게 쓰여 있으며, 이 세 가지 상황일 때 직접적으로 Return은 어떠한 처리도 하지 않는다
2. 매개 변수 selector는 DOM 요소입니다.
예를 들어 $(document)이라는 쓰기
// Handle $(DOMElement)

if ( selector.nodeType ) {

this.context = this[0] = selector;

this.length = 1;

return this;

}

 
dom 요소라면 노드 형식이 있을 것입니다. 이 노드를 jquery 대상의 첫 번째 요소로 만들고 상하문context에 값을 부여합니다.length 속성은 jQuery의 원형 속성입니다. 기본값은 0입니다.
// The default length of a jQuery object is 0

length: 0,

 
여기에 원소가 하나 생기면length 속성을 1로 수정합니다.return this 작업은 함수를 실행한 후에도 jQuery 대상이 되도록 합니다. 그러면 $(document) 와 유사하게 실행할 수 있습니다.each () 라는 체인이 호출되었습니다.최종적으로 얻은 이와 같은 {0:document,context:document,length:1...}대상, 사실 모든 상황은 마지막에 이런 형식의 대상이 된다. jQuery의 원형 속성과 방법을 제외하고는 얻은dom 노드를 아라비아 숫자에 따라 순서대로 배열하기 때문에 우리는 $(selector)[0]의 형식으로 $(selector)를 대체할 수 있다.get(0)으로dom 대상을 가져옵니다.예를 들면 다음과 같습니다.
<!doctype html>

<html>

   <head>

      <title></title>

   </head>

   <body>

       <div></div>

       <div></div>

       <div></div>

   </body>

   <script src='jquery-1.7.1.js'></script>

   <script>

     console.log($('div'));

/*[div, div, div, prevObject: jQuery.fn.jQuery.init[1], context: document, selector: "div", constructor: function, init: function…]

0: div
1: div
2: div
context: document
length: 3
prevObject: jQuery.fn.jQuery.init[1]__proto__: jQuery[0]
selector: "div"
.
*/
   </script>

</html>

 
3. 매개 변수는 특수 문자열 "body"
바디 요소가 한 문서 대상에 하나밖에 없기 때문에 단독으로 열거하여 처리합니다
// The body element only exists once, optimize finding it

if ( selector === "body" && !context && document.body ) {

this.context = document;

this[0] = document.body;

this.selector = selector;

this.length = 1;

return this;

}

 
여기에 세 가지 조건이 동시에 충족되어야 하며, 두 번째는 상하문이 없어야 한다는 조건을 나도 잘 이해하지 못한다. $('body',document)와 같은 정상적으로 보이는 문법도 이런 상황에 의해 무시될 수 있다.
 console.log($('body',document));

 /*

 jQuery.fn.jQuery.init[1]

0: body

context: document

length: 1

prevObject: jQuery.fn.jQuery.init[1]

selector: "body"

__proto__: jQuery[0]

*/


 
 
 
$('body') 의 결과와 같지만, 두 가지 상황으로 간주된다. 바디는 상하문이 하나밖에 없기 때문에 문서만 추가할 필요가 없기 때문일 수도 있고, 그렇지 않으면 상하문이 문서인지 아닌지를 판단해야 하기 때문이다.세 번째 조건은document을 확보하는 것이다.body가 반드시 존재해야 합니다. 그러면 어떤 상황에서 앞의 두 가지 상황이 문서를 만족시킬 수 있습니까?바디가 또 없는데?먼저 js 코드가 html 코드보다 먼저 불러올 때 이것은 초보자가 자주 범하는 오류입니다. 보통 우리는 다음과 같이 써야 합니다.
$(function(){...})

 
혹은
$(document).ready(function(){...})

 
사실 이 두 가지는 같은 추출의 방법이고dom는 이 부분을 불러온 후에 분석합니다.이에 대해 우리는 html 코드를 다음과 같이 테스트할 수 있다.
<!doctype html>

<html>

   <head>

      <title></title>

        <script src='jquery-1.7.1.js'></script>

      <script> 

              $('body')

   </script>

   </head>

   <body>

       <div></div>

       <div></div>

       <div></div>

   </body>

</html>

　　
그리고 jQuery 소스 코드에서 selector, context,document을 출력합니다.body
  
console.log(selector+context+document.body);

// The body element only exists once, optimize finding it

if ( selector === "body" && !context && document.body ) {

this.context = document;

this[0] = document.body;

this.selector = selector;

this.length = 1;

return this;

}

 
비록 우리는 하나만 썼지만 사실은 네 번을 집행했다. 마지막 한 번이야말로 우리가 호출한 결과이다. 마지막 결과는 바디언더 finednull이다. 이때 앞의 두 개는 만족하지만 마지막은null이다.첫 번째 jQuery 전체 구조 구조에서undefined가 다시 시작되면 문서입니다.바디가 null로 다시 쓰여지지 않을까요?내가 코드에서 수정을 시도할 때 오류를 보고하는 것은 불가능한 것 같다. 그러면 이 조건은 html을 불러오지 않고 실행하는 상황을 예방하는 것이다.
네 번째는 상술한 문자열 상황을 제외한 다른 문자열로 상황은 다음 편에 많이 두도록 하겠습니다.
JQuery 빠른 시작(1)
jquery formatCurrency 통화 포맷 처리

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage