jQuery 선택기 소스 코드 해석(8): addCombinator function_jquery

함수 addCombinator(매처, 콤비네이터, 베이스)

1、源码

复主代码 代码如下:

함수 addCombinator(매처, 결합자, 베이스) {
 var dir = Combinator.dir, checkNonElements = 기본
   && dir === "parentNode", doneName = 완료 ;

 combinator.first ?
 // 가장 가까운 조상/이전 요소를 확인합니다
 함수(요소, 컨텍스트, xml) {
  while ((elem = elem[dir])) {
   if (elem.nodeType === 1 || checkNonElements) {
    반환 매처(elem, context, xml);
   }
  }
 } :

 // 모든 상위/이전 요소를 확인하세요
 함수(요소, 컨텍스트, xml) {
  var data, 캐시, externalCache, dirkey = dirruns " " doneName;

  // XML 노드에는 임의의 데이터를 설정할 수 없으므로
  // 디렉토리 캐싱의 이점
  if (xml) {
   while ((elem = elem[dir])) {
    if (elem.nodeType === 1 || checkNonElements) {
     if (matcher(elem, context, xml)) {
      true를 반환합니다.
     }
    }
   }
  } 그 밖의 {
   while ((elem = elem[dir])) {
    if (elem.nodeType === 1 || checkNonElements) {
     externalCache = elem[expando] || (elem[expando] = {});
     if ((캐시 = 외부Cache[dir])
       && 캐시[0] === dirkey) {
      if ((data = 캐시[1]) === true
        || 데이터 === 캐시 실행) {
       반환 데이터 === true;
      }
     } 그 밖의 {
      캐시 = 외부Cache[dir] = [ dirkey ];
      캐시[1] = matcher(elem, context, xml)
        || 캐시 실행;
      if (캐시[1] === true) {
       true를 반환합니다.
      }
     }
    }
   }
  }
 };
}

2、功能

生成关系选择器的执行函数。

3、参数

조합기——关系选择器对应Expr.relative中的值, Expr.relative中各种关系选择器性值如下.查紧邻对象的函数还是遍历所有可能对象的函数。将通过如下代码：elem = elem[dir]，获取指定位置关系的节点，其中dir等于combinator.dir。

复代码 代码如下:

친척 : {
 ">" : {
  dir: "parentNode",
  첫 번째 : 사실
 },
 " " : {
  dir: "parentNode"
 },
 " " : {
  dir : "previousSibling",
  첫 번째 : 사실
 },
 "~" : {
  dir : "previousSibling"
 }
}

base - 이 매개변수는 Combinator.dir과 함께 checkNonElement 변수의 값을 결정합니다. 코드는 다음과 같습니다. 이 값은 문자 그대로 현재 검사가 DOM이 아닌 요소라는 것을 의미하는 것으로 이해됩니다. 즉, elem.nodeType!=1일 때 값이 true이면 일치하는 함수가 실행되고, 그렇지 않으면 루프가 종료됩니다.

4. 복귀 기능

4.1 관계 선택자가 > 또는 이면 다음 함수가 반환됩니다.

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

함수(요소, 컨텍스트, xml) {
while ((elem = elem[dir])) {
if (elem.nodeType === 1 || checkNonElements) {
반환 매처(elem, context, xml);
}
}
}

4.1.1 기능
요소 유형 노드가 확인된 경우(예: checkNonElements==false), 요소가 지정한 위치 관계의 첫 번째 요소 유형 노드를 반복적으로 획득하고(elem.nodeType == 1), 일치 함수를 실행하고, 노드가 요구 사항을 충족하는지 확인하고, 요구 사항을 충족하면 true를 반환하고, 그렇지 않으면 false를 반환합니다.

모든 유형의 노드가 확인되면(예: checkNonElements==true), elem의 지정된 위치 관계로 인접한 노드를 가져오고 일치 함수를 실행하고 노드가 요구 사항을 충족하는지 확인하고 요구 사항을 충족하면 true를 반환합니다. , 그렇지 않으면 false를 반환합니다.

어떤 분들은 물어보실 수도 있는데, 가까운 이웃관계라고 하지 않나요? 그렇다면 반복적 획득 과정이 코드에 나타나는 이유는 무엇입니까? 이는 일부 브라우저가 노드 텍스트 사이의 줄 바꿈을 TextNode로 간주하므로 처리 중에 다음 요소 노드까지 이러한 노드를 건너뛰어야 하기 때문입니다.
4.1.2 매개변수
elem - 확인할 단일 노드 요소입니다.

컨텍스트 - 전체 선택기 문자열 일치를 수행하는 컨텍스트 노드로, 대부분의 경우 쓸모가 없습니다.

xml——현재 검색 개체가 HTML입니까 아니면 XML 문서입니까? HTML인 경우 xml 매개변수는 false입니다.

4.2 관계 선택자가 ~ 또는 공백인 경우 다음 함수가 반환됩니다.

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

