jQuery 생성자 초기화 매개변수 분석 continue

집

웹 프론트엔드

JS 튜토리얼

jQuery 생성자 초기화 매개변수 분석 continue_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:59 PM

jquery건설자

선택자가 다른 문자열이면 상황이 더 복잡해집니다

// Handle HTML strings
if ( typeof selector === "string" ) {...}

다양한 상황에 대처하기 시작하세요

// Are we dealing with HTML string or an ID&#63;
if ( selector.charAt(0) === "<" && selector.charAt( selector.length - 1 ) === ">" && selector.length >= 3 ) {
// Assume that strings that start and end with <> are HTML and skip the regex check
match = [ null, selector, null ];
} else {
match = quickExpr.exec( selector );
}

처음 문자가 ""이고 길이가 3보다 크다고 판단되면 이때의 선택자는 다음과 같은 간단한 HTML 태그라고 가정합니다. $('

') 와 같지만 $('') 와 같은 "가정"이 여기에 간다고 가정하는 것을 기억하세요. 그런 다음 일치 배열을 [null, selector, null]로 수정합니다. 여기서 일치는 주로 매개변수 유형을 구별하는 도구로 사용됩니다. 소스 코드 4개 변수 선언

init: function( selector, context, rootjQuery ) {
var match, elem, ret, doc;

if 조건이 충족되지 않으면 일치 결과를 얻기 위해 정규 표현식이 호출됩니다. QuickExpr은 jQuery 생성자에 선언된 변수입니다.

// A simple way to check for HTML strings or ID strings
// Prioritize #id over <tag> to avoid XSS via location.hash (#9521)
quickExpr = /^(&#63;:[^#<]*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/,

이 일반 규칙은 주로 html 문자열과 id 문자열을 구별하기 위한 것입니다. 두 번째 주석에서는 location.hash 기반 XSS 공격을 피하기 위해 QuickExpr에 #(#9521)이 추가된다는 점을 언급하고 있습니다. jQuery 공식 웹사이트에서 찾을 수 있습니다.

먼저 http://bugs.jquery.com/에 접속한 후 해당 값을 검색하세요

quickExpr.exec(selector)의 실행 결과는 배열이 될 수 있습니다. 배열의 첫 번째 요소는 일치하는 요소이고 나머지 요소는 그룹화된 일치 요소입니다()[^>] 및 ([w-]*)는 레이블 및 ID 값입니다. 결과는 결국 일치하도록 제공됩니다. 다양한 일치 상황을 분석해 보겠습니다. 먼저 정규 표현식이 없는 단일 레이블은 [null, selector, null] 형식이며 이는 아래 코드에서 증명됩니다.

<!doctype html>
<html>
  <head>
   <title></title>
    <script src='jquery-1.7.1.js'></script>
  </head>
  <body>
    <div id='div'></div> 
  </body>
  <script>
    $('<div>');
  </script>
</html>

html에서는 jQuery 객체를 생성한 다음 init 메소드에서 일치 결과를 출력합니다.

if ( selector.charAt(0) === "<" && selector.charAt( selector.length - 1 ) === ">" && selector.length >= 3 ) {
// Assume that strings that start and end with <> are HTML and skip the regex check
match = [ null, selector, null ];
} else {
match = quickExpr.exec( selector );
}
 console.log(match); // [null, "<div>", null];

매개변수를 $('#div')로 수정한 후 결과를 살펴보겠습니다

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

["#div", 정의되지 않음, "div", 인덱스: 0, 입력: "#div"]

특수한 경우도 $('

123') 있는데 결과를 살펴보겠습니다

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

dewrwe", "

", 정의되지 않음, 색인: 0, 입력: "

dewrwe"]

id는 항상 세 번째 요소에 있고 태그 값은 두 번째 요소에 저장되는 것을 볼 수 있습니다. 마지막 경우에는 $('

')를 생성하므로 차이가 없습니다. dom 요소의 경우 첫 번째 요소는 처리되지 않습니다. 이 결과를 바탕으로 다음 판단 분석을 진행할 수 있습니다.

다음은 경기 결과에 따라 3가지 상황으로 나누어집니다

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

     ...

} else if ( !context || context.jquery ) {

    ...

} else {

  ...

}

첫 번째 경우 충족되는 조건은 match에 값이 있어야 한다는 것입니다. Match[1]은 두 번째 요소가 레이블을 저장하는 요소라는 뜻이지만 값이 있거나 컨텍스트가 없습니다. 신분증이 없는 것 같은데 무슨 일인가요? 실제로는 그렇지 않습니다. 일치 결과를 분석해 보면 값이 없는 두 번째 요소는 반드시 id 선택기를 통해 얻은 결과여야 하며 id는 고유하므로 컨텍스트를 작성할 필요가 없음을 알 수 있습니다. (실제로 context를 작성하면 정상적으로 실행되지만, 대신 Sizzle을 사용하게 됩니다. 여기서는 body와 동일하게 처리되지 않습니다.) 자, 첫 번째 조건은

입니다.

1. 태그

$('

') $('

123') $('

23213213

')...

2. 컨텍스트가 없는 ID $('#div')

첫 번째 조건은 내부적으로 더 세분화됩니다.

// HANDLE: $(html) -> $(array)
if ( match[1] ) {

  ...

// HANDLE: $("#id")

}else{

}

물론 if는 태그를 처리하는 데 사용되고 else는 ID를 처리하는 데 사용됩니다.

context = context instanceof jQuery &#63; context[0] : context;
doc = ( context &#63; context.ownerDocument || context : document );
 
// If a single string is passed in and it's a single tag
// just do a createElement and skip the rest
ret = rsingleTag.exec( selector );
 
if ( ret ) {
if ( jQuery.isPlainObject( context ) ) {
selector = [ document.createElement( ret[1] ) ];
jQuery.fn.attr.call( selector, context, true );
 
} else {
selector = [ doc.createElement( ret[1] ) ];
}
 
} else {
ret = jQuery.buildFragment( [ match[1] ], [ doc ] );
selector = ( ret.cacheable &#63; jQuery.clone(ret.fragment) : ret.fragment ).childNodes;
}
 
return jQuery.merge( this, selector);

먼저 context의 값을 수정합니다. jQuery 객체라면 subscript 메소드를 사용하여 dom 요소로 변환합니다. 이 원칙은 앞서 언급한 바 있으며, context가 존재하지 않는 경우에는 doc 변수를 처리합니다. 문서 값을 doc에 할당합니다. 존재하고 ownerDocument 속성이 있는 경우 이 값은 여전히 문서입니다. 일반 js 개체와 같은 dom 요소가 아닌 경우 이 개체를 doc에 할당합니다. 변하기 쉬운. 그 직후에는

와 같은 단일 태그를 판단하기 위해 jQuery 생성자에서도 이 일반 규칙을 선언했습니다.

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

// Match a standalone tag

rsingleTag = /^(?:)?$/,

然后把结果交给ret变量，基于ret的值又进行划分按照单标签和复杂标签分开处理ret值存在那就是匹配到了单标签然后再根据context是不是普通对象又分为两种情况isPlainObject是检测是不是普通对象的方法,如果是普通对象，就利用js原生方法createElement传入标签创建元素并放在一个数组里面，之所以这样是为了以后跟jquery对象合并方便，然后把数组赋值给selector，后采用对象冒充的方法调用attr方法，这里attr居然有3个参数，而平常我们使用的api里面是两个参数，其实jQuery中有很多类似的情况，同样的方法有着对内对外两个接口。第二个参数就是对象形式的上下文，因为attr可以像

复制代码代码如下:

$("img").attr({ src: "test.jpg", alt: "Test Image" });

这给我们的其实就是我们以后可以$(‘

',{id:'div'})这样写了也是支持的。如果不是对象就直接创建元素不考虑属性。还是把创建的元素放在数组里面。如果ret没有值那就是复杂的标签了比如$(‘

231

')这样的这个时候原生的js就搞不定啦需要调取另外一个方法jQuery.buildFragment来处理，这个方法实现以后在学习吧，总之最后都会创建dom元素。最后返回合并后的结果

复制代码代码如下:

return jQuery.merge( this, selector );

不像之前的return this这里是返回merge执行后的结果其实他的任务就是把放在数组里面的创建好的的dom元素合并到jquery元素中去，最终变成{0：div,length:1...}这样的对象形式。这样的话简标签情况就处理完毕。

然后else里面处理的是id的情况

elem = document.getElementById( match[2] );
// Check parentNode to catch when Blackberry 4.6 returns
// nodes that are no longer in the document #6963
if ( elem && elem.parentNode ) {
// Handle the case where IE and Opera return items
// by name instead of ID
if ( elem.id !== match[2] ) {
return rootjQuery.find( selector );
}
// Otherwise, we inject the element directly into the jQuery object
this.length = 1;
this[0] = elem;
}
this.context = document;
this.selector = selector;
return this;

很简单直接调用原生js的id选择器但是有一些系统会出现bug

注释说的很清楚黑莓系统，就是元素已经不存在了但是依然能够匹配得到所以再加上父节点，不存在的元素肯定没有父节点的。还有一种情况就是ie和opera浏览器会出现按name值匹配的情况所以在做了一个判断

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

如果真的不幸出现了那就不能使用原生方法而是用find方法也就是使用sizzle引擎了，在大多数正常情况下就直接将获取到的元素放到this里面就可以啦然后修改下context的值。Ok终于把第一个大分支分析完了。然后再看根据match的第二个分支

 else if ( !context || context.jquery ) {
  return ( context || rootjQuery ).find( selector );
}

这里是如果没有上下文或者上下文是jquery对象的时候这个比较简单就是直接用find方法了rootjQuery 就是$（document）

最后字符串的情况上面都不属于的话

复制代码代码如下:

return this.constructor( context ).find( selector );

This.constructor就是jQuery其实还是使用find方法。

以上所述就是本文的全部内容了，希望大家能够喜欢。

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

Python vs. JavaScript : 개발자를위한 비교 분석May 09, 2025 am 12:22 AM

Python과 JavaScript의 주요 차이점은 유형 시스템 및 응용 프로그램 시나리오입니다. 1. Python은 과학 컴퓨팅 및 데이터 분석에 적합한 동적 유형을 사용합니다. 2. JavaScript는 약한 유형을 채택하며 프론트 엔드 및 풀 스택 개발에 널리 사용됩니다. 두 사람은 비동기 프로그래밍 및 성능 최적화에서 고유 한 장점을 가지고 있으며 선택할 때 프로젝트 요구 사항에 따라 결정해야합니다.

Python vs. JavaScript : 작업에 적합한 도구 선택May 08, 2025 am 12:10 AM

Python 또는 JavaScript를 선택할지 여부는 프로젝트 유형에 따라 다릅니다. 1) 데이터 과학 및 자동화 작업을 위해 Python을 선택하십시오. 2) 프론트 엔드 및 풀 스택 개발을 위해 JavaScript를 선택하십시오. Python은 데이터 처리 및 자동화 분야에서 강력한 라이브러리에 선호되는 반면 JavaScript는 웹 상호 작용 및 전체 스택 개발의 장점에 없어서는 안될 필수입니다.

파이썬 및 자바 스크립트 : 각각의 강점을 이해합니다May 06, 2025 am 12:15 AM

파이썬과 자바 스크립트는 각각 고유 한 장점이 있으며 선택은 프로젝트 요구와 개인 선호도에 따라 다릅니다. 1. Python은 간결한 구문으로 데이터 과학 및 백엔드 개발에 적합하지만 실행 속도가 느립니다. 2. JavaScript는 프론트 엔드 개발의 모든 곳에 있으며 강력한 비동기 프로그래밍 기능을 가지고 있습니다. node.js는 풀 스택 개발에 적합하지만 구문은 복잡하고 오류가 발생할 수 있습니다.

JavaScript의 핵심 : C 또는 C에 구축 되었습니까?May 05, 2025 am 12:07 AM

javaScriptisNotBuiltoncorc; it'SangretedLanguageThatrunsonOngineStenWrittenInc .1) javaScriptWasDesignEdasAlightweight, 해석 hanguageforwebbrowsers.2) Endinesevolvedfromsimpleplemporectreterstoccilpilers, 전기적으로 개선된다.

JavaScript 응용 프로그램 : 프론트 엔드에서 백엔드까지May 04, 2025 am 12:12 AM

JavaScript는 프론트 엔드 및 백엔드 개발에 사용할 수 있습니다. 프론트 엔드는 DOM 작업을 통해 사용자 경험을 향상시키고 백엔드는 Node.js를 통해 서버 작업을 처리합니다. 1. 프론트 엔드 예 : 웹 페이지 텍스트의 내용을 변경하십시오. 2. 백엔드 예제 : node.js 서버를 만듭니다.

Python vs. JavaScript : 어떤 언어를 배워야합니까?May 03, 2025 am 12:10 AM

Python 또는 JavaScript는 경력 개발, 학습 곡선 및 생태계를 기반으로해야합니다. 1) 경력 개발 : Python은 데이터 과학 및 백엔드 개발에 적합한 반면 JavaScript는 프론트 엔드 및 풀 스택 개발에 적합합니다. 2) 학습 곡선 : Python 구문은 간결하며 초보자에게 적합합니다. JavaScript Syntax는 유연합니다. 3) 생태계 : Python에는 풍부한 과학 컴퓨팅 라이브러리가 있으며 JavaScript는 강력한 프론트 엔드 프레임 워크를 가지고 있습니다.

JavaScript 프레임 워크 : 현대적인 웹 개발 파워May 02, 2025 am 12:04 AM

JavaScript 프레임 워크의 힘은 개발 단순화, 사용자 경험 및 응용 프로그램 성능을 향상시키는 데 있습니다. 프레임 워크를 선택할 때 : 1. 프로젝트 규모와 복잡성, 2. 팀 경험, 3. 생태계 및 커뮤니티 지원.

JavaScript, C 및 브라우저의 관계May 01, 2025 am 12:06 AM

서론 나는 당신이 이상하다는 것을 알고 있습니다. JavaScript, C 및 Browser는 정확히 무엇을해야합니까? 그들은 관련이없는 것처럼 보이지만 실제로는 현대 웹 개발에서 매우 중요한 역할을합니다. 오늘 우리는이 세 가지 사이의 밀접한 관계에 대해 논의 할 것입니다. 이 기사를 통해 브라우저에서 JavaScript가 어떻게 실행되는지, 브라우저 엔진의 C 역할 및 웹 페이지의 렌더링 및 상호 작용을 유도하기 위해 함께 작동하는 방법을 알게됩니다. 우리는 모두 JavaScript와 브라우저의 관계를 알고 있습니다. JavaScript는 프론트 엔드 개발의 핵심 언어입니다. 브라우저에서 직접 실행되므로 웹 페이지를 생생하고 흥미롭게 만듭니다. 왜 Javascr

See all articles