jQuery 소스 code_jquery의 Chunker 일반 필터 분석

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

var Chunker = /((?:(((?:([ ^()] )|[^()] ) )|[(?:[[^[]]*]|['"][^'"]*['"]|[^[]'"] ) ]|\. |[^ > ~,([\] ) |[> ~])(s*,s*)?((?:.|r|n)*)/g,

이것은 Jq에서 가장 긴 정규 규칙입니다. 오랫동안 연구해왔지만 항상 혼란스러웠습니다. 디버깅하고 값을 단계별로 분석하면 더 쉽게 이해할 수 있습니다.

아래와 같이 서로 다른 색상이 구분되도록 그래프를 보다 직관적으로 만들려고 했습니다.


그룹 1은 하나씩 배열로 분할됩니다. 다음 코드를 통해:

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

// 함수 여기서 루프는 각 선택기를 div#id>p ul li 분할 ['div#id','>','p','ul','li'] while ( (chunker.exec(""), m = Chunker.exec(soFar)) !== null ) {
// soFar는 그룹 3인 첫 번째 레이어를 필터링한 후 선택기 문자열을 저장합니다. 그림
soFar = m[3];
//select 컨테이너 블록의 첫 번째 부분이 배열로 푸시됩니다.
parts.push( m[1] )// 분할된 경우 쉼표 ','로 이전 그룹이 끝나고 루프에서 벗어나 다른 선택 그룹으로 이동합니다.
if ( m[2] ) {
// 다른 선택기 세트 기록
extra = m[3];
break;
}
}


ID, 클래스 등 기타 사항은 이해하기 쉽습니다.

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

일치: {

// u00c0-uFFFF는 여러 국가의 알파벳 텍스트와 일치합니다. 또는 가족
ID: /#((?:[wu00c0-uFFFF-]|\.) ) /, //예: #myId
CLASS: /.(((?:[wu00c0-uFFFF-] |\.) )/, //예: .myClass
NAME: /[name=['" ]*((?:[wu00c0-uFFFF-]|\.) )['"]*]/ , //예: [name="myName"]
ATTR: /[s*((?:[ wu00c0-uFFFF-]|\.) )s*(?:(S?=)s*( ['"]*)(.*?)3|)s*]/, //예: [attribute=" value"]
TAG: /^((?:[wu00c0-uFFFF*-]| \.) )/, //예: div p a
CHILD: /:(only|nth|last|first) -child(?:((even|odd|[dn -]*)))?/ , //예: :first-child 또는 :nth-child(5n 1)
POS: /:(nth|eq |gt|lt|first|last|even|odd)(?:((d* )))?(?=[^-]|$)/, //예: :nth(3) 범위
PSEUDO : /:(((?:[wu00c0-uFFFF-]|\.) )( ?:((['"]?)((?:([^)] )|[^()]*) )2) )?/ // :jlkjkjl('kl(kklk)kl')
}


계속...