//모든 조상/이전 요소를 검사합니다
함수(요소, 컨텍스트, xml) {
var data, 캐시, externalCache, dirkey = dirruns " " doneName;
// XML 노드에는 임의의 데이터를 설정할 수 없으므로 그렇지 않습니다.

// 디렉토리 캐싱의 이점
if (xml) {
while ((elem = elem[dir])) {
if (elem.nodeType === 1 || checkNonElements) {
If (매처(elem, context, xml)) {
true를 반환합니다.
}
}
}
} 그 밖의 {
while ((elem = elem[dir])) {
if (elem.nodeType === 1 || checkNonElements) {
externalCache = elem[expando] || (elem[expando] = {});
If ((캐시 = 외부Cache[dir])
&& 캐시[0] === dirkey) {
If ((data = 캐시[1]) === true
|| 데이터 === 캐시 실행) {
        데이터 반환 === true;
}
} 그 밖의 {
캐시 = 외부Cache[dir] = [dirkey];
캐시[1] = matcher(elem, context, xml)
|| 캐시 실행;
If (캐시[1] === true) {
        true를 반환합니다.
}
}
}
}
}
};

4.2.1 기능

XML 문서를 확인하는 경우, 그 과정은 4.1의 반환 함수와 동일합니다. 위 코드에서 if (XML) { ... } 안의 중괄호 안의 코드를 참고하세요.

HTML 문서인 경우 일치자에 따라 현재 요소를 일치시킵니다. 일치에 성공하면 true를 반환하고, 그렇지 않으면 false를 반환합니다.

4.2.2 매개변수
elem - 확인할 단일 노드 요소입니다.

컨텍스트 - 전체 선택기 문자열 일치를 수행하는 컨텍스트 노드로, 대부분의 경우 쓸모가 없습니다.

xml——현재 검색 개체가 HTML입니까 아니면 XML 문서입니까? HTML인 경우 xml 매개변수는 false입니다.

4.2.3 코드 설명

내부변수

dirkey - 노드 감지 결과를 캐시하는 데 사용되는 키입니다. 실행 중에 노드가 검사되면 탐지 결과(true 또는 false)가 노드의 dirkey 속성(속성 이름은 dirkey의 값)에 기록됩니다. 그리고 이 실행 중에 다시 발견되면 이에 도달합니다. 노드를 다시 검색할 필요가 없습니다. 캐싱이 필요한 이유는 여러 노드가 동일한 상위 노드 또는 형제 노드를 갖기 때문입니다. 캐싱을 사용하면 탐지 횟수가 줄어들고 성능이 향상될 수 있습니다.

dirruns - matcherFromGroupMatchers로 구성된 사전 컴파일된 코드가 실행될 때마다 의사 난수가 생성되어 다양한 실행 프로세스를 구별합니다.
doneName——addCombinator 함수가 실행될 때마다 done 변수는 1씩 증가하여 생성된 서로 다른 위치 관계 일치 함수를 구별합니다.

cachedruns - 일치하는 DOM 요소를 기록하는 데 사용됩니다. 예를 들어 div.map>span, 범위 선택기와 일치하는 요소가 3개 있는데, 각 요소에 대해 > 일치 함수를 실행하면 캐시드런은 순서대로 0, 1, 2가 됩니다. 코드에 따르면, 캐시드런의 역할은 실행 과정에서 일치를 위해 동일한 요소에 대해 elementMatchers를 사용할 때, 동일한 요소가 다시 만나면 일치하지 않는 결과를 직접 얻을 수 있다고 직접적으로 이해할 수 있습니다. 누구든지 마주치면 알려주세요. 감사합니다!

코드 설명

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

while ((elem = elem[dir])) {
if (elem.nodeType === 1 || checkNonElements) {
// elem 노드의 Expando 속성이 존재하지 않는 경우, 빈 객체를 부여하고 동시에 externalCache
에 부여합니다. // elem 노드의 Expando 속성이 존재하는 경우 해당 값을 externalCache
에 할당합니다. externalCache = elem[expando] || (elem[expando] = {});
/*
* outCache[dir]에 값이 있고 첫 번째 요소가 현재 dirkey와 동일한 경우
* 이는 이번 실행 중에 현재 위치 선택기가 노드를 감지하고 if 문을 실행하여 캐시에서 직접 결과를 얻었음을 의미합니다
* outCache[dir]이 존재하지 않거나 첫 번째 요소가 현재 dirkey와 동일하지 않은 경우
* * 이 실행 중에 현재 위치 선택기가 노드를 감지하지 못했음을 의미하며 else의 문을 실행하고 노드를 일치시킨 후 결과를 캐시에 저장합니다
*/
if ((캐시 = 외부Cache[dir])
&& 캐시[0] === dirkey) {
// 캐시의 탐지 결과가 true이거나 캐시드런의 값과 같을 경우 탐지 결과가 반환됩니다(false 또는 true).
// 그렇지 않으면 계속 루프를 수행하여 일치를 위한 위치 관계와 일치하는 이전 노드를 얻습니다.
if ((data = 캐시[1]) === true
|| 데이터 === 캐시 실행) {
반환 데이터 === true;
}
} 그 밖의 {
//outerCache[dir] 및 캐시에 [dirkey] 배열을 할당합니다
캐시 = 외부Cache[dir] = [ dirkey ];
// 일치에 성공하면 캐시[1]에 true를 할당하고, 그렇지 않으면 캐시[1]에 캐시드런 값을 할당합니다.
캐시[1] = matcher(elem, context, xml)
|| 캐시 실행;
// 매칭 결과가 true이면 true를 반환하고, 그렇지 않으면 루프를 계속하여 매칭을 위한 위치 관계와 일치하는 이전 노드를 얻습니다.
if (캐시[1] === true) {
true를 반환합니다.
}
}
}
}